Vue-Cli3

创建项目

vue cli是一个基于vue.js进行快速开发的完整系统，通常包含三个组件，分别是：

• cli：@vue/cli是全局安装的NPM包，提供终端vue命令，比如vue create、vue serve、vue ui等命令。
• cli服务：@vue/cli-service是开发环境以来，构建在webpack和webpack-dev-server之上，提供诸如serve、build、inspect等命令。
• cli插件，为vue项目提供可选功能的NPM包，比如Babel/TypeScript转译、ESLint集成、UNIT和E2E测试等。

安装

• 安装 vue-cli3 需要 Node.js 8.9+ 版本，推荐Node.js 8.11.0+版本。
• vue-cli3 的包名由vue-cli改为@vue/cli，如果已安装vue-cli1.x或2.x，可先通过npm uninstall -g vue-cli卸载。

1. 检查Node.js版本
2. 卸载Vue-cli2.x
3. 重新安装@vue/cli
4. 创建应用
5. 允许服务

# 查看Node.js版本
$ node -v
v12.14.0

# 卸载vue-cli
$ npm uninstall -g vue-cli

# 安装vue脚手架
$ npm i -g @vue/cli

# 查看vue版本
$ vue --version
2.9.6

# 使用脚手架创建项目
$ vue create chat

$ cd chat

$ npm run serve

浏览器访问 http://127.0.0.1:8080

选择预设

创建Vue项目会提示选取一个preset预设，可选默认包含基本的Babel + ESLint设置的预设，也可手工选择特性。

Vue CLI v4.1.2
? Please pick a preset:
> default(babel, eslint)
 Manually select features

• 默认预设：default（babel, eslint）

默认设置适合快速创建新项目的原型，无任何辅助功能的NPM包。

• 手工选择特性：Manually select features

手动配置，使用方向键控制，使用空格键选中，使用a键选择。选项是所需面向生产环境的项目，提供可供选择功能的NPM包。

手动配置提供的NPM包

Vue CLI v4.1.2
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

VUE CLI使用一套基于插件的架构，打开package.jsoon会发现依赖都是以@vue/cli-plugin-开头。插件可以修改webpack内部配置，也可以向vue-cli-service注入命令。

安装插件

例如：手工添加eslint插件，命令会将@vue/eslint解析为完整的包名@vue/cli-plugin-eslint，然后从NPM安装并调用其生成器。若不带@vue前缀，命令会换做解析一个unscoped包，可基于一个指定的scope使用。

$ vue add @vue/eslint

NPM包	描述
Babel	转码器，将ES6转换为ES5。
TypeScript	JS超集扩展了JS语法，需编译输出为JS。
PWA	渐进式Web应用程序
Router	Vue路由
Vuex	Vue状态管理模式
CSS Pre-processors	CSS预处理器
Linter/Formatter	代码风格检查和格式化
Unit Testing	单元测试
E2E Testing	e2e测试

babel

Babel是一个JavaScript编译器，用于将ECMAScript2015+版本的代码转换为先后兼容的JavaScript语句。

• 语法转换
• 通过Polyfill在目标环境中添加缺失的特性
• 源码转换

vue-router

vue-router默认采用hash模式，也可选择history模式。vue-router利用浏览器自身的hash模式和history模式的特性来实现前端路由，通过了浏览器提供的接口。

• hash：浏览器URL地址栏中# 符号，hash不被包括在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
• history：利用HTML5 History Interface中新增的pushState()和replaceState()方法，需特定浏览器支持，适用于单页客户端应用。history mode徐后台配置支持。

vue cli 3中采用src/router.js文件替代了vue cli 2的src/router/index.js文件

vuex

vuex用于状态管理，vue cli 3中默认使用store.js代替原vue cli 2种store文件夹中的三个JS文件action、mutations、state以及store的getters用法。

css pre-processors

css预处理器用于解决浏览器兼容并简化css代码等问题

目录结构

• vue-cli3.x相比vue-cli2.x目录简洁了很多，没有了build和config等文件夹。
• vue-cli3.x相比vue-cli2.x所创建目录中已经看不到webpack的配置
• vue-cli3.x中创建vue.config.js文件通过configureWebpack来配置webpack

文件	描述
.browserslistrc	用于指定项目的目标浏览器范围
package.json	定义项目所需模块及项目信息
package-lock.json	锁定安装时的包版本号
tsconfig.json	TypeScript配置文件
babel.config.js	Babel配置文件
.eslintrc.js	eslint检测规则配置
.gitignore	GIT配置文件
public	配置ico和index.html
src	vue项目文件夹
src/assets/	用于存放项目静态文件，包括图片、JS、SVG等，生产环境下会被WebPack复制。
src/components/	存放公用Vue组件页面
src/styles	存放重写reset.css以及字体图标CSS文件
src/views	存放较大模块，比如登录页、注册页、首页等。

public

vue cli 3摒弃vue cli2的static文件夹新增了public文件夹，vue cli 2中static文件夹是webpack存放默认静态资源的文件夹，打包时会直接复制一份到dist文件夹中，且不会经过webpack编译。vue cli 3中静态资源有两种处理方式：

• 经过webpack处理：在JS被导入或在template/css中通过相对路径被引用的资源会编译并压缩。
• 不经过webpack处理：放置在public文件夹下或通过绝对路径被引用的资源将会直接拷贝一份，且不做任何编译压缩处理。

vue cli 3中public/index.html模板会被html-webpack-plugin处理。

src/views

vue cli 3的src文件夹中新增了views文件夹用于存放页面，用于区分components组件。

环境配置.env

项目中通常包含多种模式，常见比如开发模式development、生产模式production、测试模式test等，开发中会根据环境变量process.env.NODE_ENV进行区分。

通过在package.json的scripts配置项中添加 --mode xxx来选择不同环境。

$ vim package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "test:unit": "vue-cli-service test:unit",
  "lint": "vue-cli-service lint"
}

"scripts": {
  "serve": "vue-cli-service serve --mode development",
  "build": "vue-cli-service build --mode development",
  "test:unit": "vue-cli-service test:unit --mode development",
  "lint": "vue-cli-service lint --mode development"
},

在根目录下创建.env.production生产环境配置和.env.development开发环境配置，配置文件以键值对的方式，配置项必须以VUE_APP_以前缀。NODE_ENV和BASE_URL是两个特殊变量，在代码中始终可用。

$ vim .env.development
NODE_ENV = "development"
VUE_APP_API = "http://127.0.0.1:8080/api"

$ vim .env.production
NODE_ENV = "production"
VUE_APP_API = "http://127.0.0.1:8080/api"

项目配置vue.config.js

vue.config.js是一个可选的配置文件，若项目根目录中存在此文件，则会被@vue/cli-service自动加载。

vue-cli 3.x 创建的目录下看不到WebPack配置。手工配置webpack可在根目录下创建vue.config.js文件。在根目录下创建vue.config.js文件作为Vue项目配置文件，其中配置输出路径名、根目录、预处理、devServer配置、PWA、DLL、第三方插件等。

$ vim vue.config.js

module.exports = {
    configureWebpack:config=>{
        if(process.env.NODE_ENV === "production"){

        }else{
            
        }

    }
};

配置选项

选项	描述
publicPath	部署应用宝的基本URL，和webpack的output.publicPath一致。
outputDir	运行vue-cli-service build时生成的生产环境构建文件的目录，目标目录在够坚强会被清除。
assetsDir	静态资源目录
indexPath	指定生成的index.html的输出路径
filenameHashing	是否在生成的静态资源文件名中包含hash以控制缓存
pages	在多页模式下构建应用，每个页面对应一个入口文件。
lintOnSave	是否在开发环境下通过eslint-loader在每次保存时lint代码
runtimeCompiler	是否使用包含运行时编译器的vue构建版本

CSS Pre-processors

VUE CLI支持CSS Modules、PostCSS和SASS、LESS、Stylus在内的预处理器。所有编译后的CSS会通过 css-loader 来解析其中的url()引用，并将应用作为模块请求来处理。这意味着可以根据本地文件结构使用相对路径引用静态资源。若要应用NPM以来中的文件，或使用webpack alias，则需在路径前添加 ~ 前缀来避免歧义。

TypeScript

安装TypeScript

$ npm i -S typescript
$ npm i -S @vue/cli-plugin-typescript

配置TypeScript

若目录下存在tsconfig.json文件则意味着该目录是TypeScript项目的根目录，tsconfig.json文件中指定了用来编译项目的根文件和编译选项。项目可使用tsconfig.json来编译。

• 当不带任何输出文件的情况下调用tsc文件，编译器会从当前目录开始查找tsconfig.json文件，并逐级向上搜索父级目录。
• 当不带任何输出文件时调用tsc文件且使用命令行参数--project或-p指定一个包含tsconfig.json文件的目录。
• 当在命令行上指定了输入文件时，tsconfig.json文件会被忽略。

根目录下创建tsconfig.json，默认情况下typescript只负责静态检查，即使遇到错误也仅仅在编译时报错并不会中断编译，最终还是会生成一份JS文件，如果想要在报错时终止JS文件的生成，可在tsconfig.json配置中设置noEmitOnError选项为true。

$ vim tsconfig.json

{
  //编译选项
  "compilerOptions": {
    //编译目标版本
    "target": "esnext",
    //指定模块系统
    "module": "esnext",
    //是否启用严格类型检查
    "strict": true,
    //在.tsx文件中支持JSX
    "jsx": "preserve",
    //从tslib导入辅助工具函数
    "importHelpers": true,
    //模块处理方式，默认classic
    "moduleResolution": "node",
    //是否启用实验性的ES装饰器
    "experimentalDecorators": true,
    //报错时不生成输出文件
    "noEmitOnError":true,
    //通过为所有导入创建名称空间对象，支持CommonJS和ES模块之间的互操作性。意味着allowSyntheticDefaultImports。
    "esModuleInterop": true,
    //是否允许从没有设置默认导出的模块中默认导入，仅用于类型检查。
    "allowSyntheticDefaultImports": true,
    //是否生成map文件
    "sourceMap": true,
    //工作根目录
    "baseUrl": ".",
    //指定引入的类型声明文件，默认自动引入所有声明文件，一旦指定则会禁用自动引入，只引入指定的类型。
    "types": [
      "webpack-env",
      "mocha",
      "chai"
    ],
    //指定模块的路径，和baseUrl有关联，和webpack中resolve.alias配置一样。
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    //编译过程中需引入的库文件列表
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  //指定匹配列表，属于自动指定该路径下所有TS相关文件。
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  //指定排除列表，include的反向操作。
  "exclude": [
    "node_modules"
  ]
}

多页应用

错误处理

$ npm run serve

> [email protected] serve D:\vue\workspace\sxyh_web_stats
> vue-cli-service serve

 INFO  Starting development server...
 ERROR  WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry[2] should be a string.
   -> A non-empty string
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry[2] should be a string.
   -> A non-empty string