vue-cli3配置

1. npm i -g @vue/cli

可能出现 Cannot find module cmd-shim 错误，使用 npm install -g  cmd-shim 即可解决。

2. vue create my-project

• default (babel, eslint) 默认套餐，提供 babel 和 eslint 支持。
• Manually select features 自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。

使用方向键在特性选项之间切换，使用空格键选中当前特性，使用 a 键切换选择所有，使用 i 键翻转选

Manually select features

• TypeScript 支持使用 TypeScript 书写源码。
• Progressive Web App (PWA) Support PWA 支持(一般不选)。
• Router 支持 vue-router 。
• Vuex 支持 vuex 。
• CSS Pre-processors 支持 CSS 预处理器。
• Linter / Formatter 支持代码风格检查和格式化(一般不选)。
• Unit Testing 支持单元测试。
• E2E Testing 支持 E2E 测试(一般不选)。

3. Use

• Use class-style

选择在开发 Vue 组件时，要不要使用 class 风格的写法

• Use Babel

要不要使用 babel 工具自动为转换后的 TypeScript 代码注入 polyfiills

• SCSS/LESS

css语言支持

• Pick a unit

选择单元测试工具,Jest比较火

• where do you prefer placing

选择配置文件的位置。类似 .babelrc 放在外面或者直接配置在package.json。
VSCODE一般默认会在项目根目录下寻找配置文件,选择把配置文件放在外面,选择In dedicated config files

• Save this as

把当前的这一系列选项配置保存起来，方便下一次创建项目时复用(个人喜好选择no)

• Use Yarn

安装包管理工具，个人偏爱Npm

4. 等待项目创建
5. 搭建项目

• 声明全局环境变量

在根目录配置 .env,.env.[mode（dev or build or test）]...的文件，其次需要以VUE_APP开头进行变量申明

6. 项目打包

• 图片压缩

npm install image-webpack-loader --save-dev
  // 压缩图片
  chainWebpack: config => {
    config.module
        .rule('images')
        .use('image-webpack-loader')
        .loader('image-webpack-loader')
        .options({
          bypassOnDebug: true
        })
        .end()
  },