vue-cli的使用

全局安装vue-cli:

npm install -g @vue/cli

或者

yarn global add @vue/cli

检测安装:vue -V
在使用vue的时候我们需要先下载对应插件Vue-cli，有两种方式可以在控制台或者终端安装npm install -g @vue/cli 或者 yarn global add @vue/cli 安装好以后我们就可以检查型号![可以看到我们下载的型号是4.5.3]

此时我们就安装成功了需要的插件接下来我们可以在终端里创建项目了。下面我们就不在截图，直接用文字表述了，可以直接按照下面的步骤直接在终端输入。（终端直接右击选择在终端打开会比较方便哦）

1. vue create 项目名称
2. 按向下的箭头选择 Manually select features
3. 一般情况下可以选择（用空格控制选择与否） Choose Vue version ， Babel ， CSS Pre-processors ， Linter / Formatter
4. 2.x
5. Sass/SCSS (with node-sass)
6. ESLint + Standard config
7. Lint and fix on commit
8. In dedicated config files 选择y
9. 最后一步保存一个预设的名字，然后回车安装
   此时会产生很多的文件，我们一般在src文件夹里编程，其他这里就不过多介绍，需要的可以自行百度 ，
   如图所示，在src文件夹里会有两个常用的，components文件夹和App.vue文件，在components文件夹里我们可以写子组件，App.vue文件会直接与index.html文件中的div的id为app的节点相连接，在引用时候会直接把模板内容替换掉该div。
   vue create 项目名称

这里如果你是第一次使用脚手架进行项目创建的话，是只有两项提示。

第一项是默认配置，我们一般选择第二项自定义配置进行项目构建。

我们可以自由的选择哪些配置，按键盘上下键进行选中，安装。

选中哪一个，通过键盘空格键确定，所有的都选择完毕后，按键盘的Enter键进行下一步。

需要注意的是：模板创建的时候会询问需要使用EsLint来标准化我们的代码规范。

1. 关闭eslint
   ​ 如果当前项目使用了eslint，并且需要关闭。需要手动创建vue.config.js文件，采用如下代码：

module.exports = {
    devServer: {
        overlay: {
          warnings: false,
          errors: false
        }
    },
    lintOnSave:false //直接关闭eslint检查
}

2. proxy代理配置

devServer: {
	 open:true, //自动开启浏览器
     port:8000, //随便改端口号
     proxy: {     //  配置代理，解决前端浏览器的跨域问题
         '/api': {
             target: 'https://*.*.com',  //目标请求的域名地址
             host: '*.*.com',             
             changeOrigin:true   //是否改变
              pathRewrite:{      //重写地址
                // 路径重写  localhost:8888/api/login  => www.baidu.com/api/login
                "^/api":"" // 假设我们想把 localhost:8888/api/login 变成www.baidu.com/login 就需要这么做
              }
         }
     }
}

3. alias别名配置

configureWebpack: {
    resolve: {
        alias: {
            'assets': '@/assets',
            'con': '@/components',
            'views': '@/views',
        }
    }
}

4. 打包路径配置

// 基本路径
publicPath: '/vue-demo'

走别人不曾走过的路，才能看到别人不曾看到的风景。