vue-cli 3.0 使用手册

发表于 | 分类于

跟紧时代的脚步，使用 vue-cli v3.0

安装

如果你之前安装过 vue-cli ，那你首先要卸载旧版本，如果第一次使用，就直接安装：

1
2
npm uninstall -g vue-cli
npm install -g @vue/cli

安装完成后使用命令（注意大写的 V ）检查是否安装成功：

1
vue -V

命令

1
2
3
4
5
6
7
8
ui // 图形化操作界面
create [options] <app-name>      create a new project powered by vue-cli-service // 创建一个由vue-cli-service支持的新项目
add <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project // 在已创建的项目中添加插件
invoke <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project // 在开发者模式下以零配置运行一个js或vue文件
inspect [options] [paths...]     inspect the webpack config in a project with vue-cli-service // 在vue-cli-service的项目中检查webpack配置
serve [options] [entry]          serve a .js or .vue file in development mode with zero config // 简单理解为开发环境下启动命令
build [options] [entry]          build a .js or .vue file in production mode with zero config // 在生产模式下以零配置构建一个js或vue文件
init <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init) // 旧api 需要@vue/cli-init // 就是原来的vue-cli init <template> <app-name>

创建及配置项目

请使用 powertshell 或则 cmder 等软件，使用 git 自带的 git bash 似乎时不能愉快的选择那么多选项的。

另外，任何你觉的卡死命令行的情况你都可以按一次 Ctrl + c 要挟命令行：再不动弹就把他关了。

1
2
3
4
5
6
$ vue create <projectname>

Vue CLI v3.0.0-beta.6
? Please pick a preset: (Use arrow keys)
> default (babel, eslint) // 官方自带的默认版本，非常干净，包括 vue-router 都要自己配置
  Manually select features

这里我们选第二项，自己配置；

可以根据项目大小和功能体验配置不同的功能，空格键 选中/反选，按a键 全选/全不选，按i键反选已选择项， 上下键 上下移动选择。

1
2
3
4
5
6
7
8
9
10
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors // 是否使用 css 预编译语言
 ( ) Linter / Formatter 
 ( ) Unit Testing
 ( ) E2E Testing

在选择功能后，会询问更细节的配置，

TypeScript：

  • 是否使用class风格的组件语法：Use class-style component syntax?
  • 是否使用babel做转义：Use Babel alongside TypeScript for auto-detected polyfills?

CSS Pre-processors：

  • 选择CSS 预处理类型：Pick a CSS pre-processor

Linter / Formatter

  • 选择Linter / Formatter规范类型：Pick a linter / formatter config
  • 选择lint方式，保存时检查/提交时检查：Pick additional lint features

Testing

  • 选择Unit测试方式
  • 选择E2E测试方式

之后会问你，把 Babel, PostCSS, ESLint, etc. 的配置文件放哪里

  • In dedicated config files // 独立文件放置
  • In package.json // 放package.json里

最后会问你，是否储存本次配置，这里建议储存，万一这里用的舒服了，大爷下次来玩不也方便么，就算不好用，删除就好，不用付出代价的选项还不勇于尝试等啥了。

等待模块加载完成后命令行的工作就完成了，下面开始配置 vue 配置，在根目录新建 vue.config.js 文件；

完整配置说明可以查看这里

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
50
51
52
53
54
55
56
57
module.exports = {
 // 基本路径
 baseUrl: '/',

 // 输出文件目录
 outputDir: 'dist',

 // eslint-loader 是否在保存的时候检查
 lintOnSave: true,

 // 修改 webpack 配置
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 chainWebpack: () => {},

 // 添加或修改 webpack 插件
 configureWebpack: () => {},

 // vue-loader 配置项
 // https://vue-loader.vuejs.org/en/options.html
 vueLoader: {},

 // 生产环境是否生成 sourceMap 文件
 productionSourceMap: true,

 // css相关配置
 css: {
  // 是否使用css分离插件 ExtractTextPlugin
  extract: true,
  // 开启 CSS source maps?
  sourceMap: false,
  // css预设器配置项
  loaderOptions: {},
  // 启用 CSS modules for all css / pre-processor files.
  modules: false
 },


 // PWA 插件相关配置
 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 pwa: {},

 // webpack-dev-server 相关配置
 devServer: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  proxy: null, // 设置代理
  before: app => {}
 },
 
 // 第三方插件配置
 pluginOptions: {
  // ...
 }
}

设置代理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# string
module.exports = {
 devServer: {
  proxy: '<url>'
 }
}

# Object
module.exports = {
 devServer: {
  proxy: {
   '/api': {
    target: '<url>',
    ws: true,
    changeOrigin: true
   },
   '/foo': {
    target: '<other_url>'
   }
  }
 }
}

运行

为了和旧版本产生差异，这里使用了 create 命令创建新项目，运行项目也从 npm run dev 换成了 npm run serve，运行后你可以发现

1
2
3
4
5
6
7
...
App running at:
- Local:   http://localhost:8080/
- Network: http://192.168.1.180:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.

新加了 network 版本，连入同一局域网的电脑都可以通过此链接访问你的页面，但注意 ip 就是内网 ip，并不能外网打开。

图形界面

vue 3.0 最大的改变莫过于此，直接在命令行输入 vue ui 即可运行一个图形界面:

在这里你可以：

  • 管理插件

  • 管理依赖

  • 配置项目（暂时显示的项比较少）

  • 任务（运行项目，花式打包，测试，显示完整webpack配置）