基于vue-cli 3.x/@vue/cli构建vue项目

为区别老版本的vue-cli 2.x，vue-cli 3.x已经更换为@vue/cli

1. 安装@vue/cli
   如果已经安装了旧版本的vue-cli，需要先卸载
   npm uninstall vue-cli -g
   或者
   yarn global remove vue-cli

   卸载成功后进行安装
   npm install -g @vue/cli
   或者
   yarn global add @vue/cli

   查看版本
   vue --version

2. 创建项目
   1）通过指令构建
   vue create hello-world
   
   2）通过vue ui
   
   
   3）如果仍然需要创建2.x的模板，可以使用vue init功能

   npm install -g @vue/cli-init
   
   # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
   vue init webpack my-project
   

3. 目录结构
   与vue-cli 2.x相比，build、config、router都没有了，启动和打包方式也变更为vue-cli-service了
   

4. 配置多环境
   参考：https://cli.vuejs.org/zh/guide/mode-and-env.html

   默认情况下，一个 Vue CLI 项目有三个模式：
   development 模式用于 vue-cli-service serve
   production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
   test 模式用于 vue-cli-service test:unit

   也就是 vue-cli-service serve默认的就是.env.development，只需要在package.json同级目录增加.env.development文件，配置环境变量即可

   可以自定义mode，比如创建.env.dev，package.json中配置"dev":"vue-cli-service serve --mode dev"即可；

   注意：环境变量需要以VUE_APP_开头，程序中直接使用process.env.VUE_APP_XXX即可

5. 自定义配置
   在根目录下创建vue.config.js

   module.exports = {
       publicPath: '/',
       outputDir: 'dist',
       devServer: {
           host: '10.0.0.57',
           port: '8071',
           disableHostCheck: true
       }
   }
   

6. 添加路由
   1）npm install vue-router
   2）在src目录创建router.js

   import Vue from 'vue'
   import Router from 'vue-router'
   import HelloWorld from './components/HelloWorld'
   
   Vue.use(Router)
   
   const routers = [
       {
           path: '/hello',
           name: 'HelloWorld',
           component: HelloWorld,
           meta: {
               title: '首页'
           }
       }
   ]
   export default new Router({
       routes: routers
   })
   

   3）main.js中引入路由配置

   import Vue from 'vue'
   import router from './router'
   
   new Vue({
     render: h => h(App),
     router,
     store
   }).$mount('#app')
   

7. 配置eslint， vue-cli 2.x中是通过独立的配置文件.eslintrc.js进行配置，在 vue-cli 3.x中在package.json中的eslintConfig配置即可

   "eslintConfig": {
     "root": true,
     "env": {
       "node": true
     },
     "extends": [
       "plugin:vue/essential",
       "eslint:recommended"
     ],
     "parserOptions": {
       "parser": "babel-eslint"
     },
     "rules": {
       "vue/no-unused-vars": "off"
     }
   },
   

demo地址 https://github.com/kevin4j/fish-vue