# Vue/cli 2.x

前言

补充一些官方文档中没有的，但是实际开发中最好需要了解的内容

# 1.启动方式

1.快速原型开发：可以快速识别.vue 文件封装组件插件等功能

npm install @vue/cli -g
npm install -g @vue/cli-service-global
vue serve App.vue

1
2
3

2.ui 方式启动
```
vue ui
```
1
3.命令方式启动
```
vue-cli-service serve
```
1

# 2.vue add

vue-cli3.x 还提供了其专属的vue add命令，但是需要注意的是该命令安装的包是以@vue/cli-plugin 或者 vue-cli-plugin 开头，即只能安装 Vue 集成的包

失败用法

vue add jquery # 其会解析为完整的包名`@vue-cli-plugin-jquery`,很显然这个插件不存在便会安装失败

成功用法

vue add @vue/eslint # 其会解析为完整的包名`@vue/cli-plugin-eslint`,因为该包存在所以会安装成功

注意

不同于 npm 或 yarn 安装，vue add不仅会将包安装到你的项目中，其还会改变项目的代码或文件结构，所以安装前最好提交你的代码至仓库

vue add 中两个特列：

vue add router # 安装vue-router
vue add vuex # 安装vuex

1
2

这两个命令会直接安装 vue-router 和 vuex 并改变你的代码结构，使你的项目集成这两个配置，并不会去安装添加 vue-cli-plugin 或@vue/cli-plugin 前缀的包。

# 3.publicPath

打包后的静态文件部署在服务器的一个/test 文件夹下

├─dist #打包后的文件目录
├─css
├─img
└─js
index.html

1
2
3
4
5

publicPath: ''：http://xxx.com/css/app.0b79487b.css

<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=/css/app.0b79487b.css rel=preload as=style>
  <link href=/js/app.ba2d9b8a.js rel=preload as=script>
  <link href=/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=/js/chunk-vendors.e7ac9ff2.js></script>
<script src=/js/app.ba2d9b8a.js></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

publicPath: "/"：http://xxx.com/css/app.0b79487b.css

<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=/css/app.0b79487b.css rel=preload as=style>
  <link href=/js/app.ba2d9b8a.js rel=preload as=script>
  <link href=/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=/js/chunk-vendors.e7ac9ff2.js></script>
<script src=/js/app.ba2d9b8a.js></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

publicPath: "./"：http://xxx.com/test/css/app.0b79487b.css

<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=css/app.0b79487b.css rel=preload as=style>
  <link href=js/app.8569d42d.js rel=preload as=script>
  <link href=js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=js/chunk-vendors.e7ac9ff2.js></script>
<script src=js/app.8569d42d.js></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

publicPath: "static"：http://xxx.com/test/static/css/app.0b79487b.css

<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=static/css/app.0b79487b.css rel=preload as=style>
  <link href=static/js/app.d0717808.js rel=preload as=script>
  <link href=static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=static/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=static/js/chunk-vendors.e7ac9ff2.js></script>
<script src=static/js/app.d0717808.js></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

publicPath: "./static":http://xxx.com/test/static/css/app.0b79487b.css

<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=static/css/app.0b79487b.css rel=preload as=style>
  <link href=static/js/app.d0717808.js rel=preload as=script>
  <link href=static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=static/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=static/js/chunk-vendors.e7ac9ff2.js></script>
<script src=static/js/app.d0717808.js></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

publicPath: "../static":http://xxx.com/static/css/app.0b79487b.css

<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=../static/css/app.0b79487b.css rel=preload as=style>
  <link href=../static/js/app.695b7ccc.js rel=preload as=script>
  <link href=../static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=../static/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=../static/js/chunk-vendors.e7ac9ff2.js></script>
<script src=../static/js/app.695b7ccc.js></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

publicPath: "../":http://xxx.com/css/app.0b79487b.css

<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=../css/app.0b79487b.css rel=preload as=style>
  <link href=../js/app.67ace555.js rel=preload as=script>
  <link href=../js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=../css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=../js/chunk-vendors.e7ac9ff2.js></script>
<script src=../js/app.67ace555.js></script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

← Vue2.x 全家桶 Vue2.x 的 api →