Vue-cli更新到3.0之后，脚手架发生了较大的变化，本文主要介绍一下相关使用

对于本文中提到的具体配置可以查询官方配置参考

安装

新版的脚手架包名改为了@vue/cli


npm install -g @vue/cli

或者可以使用npx


npx @vue/cli create hello-world

直接创建项目

快速原型开发

通过安装@vue/cli-service-global可以对单个 *.vue文件进行快速原型开发


npm install -g @vue/cli-service-global

安装完成之后就可以直接在目标.js或 .vue文件的目录下直接运行vue serve启动一个服务器,入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。你也可以显式地指定入口文件,例如:


vue serve Test.vue

快速原型开发也是支持热更新及ES6的

另外可以通过


vue build Test.vue

将.vue文件进行打包，同样的也会在目录下创建一个/dist存放打包后的文件

正式创建项目

@vue/cli创建项目的指令为：


vue create dirName

创建后需要进行选择模板，default(默认配置)和Manually select features(手动配置)

default的话只有babel和eslint

所以一般建议使用Manually select features,支持class风格写法的TypeScript(使用了vue-property-decorator)

同时也支持单元测试及css预处理以及eslint等

做好模板选择之后等待安装完成即可

插件和Preset

插件

Vue Cli使用了一套基于插件的架构，其依赖都是以 @vue/cli-plugin- 开头的，例如：


"devDependencies": {

    "@vue/cli-plugin-babel": "^4.0.0",

    "@vue/cli-plugin-eslint": "^4.0.0",

    "@vue/cli-plugin-router": "^4.0.0",

    "@vue/cli-plugin-typescript": "^4.0.0",

    "@vue/cli-plugin-vuex": "^4.0.0",

}

而插件可以修改webpack的内部配置，也可以向vue-cli-service注入命令,在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。

Vue Cli的有官方的插件开发指南

而我们通过vue create之后创建好的项目，还如果想要添加新的插件的话，可以使用vue add

例如我们之前创建的项目里面没有单元测试的插件，我们这时就可以直接调用:


vue add unit-mocha

这条指令就会被解析成去安装@vue/cli-plugin-unit-mocha

但是要注意的是，vue add只是为了安装和调用插件的，并不能用于普通的npm包

另外如果出于一些原因你的插件列在了该项目之外的其它package.json 文件里，

你可以在自己项目的package.json里设置 vuePlugins.resolveFrom 选项指向包含其它 package.json 的文件夹。

例如，如果你有一个 .config/package.json 文件：


{

  "vuePlugins": {

    "resolveFrom": ".config"

  }

}

Preset

一个Preset是一个包含创建新项目所需预定义选项和插件的JSON对象，让用户无需在命令提示中选择它们。

当我们使用vue create创建好一个项目之后，就会生成一个Preset，其路径在~/.vuerc下，windows对应的路径应该是C:\Users\.vuerc下

示例:


{

  "useConfigFiles": true,

  "cssPreprocessor": "sass",

  "plugins": {

    "@vue/cli-plugin-babel": {},

    "@vue/cli-plugin-eslint": {

      "config": "airbnb",

      "lintOn": ["save", "commit"]

    },

    "@vue/cli-plugin-router": {},

    "@vue/cli-plugin-vuex": {}

  }

}

Preset 的数据会被插件生成器用来生成相应的项目文件。除了上述这些字段，你也可以为集成工具添加配置:


{

  "useConfigFiles": true,

  "plugins": {...},

  "configs": {

    "vue": {...},

    "postcss": {...},

    "eslintConfig": {...},

    "jest": {...}

  }

}

这些额外的配置将会根据 useConfigFiles 的值被合并到 package.json 或相应的配置文件中。

例如，当 "useConfigFiles": true 的时候，configs的值将会被合并到 vue.config.js 中。

另外还可以在Preset中指定插件的版本：


{

  "plugins": {

    "@vue/cli-plugin-eslint": {

      "version": "^3.0.0"

      // ... 该插件的其它选项

    }

  }

}

CLI服务

介绍完插件和Preset之后，我们来看我们创建好的项目：

使用命令

我们在package.json中有这么一个依赖@vue/cli-service,使得我们可以使用一个vue-cli-service的命令来进行启动项目等指令。

默认的package.json为:


{

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build"

  }

}

vue-cli-service serve


用法：vue-cli-service serve [options] [entry]

选项：

  --open    在服务器启动时打开浏览器

  --copy    在服务器启动时将 URL 复制到剪切版

  --mode    指定环境模式 (默认值：development)

  --host    指定 host (默认值：0.0.0.0)

  --port    指定 port (默认值：8080)

  --https   使用 https (默认值：false)

vue-cli-service serve命令会启动一个开发服务器 (基于webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

除了通过命令行参数，你也可以使用vue.config.js里的devServer字段配置开发服务器。

命令行参数[entry]将被指定为唯一入口，而非额外的追加入口。尝试使用[entry]覆盖config.pages中的entry将可能引发错误。

vue-cli-service build


用法：vue-cli-service build [options] [entry|pattern]

选项：

  --mode        指定环境模式 (默认值：production)

  --dest        指定输出目录 (默认值：dist)

  --modern      面向现代浏览器带自动回退地构建应用

  --target      app | lib | wc | wc-async (默认值：app)

  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)

  --no-clean    在构建项目之前不清除目标目录

  --report      生成 report.html 以帮助分析包内容

  --report-json 生成 report.json 以帮助分析包内容

  --watch       监听文件变化

vue-cli-service build 会在dist/目录产生一个可用于生产环境的包，带有JS/CSS/HTML的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的chunk manifest会内联在HTML里。

这里还有一些有用的命令参数：

--modern使用现代模式构建应用，为现代浏览器交付原生支持的ES2015代码，并生成一个兼容老浏览器的包用来自动回退。

--target允许你将项目中的任何组件以一个库或Web Components组件的方式进行构建。更多细节请查阅构建目标。

--report和--report-json会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。

vue-cli-service inspect


用法：vue-cli-service inspect [options] [...paths]

选项：

  --mode    指定环境模式 (默认值：development)

可以使用vue-cli-service inspect来审查一个 Vue CLI项目的webpack config

开发

HTML和静态资源

public下的index.html文件应用了html-webpack-plugin从而作为模板，构建过程中会自动注入很多资源链接。

且会注入很多资源暗示（resource hint）比如preload prefetch等，还有用到的CSS和JS资源

html模板插值

并且html可以用作模板进行插值：


`<%= VALUE %>` 用来做不转义插值；

`<%- VALUE %>` 用来做 HTML 转义插值；

`<% expression %>` 用来描述 JavaScript 流程控制。

使用CLI构建多页面应用

CLI3.0+ 使得我们可以非常方便的进行构建多页面应用，只需要在vue.config.js中配置Pages就行，例如:


module.exports = {

    pages: {

        index: {
            // page 的入口

            entry: 'src/main.ts',

            // 模板来源

            template: 'public/index.html',

            // 在 dist/index.html 的输出

            filename: 'index.html',

            // 当使用 title 选项时，

            // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>

            title: 'Index Page',

        },

        // 当使用只有入口的字符串格式时，

        // 模板会被推导为 `public/subpage.html`

        // 并且如果找不到的话，就回退到 `public/index.html`。

        // 输出文件名会被推导为 `subpage.html`。

        subpage: 'src/subpage/main.ts'

    }

}

整体的项目结构为:


--src

    --subpage

        --main.ts

    main.ts

即可完成多页面配置，就可以访问http://localhost:8080/subpage.html/#/了

处理静态资源

静态资源的处理方式分为2种：

放置在public目录下/通过绝对路径引用，这种情况资源直接拷贝，不进行webpack处理
在JS/TS中被导入/在template或者CSS中被相对路径引用的，这类资源会被webpack处理

从相对路径导入

对于所有的相对路径引入，其资源 URL 都会被解析为一个模块依赖

例如，url(./image.png) 会被翻译为 require('./image.png'),会被编译为：


h('img', { attrs: { src: require('./image.png') }})

然后会通过file-loader来计算出最终的文件路径，如果资源小于4kb，还会使用url-loader将其内联进来，避免多发http请求。

public文件夹

任何放置在public文件夹的静态资源都会被简单的复制，而不经过webpack。需要通过绝对路径来引用它们。

但是一般情况不建议把资源放到public文件夹下，因为经过webpack处理的资源会存在如下几个方面的优点：

经过打包的JS和css会在一起，而不是分开的，可以节约http请求
如果出现错误，打包的时候就能发现，而不是放到服务上时才发现资源缺失或者报错
打包出的文件包含哈希值，可以排除缓存问题

关于public文件夹，如果前端应用没有部署在域名的根部的话，就得进行配置publicPath配置

webpack配置

修改webpack配置

Vue CLI3.0中配置webpack的方式都是通过vue.config.js。简单来说分为2种方式：

通过vue.config.js中的configureWebpack属性
通过webpack-chain进行链式操作

`vue.config.js`中的`configureWebpack`

这个configureWebpack可以是一个对象也可以是一个返回对象的函数，这边有官方的2个例子：


// vue.config.js

module.exports = {

  configureWebpack: {

    plugins: [

      new MyAwesomeWebpackPlugin()

    ]

  }

}


// vue.config.js

module.exports = {

  configureWebpack: config => {

    if (process.env.NODE_ENV === 'production') {

      // 为生产环境修改配置...

    } else {

      // 为开发环境修改配置...

    }

  }

}

可以看到，通过这个选项可以进行配置的修改，具体详细的配置项可以参见官方配置参考

通过`webpack-chain`进行链式操作

比如说想进行修改loader选项:


// vue.config.js

module.exports = {

  chainWebpack: config => {

    config.module

      .rule('vue')

      .use('vue-loader')

        .loader('vue-loader')

        .tap(options => {

          // 修改它的选项...

          return options

        })

  }

}

具体的例子可以参见webpack-chain的文档

审查项目的 webpack 配置

因为Vue CLI对webpack配置做了抽象，所以想进行调整的时候通常会需要看到目前的webpack配置.

在前文中提到过，通过vue-cli-service inspect指令可以进行查看配置

所以也可以直接将stdout重定向到文件中方便进行查看


vue-cli-service inspect > webpackConfig.txt

环境变量和模式

环境变量

可以在项目根目录创建如下文件进行环境变量的配置：


.env                # 在所有的环境中被载入

.env.local          # 在所有的环境中被载入，但会被 git 忽略

.env.[mode]         # 只在指定的模式中被载入

.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

比如创建一个.env文件，内部为：


VUE_APP_FOO=Bar

注意，键的开头必须为VUE_APP才可以在组件内部使用

被载入的变量将会对 vue-cli-service 的所有命令、插件和依赖可用，也可以在组件内部进行使用：


    import {Component, Vue} from "vue-property-decorator"



    @Component

    export default class SubPageApp extends Vue {

        envVal: string = process.env.VUE_APP_FOO

        mounted() {

            console.log(process.env.VUE_APP_FOO);

        }

    }

模式

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 Vue CLI `项目有三个模式：

development 模式用于vue-cli-service serve
production 模式用于vue-cli-service build 和 vue-cli-service test:e2e
test模式用于vue-cli-service test:unit

另外除了VUE_APP_*变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
BASE_URL - 会和 vue.config.js 中的 publicPath选项相符，即你的应用会部署到的基础路径。

所有解析出来的环境变量都可以在public/index.html 中以HTML插值中介绍的方式使用。

Vue-cli3.0使用介绍

安装