vue-cli的使用

vue-cli的使用

安装方法

全局安装vue-cli:

npm install -g @vue/cli

or

yarn global add @vue/cli

检测安装

vue -V

脚手架创建项目

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:{      //重写地址
                "^/api":""
              }
         }
     }
}

3) alias别名配置

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

4) 打包路径配置

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