vue-cli脚手架

vue-cli使用

现在使用前端工程化开发项目是主流的趋势，也就是说，我们需要使用一些工具来搭建vue的开发环境。一般情况下我们都会选择webpack进行项目的构建，在这里我们直接使用vue官方提供的，基于wenpack的脚手架工具进行项目开发。
注意：要求node.js版本是8+

安装方法

全局安装vue-cli

npm install -g @vue/cli  或者
yarn global add @vue/cli

检测安装：

vue -V (@vue/cli 4.2.3)

脚手架创建项目

终端命令：vue create 项目名称
这里如果你是第一次使用加手机啊进行项目创建的话，只有两项提示。
第一项是默认配置，我们一般选择第二项自定义配置进行项目构建。
我们可以自右的选择安装哪些配置，按键盘上下键进行选中，安装。
选中哪一个，通过键盘空格键确定，所有的选择完毕后，按键盘的Enter键进行下一步。
需要注意的是：模板创建的时候会询问需要使用Eslint来标准化我们的代码规范
常用命令：

npm run serve  开发环境创建
npm run build  生产环境创建
npm run lint 代码检测工具

style标签 加上scoped属性，会在当前的局部文件内生效
style标签 加上lang = ‘scss’ ，支持scss
注意：
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
         }
     }
}

3）alias别名配置

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

4）打包路径配置

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