传统方式

直接下载 vue.min.js，然后通过 script 标签引入。

使用 CDN 方法

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

NPM 方法

构建大型的前端应用时使用。

  [plaintext]
1
$   npm install vue

这个实际上会在本地下载一些文件。

我们稍后会被这些文件进行详细讲解。

cnpm 安装

发现 npm 在国内访问比较慢，这里推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

安装命令

  [plaintext]
1
$   npm install -g cnpm --registry=https://registry.npm.taobao.org

日志

  [plaintext]
1
2
3
4
5
6
λ npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
C:\Users\Administrator\AppData\Roaming\npm\cnpm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm

+ cnpm@6.1.1
added 684 packages from 964 contributors in 36.97s

使用

这样就可以使用 cnpm 命令来安装模块了：

  [plaintext]
1
$ cnpm install [name]

更多信息可以查阅：http://npm.taobao.org/。

命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

全局安装 vue-cli

  [plaintext]
1
$ cnpm install --global vue-cli

日志如下:

  [plaintext]
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
Downloading vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp
Copying C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli_tmp\_vue-cli@2.9.6@vue-cli to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli
Installing vue-cli's dependencies to C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\_commander@2.20.3@commander
[2/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
[3/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[4/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
[5/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consolidate
[6/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.7.1@rimraf
[7/20] semver@^5.1.0 installed at node_modules\_semver@5.7.1@semver
[8/20] chalk@^2.1.0 installed at node_modules\_chalk@2.4.2@chalk
[9/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[10/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[11/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read-metadata
[12/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffee-script
[13/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
[14/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name
[15/20] metalsmith@^2.1.0 installed at node_modules\_metalsmith@2.3.0@metalsmith
[16/20] handlebars@^4.0.5 installed at node_modules\_handlebars@4.7.6@handlebars
[17/20] request@^2.67.0 installed at node_modules\_request@2.88.2@request
[18/20] async@^2.4.0 installed at node_modules\_async@2.6.3@async
[19/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.1.0@download-git-repo
[20/20] inquirer@^6.0.0 installed at node_modules\_inquirer@6.5.2@inquirer
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › coffee-script@^1.12.4 CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
deprecate request@^2.67.0 request has been deprecated, see https://github.com/request/request/issues/3142
All packages installed (235 packages installed from npm registry, used 6s(network 5s), speed 953.32kB/s, json 221(463.17kB), tarball 4.56MB)
[vue-cli@2.9.6] link C:\Users\Administrator\AppData\Roaming\npm\vue@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
[vue-cli@2.9.6] link C:\Users\Administrator\AppData\Roaming\npm\vue-init@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
[vue-cli@2.9.6] link C:\Users\Administrator\AppData\Roaming\npm\vue-list@ -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list

创建 webpack 应用

初始化

  [plaintext]
1
vue init webpack hello-vue

配置

然后根据自己的需要进行选择：

  [plaintext]
1
2
3
4
5
6
7
8
9
10
11
12
13
? Project name hello-vue
? Project description A Vue.js project
? Author houbb <1060732496@qq.com>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "hello-vue".

项目的创建日志如下：

  [plaintext]
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
# Installing project dependencies ...
# ========================

npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/
mini-css-extract-plugin
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in ot
her tools.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less depen
dencies.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the n
umber of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upg
rade to fsevents 2.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in oth
er tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated

> core-js@2.6.11 postinstall D:\github\vue-learn\vue-cli\hello-vue\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: 
> https://opencollective.com/core-js 
> https://www.patreon.com/zloirock 

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> ejs@2.7.4 postinstall D:\github\vue-learn\vue-cli\hello-vue\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)


> uglifyjs-webpack-plugin@0.4.6 postinstall D:\github\vue-learn\vue-cli\hello-vue\node_modules\webpack\node_modul
es\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"1
2.16.2","npm":"6.14.4"})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arc
h":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","ar
ch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\webpack-dev-server\node_modules\cho
kidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","ar
ch":"any"} (current: {"os":"win32","arch":"x64"})

added 1372 packages from 712 contributors and audited 1379 packages in 148.864s

30 packages are looking for funding
  run `npm fund` for details

found 15 vulnerabilities (3 low, 8 moderate, 4 high)
  run `npm audit fix` to fix them, or `npm audit` for details


Running eslint --fix to comply with chosen preset rules...
# ========================


> hello-vue@1.0.0 lint D:\github\vue-learn\vue-cli\hello-vue
> eslint --ext .js,.vue src "--fix"


# Project initialization finished!
# ========================

项目快速启动

  [plaintext]
1
2
3
4
5
6
To get started:

  cd hello-vue
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

启动项目

  [plaintext]
1
2
$   cd hello-vue
$   npm run dev

启动日志

  [plaintext]
1
2
3
4
5
6
7
8
9
10
11
> hello-vue@1.0.0 dev D:\github\vue-learn\vue-cli\hello-vue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 25/29 modules 4 active ...e-learn\vue-cli\hello-vue\src\App.vue{ parser: "babylon" } is dep
recated; we now treat it as { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 7224ms                                                                   21:42:41


 I  Your application is running here: http://localhost:8080