vue-cli是一个基于Vue.js的项目脚手架，可以帮助我们快速的搭建vue.js项目。之前我们已经总结了在vue-cli 2.*下开发前端所需要做的工作，包括开发用到的组件，访问权限控制等等。最近看了官方3.0版本的介绍，发现在3.0版本下的脚手架相对于之前2.0的版本使用起来就显得更加简洁，主要去除了build以及config目录，就让整个工程目录更加清晰易懂，当然整体与2.0还是有一些区别。到这里总结一下，虽然我们技术不是最牛的，但是软件我们就是要用最新的。于是我就将vue-cli 3.0版本用在了最近的几个新项目里。这里就来说说使用vue-cli 3.0版本需要做的工作，算是个总结。
1. 安装vue-cli 3.0
首先，新的脚手架是需要node.js 8.9+的，这里我就是在安装的时候，提示我node.js的版本不够。因此当Node版本不够时，我们就需要重新安装Node。当然了，直接在官网下载新版本，在本地覆盖安装就可以了。
更新好Node，接下来就可以愉快的安装vue-cli 3.0了：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
可以用一条命令来查看版本：vue --version
2. 创建项目
创建项目的方式有两种，一种是命令行创建项目：vue create story-web
这里story-web就是我们的项目名。
还有一种是UI图形界面创建：vue ui
这一种就不多说了，只要按照步骤走就可以了。UI界面还是比较强大，可以直接在界面中管理项目依赖，安装卸载都可以做。
当然项目创建完成以后，就需要安装依赖，安装依赖的方式跟以前一样，这里就不再说了。
启动项目命令也有改变：npm run serve
为什么是serve?看看package.json就知道了，从之前的dev改成了serve。
3. 配置vue.config.js
在创建的项目文件里是没有config文件的，这个地方就需要我们自己添加，当然，没有config文件，项目也是可以启动的，只是当有一些默认的配置需要修改的时候，这里的config文件就是必要的了，这里提供了一个config的文件，出处来自哪里已经不记得了。
// vue.config.js 配置说明
// 这里只列一部分，具体配置参考官方文档
module.exports = {
// baseUrl type:{string} default:'/'
// 将部署应用程序的基本URL
// 将部署应用程序的基本URL。
// 默认情况下，Vue CLI假设您的应用程序将部署在域的根目录下。
// https://www.my-app.com/。如果应用程序部署在子路径上，则需要使用此选项指定子路径。例如，如果您的应用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'.
baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/',
// outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
// outputDir: 'dist',
// pages:{ type:Object,Default:undfind }
/*
构建多页面模式的应用程序.每个“页面”都应该有一个相应的JavaScript条目文件。该值应该是一
个对象，其中键是条目的名称，而该值要么是指定其条目、模板和文件名的对象，要么是指定其条目
的字符串，
注意：请保证pages里配置的路径和文件名 在你的文档目录都存在 否则启动服务会报错的
*/
// pages: {
// index: {
// entry for the page
// entry: 'src/index/main.js',
// the source template
// template: 'public/index.html',
// output as dist/index.html
// filename: 'index.html'
// },
// when using the entry-only string format,
// template is inferred to be `public/subpage.html`
// and falls back to `public/index.html` if not found.
// Output filename is inferred to be `subpage.html`.
// subpage: 'src/subpage/main.js'
// },
// lintOnSave：{ type:Boolean default:true } 问你是否使用eslint
lintOnSave: true,
// productionSourceMap：{ type:Bollean,default:true } 生产源映射
// 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建
productionSourceMap: false,
// devServer:{type:Object} 3个属性host,port,https
// 它支持webPack-dev-server的所有选项
devServer: {
port: 8080, // 端口号
host: 'localhost',
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
proxy: {
'/lms/login':{
target: 'http://localhost:8090',
changeOrigin: true,
pathRewrite: {
'^/lms': ''
}
},
'/lms': {
target: 'http://localhost:8090',
changeOrigin: true
}
}
},
chainWebpack: config => {
const svgRule = config.module.rule('svg')
// 清除已有的所有 loader。
// 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
svgRule.uses.clear()
// 添加要替换的 loader
svgRule
.use('vue-svg-loader')
.loader('vue-svg-loader')
.options({ symbolId:'icon-[name]' })
}
}
chainWebpack 代码中的配置就是我们新增的，用于支持svg图片格式的处理，其实效果和2.0版本下的配置是一样的，只是这里换成了官方规定的链式操作。proxyTable的代理配置也是保持不变的。
其他的具体配置还是以官方文档为主。
4. 环境变量ENV
关于环境变量，这里其实就是我们配置的一些参数。当我们运行npm run serve时，实际上启动的是development模式。在这个模式下，倘若在此模式下和生产product环境下的一些配置参数不一样，那么这里的环境变量就起到作用了。
来看下官方的说明吧，这样或许就一目了然了：
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入，但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略
举个栗子：development模式下，会加载.env,.env.local,.env.development,.env.development.local环境变量。
相应的，product模式下，会加载.env,.env.local,.env.product,.env.product.local环境变量。
清楚了吧，而这些环境变量.env文件正是我们要手动创建的。
NODE_ENV=development
VUE_APP_SSO_LOGIN=http://localhost:8080/sso/login
VUE_APP_SSO_LOGOUT=http://localhost:8080/sso/logout
VUE_APP_SSO_APP_CALBACK=http://localhost:8080/sys/syslogin
VUE_APP_SSO_APP_LOGOUTCALBACK=http://localhost:8080/logout
VUE_APP_KAPTCHA_SWITCH=false
还有一点，自定义的环境变量要以VUE_APP_开头，这样，才可以在我们的业务代码中使用如：
window.location.href= process.env.VUE_APP_SSO_LOGIN+ "&service="+process.env.VUE_APP_SSO_APP_CALBACK
5. 安装Font-Awesome 5
关于使用第三方的图标库还确实走了点弯路，按照之前我们引入4.5版本的font-awesome方式，始终无法加载。于是尝试了加载5.*的版本才能显示出图标。这里要在main.js中添加引用：
//引入font-awesome
import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import solid from '@fortawesome/fontawesome-free-solid'
import regular from '@fortawesome/fontawesome-free-regular'
import brands from '@fortawesome/fontawesome-free-brands'
fontawesome.library.add(solid)
fontawesome.library.add(regular)
fontawesome.library.add(brands)
//...
Vue.component('font-awesome-icon', FontAwesomeIcon)
使用的方式，我们就还是保持之前的姿势：
<i class="fa fa-align-justify"></i>
好了，其实到这里，上面所列的就简单的总结了开发环境下和vue-cli 2.0版本的一些区别,对于在vue-cli 3.0下做基本的开发已经是没有问题了，结合之前2.0的经验，应该会很快上手。当然在以后的使用中还有遇到其他的一些再来总结了。