VueCli使用说明

vue-cli的2.0和3.0版本差距还是挺大的。如何安装我就不写了，官网都解释的很清楚了，我这里安装的时候，选择了用yarn作为包管理工具。主要解释下在创建项目时的各种选项的含义。

1.新建项目：vue create example

2.选择手动配置,上下键修改选项，Enter键确定（第一项是默认配置，第二项是手动配置）

3.选择配置项，这里总共有九项配置，空格键“选中/取消选中”，确定键完成选择，上下键移动(如果使用Git Bash,上下键好像不管用。最好用PowerShell)。全选，主要看看都有些什么。

4.Babel

这一项一定要选，是ES6和ES5的转码器，使用ES6语法，毕竟也不是所有浏览器都支持，在微软宣布放弃Edge拥抱Chrome的时候，我相信还是有程序员要兼容IE8（vue已经不支持IE9以下了）。

5.TypeScript

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个严格超集，并添加了可选的静态类型和基于类的面向对象编程。C#的首席架构师以及Delphi和Turbo Pascal的创始人安德斯·海尔斯伯格参与了TypeScript的开发。TypeScript设计目标是开发大型应用，然后转译成JavaScript。由于TypeScript是JavaScript的严格超集，任何现有的JavaScript程序都是合法的TypeScript程序。TypeScript支持为现存JavaScript库添加类型信息的定义文件，方便其他程序像使用静态类型的值一样使用现有库中的值。当前有第三方提供常用库如jQuery、MongoDB、Node.js和D3.js的定义文件。
TypeScript编译器本身也是用TypeScript编写，并被转译为JavaScript，以Apache License 2发布。

是否使用class风格的组件语法：Use class-style component syntax?

是否使用babel做转义：Use Babel alongside TypeScript for auto-detected polyfills?

6.选择路由模式

（1）hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
（2）history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
history模式需要后台配合做路由。

7.CSS预处理选择

（1）Sass/SCSS
一种是传统的node-sass编译，一种是更快的dart-sass.Sass的主要实现有Ruby Sass 6和LibSass 8（node-sass底层使用的是LibSass），它们都有各自的优缺点。Ruby Sass的实现语言是高级语言Ruby，更容易迭代，但存在运行速度慢，不易安装的缺点。LibSass虽然速度快，但它的开发语言是C/C++，迭代速度慢，无法快速地添加各种功能。Dart的运行速度是真的快，对于大型样式文件，Dart Sass的处理速度是Ruby Sass的5~10倍，且只比LibSass慢1.5倍左右。同时，Dart是一门具备静态类型的动态语言，对比C/C++甚至是Ruby，Dart相对更容易上手且代码也更易于编写和维护。此外，Dart具备编译输出为JavaScript的能力，使得Dart Sass可以兼容NodeJS平台。

(2) Less
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

(3) Stylus
富于表现力、动态的、健壮的 CSS。我在hexo的主题中经常见到Stylus的使用，著名的Next主题中就使用了其语法。

8.linter / formatter config,代码语言规范检查设置

（1）TSlint
TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.

(2) ESlint
ESlint 被设计为完全可配置的，这意味着你可以关闭每一个规则而只运行基本语法验证，或混合和匹配 ESLint 默认绑定的规则和你的自定义规则，以让 ESLint 更适合你的项目。.eslintignore 用来配置不需要检查的文件(类似git的.gitignore)。.eslintrc.js 用来配置ESlint验证规则的配置文件。vue-cli3.0带了若干的默认ESlint默认配置选项，可以只选择只检查错误，或者是Airbnb团队的配置、标准配置、或者是可以兼容其他语言的配置。

9.选择什么时候进行代码检查

建议选保存就检测，等到commit的时候，问题可能都已经积累很多了。

10.选择单元测试类型（惭愧，前端干了好几年了，都没写过测试用例）

(1) Mocha+Chai
Mocha（发音”摩卡”）诞生于2011年，是现在最流行的JavaScript测试框架之一，在浏览器和Node环境都可以使用。所谓”测试框架”，就是运行测试的工具。通过它，可以为JavaScript应用添加测试，从而保证代码的质量。Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.

(2) Jest
Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

11.选择E2E测试

(1) Cypress(Chrome only)
Cypress is a next generation front end testing tool built for the modern web. We address the key pain points developers and QA engineers face when testing modern applications.官网地址

(2) Nightwatch(Selenium-based)
Nightwatch.js is an integrated, easy to use End-to-End testing solution for browser based apps and websites, written on Node.js. It uses the W3C WebDriver API to perform commands and assertions on DOM elements.官网地址

12.把babel,postcss,eslint这些配置文件放哪：

通常我们会选择独立放置，让package.json干净些

13.是否保留配置

Save this as a preset for future projects? (Y/n) // 是否记录一下以便下次继续使用这套配置

// 选保存之后，会让你写一个配置的名字：
Save preset as: name // 然后你下次进入配置可以直接使用你这次的配置了

14.等待完成

15.vue的配置文件在vue.confi.js中(没有就手动在package.json同级创建一个，vue会自动加载)

哎，好多东西都不会。

错误：无法加载文件ps1，因为在此系统中禁止执行脚本。
在执行vue create时，出现了禁止执行脚本的错误。

在管理员命令行下执行：set-executionpolicy remotesigned 即可

参考文档：
1.2018-05-19无法加载文件ps1，因为在此系统中禁止执行脚本

16.安装Vue/cli出现警告

17.打包后的缓存问题

每一打包之后，文件名相同，都会出现严重的缓存问题，所以需要一个动态变化的机制。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

const path=require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const TimeStamp = new Date().getTime();
module.exports={
    publicPath: process.env.NODE_ENV === 'production'?'/':"/",
    devServer: {
        historyApiFallback: true,
        port: 8888,
    },
    configureWebpack:{
        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.js】
            filename: `js/[name].${TimeStamp}.js`,
            chunkFilename: `js/[name].${TimeStamp}.js`
        },
        // 这里配置插件，好像还是有部分的css无法被修改名称,换成下面的chainWebpack进行配置
        plugins: [
            new MiniCssExtractPlugin({
                // 修改打包后css文件名
                filename: `css/[name].${TimeStamp}.css`,
                chunkFilename: `css/[name].${TimeStamp}.css`
            })
        ]
    },
    // 修改打包后img文件名
    chainWebpack: config => {
        config.module
        .rule("images")
        .use("url-loader")
        .tap(options => {
            options.name = `img/[name].${TimeStamp}.[ext]`;
            options.fallback = {
            loader: "file-loader",
            options: {
                name: `img/[name].${TimeStamp}.[ext]`
            }
        };
        return options;
    });
    let miniCssExtractPlugin = new MiniCssExtractPlugin(
        {
            filename: `[name].${TimeStamp}.css`,
            chunkFilename: `[name].${TimeStamp}.css`
        }
    )
    config.plugin('extract-css').use(miniCssExtractPlugin)
  },

}