安装VUE.js

下载独立版本
直接在Vue.js官网下载最新的版本。接着在项目中，引入<script src = "../vue.js"> </script> 即可，开发项目尽量使用完整版，不要使用min版。
CDM

https://unpkg.com/vue/dist/vue.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js

安装node
从官网下载并安装。
安装npm
安装了node也就安装了npm，此步跳过。
安装cnpm
cmd中输入npm install -g cnpm --registry=http://registry.npm.taobao.org ，安装完成可以用cnpm代替npm来安装依赖包。
安装vue-cli 脚手架构建工具
cmd中输入cnpm install -g vue-cli。
初始化一个项目
新建一个文件夹d:\test，然后进入到test目录，输入vue init webpack myProject，运行初始化命令的时候会让用户输入几个基本的配置选项，如项目名称、项目描述、作者信息，对于有些不明白或者不想填的信息可以一直按回车去填写就好了。
安装依赖包
（1）进入项目：cd d:\test
（2）安装依赖：npm run dev
安装完成，项目目录下会有一个node_modules文件夹，里面是依赖包资源。
运行项目
浏览器地址栏输入：http://localhost:8080

安装VUE.js

操作日志

Microsoft Windows [版本 6.1.7601] 版权所有 © 2009 Microsoft
Corporation。保留所有权利。

C:\Users\Administrator>D:

D:>CD TEST

D:\test>vue init webpack zhanjianVueProject ‘vue’ 不是内部或外部命令，也不是可运行的程序
或批处理文件。

D:\test>npm install vue -g

[email protected] added 1 package from 1 contributor in 3.867s

D:\test>npm config set prefix
"D:\Node.js_Package\node-v12.13.1-win-x64\node_glo bal"

D:\test>npm config set cache
"D:\Node.js_Package\node-v12.13.1-win-x64\node_cache"

D:\test>npm install -g cnpm --registry=http://registry.npm.taobao.org
D:\Node.js_Package\node-v12.13.1-win-x64\node_global\cnpm ->
D:\Node.js_Package
node-v12.13.1-win-x64\node_global\node_modules\cnpm\bin\cnpm

[email protected] added 681 packages from 938 contributors in 90.294s

D:\test>cnpm install -g vue-cli
Downloading vue-cli to
D:\Node.js_Package\node-v12.13.1-win-x64\node_global\node
_modules\vue-cli_tmp Copying D:\Node.js_Package\node-v12.13.1-win-x64\node_global\node_modules\vue-cl
[email protected]@vue-cli to
D:\Node.js_Package\node-v12.13.1-win-x64\node_gl
obal\node_modules\vue-cli Installing vue-cli’s dependencies to
D:\Node.js_Package\node-v12.13.1-win-x64\no
de_global\node_modules\vue-cli/node_modules [1/20] [email protected]^2.9.0
installed at [email protected]@commander [2/20]
[email protected]^0.14.0 installed at
[email protected]@consoli date [3/20] [email protected]^3.0.0
installed at [email protected]@minimatch [4/20]
[email protected]^2.1.0 installed at [email protected]@chalk [5/20]
[email protected]^2.1.0 installed at
[email protected]@multimatch [6/20] [email protected]^2.5.0 existed
at [email protected]@rimraf [7/20] [email protected]^5.1.0 installed at
[email protected]@semver [8/20] [email protected]^1.0.0
installed at [email protected]@read- metadata [9/20]
[email protected] installed at [email protected]@uid [10/20]
[email protected]^4.0.5 installed at
[email protected]@handlebars

[11/20] [email protected]^1.2.0 installed at
[email protected]@tildify [12/20] [email protected]^1.3.0 installed at
[email protected]@ora [13/20] [email protected] existed at
[email protected]@coffe e-script [14/20]
[email protected]^2.0.0 installed at [email protected]@user-home
[15/20] [email protected]^2.1.0 installed at
[email protected]@metalsmith

[16/20] [email protected]^3.0.0 installed at
node_modules_validate-npm
[email protected]@validate-npm-package-name [17/20] [email protected]^1.0.1 installed at
[email protected]
[email protected] [18/20] [email protected]^2.4.0 installed at [email protected]@async [19/20] [email protected]^2.67.0 installed at
[email protected]@request [20/20] [email protected]^6.0.0 installed
at [email protected]@inquirer deprecate [email protected] ›
[email protected] › [email protected]^1.12.4 CoffeeScr ipt on NPM has
moved to “coffeescript” (no hyphen) Recently updated (since
2019-12-10): 1 packages (detail see file D:\Node.js_Pack
age\node-v12.13.1-win-x64\node_global\node_modules\vue-cli\node_modules.recentl y_updates.txt) 2019-12-15
→ [email protected] › [email protected] › [email protected] › fast-json-stable-stri [email protected]^2.0.0(2.1.0) (00:17:57) All packages
installed (239 packages installed from npm registry, used 9s(networ k
8s), speed 645.52kB/s, json 223(443.86kB), tarball 4.55MB)
[[email protected]] link
D:\Node.js_Package\node-v12.13.1-win-x64\node_global\[email protected] -

D:\Node.js_Package\node-v12.13.1-win-x64\node_global\node_modules\vue-cli\bin
vue [[email protected]] link
D:\Node.js_Package\node-v12.13.1-win-x64\node_global\vue-in [email protected] ->
D:\Node.js_Package\node-v12.13.1-win-x64\node_global\node_modules\vue-cli
\bin\vue-init [[email protected]] link
D:\Node.js_Package\node-v12.13.1-win-x64\node_global\vue-li [email protected] ->
D:\Node.js_Package\node-v12.13.1-win-x64\node_global\node_modules\vue-cli
\bin\vue-list

D:\test>vue init webpack zhangjianVueProject

? Project name zhangjianvueproject ? Project description A Vue.js
project ? Author ZhangJianBeiJing [email protected] ? Vue build
(Use arrow keys) ? Vue build standalone ? Install vue-router? Yes ?
Use ESLint to lint your code? Yes ? Pick an ESLint preset Standard ?
Set up unit tests Yes ? Pick a test runner jest ? Setup e2e tests with
Nightwatch? Yes ? Should we run npm install for you after the
project has been created? (recom ? Should we run npm install for you
after the project has been created? (recom

mended) npm

vue-cli · Generated “zhangjianVueProject”.

Installing project dependencies …

npm WARN deprecated [email protected]: Deprecated.
Please use ht tps://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated [email protected]: Browserslist 2 could fail on
reading Br owserslist >3.0 config used in other tools. npm WARN
deprecated [email protected]: [email protected]❤️ is no longer maintained and not
r ecommended for usage due to the number of issues. Please, upgrade
your dependenc ies to the actual version of [email protected] npm WARN
deprecated [email protected]: Switch to the bfj package for fixes and
n ew features! npm WARN deprecated [email protected]: Please use the native
JSON object instead of JS ON 3 npm WARN deprecated [email protected]:
Browserslist 2 could fail on reading Bro wserslist >3.0 config used in
other tools. npm WARN deprecated [email protected]: CircularJSON is
in maintenance only, fl atted is its successor. npm WARN deprecated
[email protected]: If using 2.x branch, please upgrade to at leas t 2.1.6
to avoid a serious bug with socket data flow and an import issue
introdu ced in 2.1.0 npm WARN deprecated [email protected]: use
String.prototype.padStart()

[email protected] install D:\test\zhangjianVueProject\node_modules\chromedri ver
node install.js

Current existing ChromeDriver binary is unavailable, proceding with
download and extraction. Downloading from file:
https://chromedriver.storage.googleapis.com/2.46/chromed
river_win32.zip Saving to file:
C:\Users\ADMINI~1\AppData\Local\Temp\2.46\chromedriver\chromedri
ver_win32.zip Received 781K… Received 1563K… Received 2345K…
Received 3127K… Received 3909K… Received 4523K total. Extracting
zip contents Copying to target path
D:\test\zhangjianVueProject\node_modules\chromedriver\lib
\chromedriver Done. ChromeDriver binary available at
D:\test\zhangjianVueProject\node_modules
chromedriver\lib\chromedriver\chromedriver.exe

[email protected] postinstall D:\test\zhangjianVueProject\node_modules\core-js
node -e “try{require(’./postinstall’)}catch(e){}”

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

The project needs your help! Please consider supporting of core-js on
Open Colle ctive 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 goo d job -)

[email protected] postinstall D:\test\zhangjianVueProject\node_mod
ules\webpack\node_modules\uglifyjs-webpack-plugin
node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit
this file.

npm WARN [email protected] requires a peer of [email protected]^5.0.0 but none is
installed. You must install peer dependencies yourself. npm WARN
optional SKIPPING OPTIONAL DEPENDENCY: [email protected]
(node_modules\fs events): npm WARN notsup SKIPPING OPTIONAL
DEPENDENCY: Unsupported platform for [email protected]
1.2.11: wanted {“os”:“darwin”,“arch”:“any”} (current: {“os”:“win32”,“arch”:“x64” })

added 1738 packages from 1098 contributors and audited 32392 packages
in 379.67s

found 92 vulnerabilities (69 low, 9 moderate, 13 high, 1 critical)
run npm audit fix to fix them, or npm audit for details

Running eslint --fix to comply with chosen preset rules…

========================

[email protected] lint D:\test\zhangjianVueProject
eslint --ext .js,.vue src test/unit test/e2e/specs “–fix”

Project initialization finished!

========================

To get started:

cd zhangjianVueProject
npm run dev

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

D:\test> cd zhangjianVueProject
D:\test\zhangjianVueProject>npm run dev

[email protected] dev D:\test\zhangjianVueProject
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

10% building modules 0/1 modules 1 active … webpack/hot/dev-server
./src/main 10% building modules 1/2 modules 1 active
…ode_modules\webpack\hot\dev-server 10% building modules 2/3
modules 1 active …client\index.js?http://localhost:8 10% building
modules 2/4 modules 2 active …\test\zhangjianVueProject\src\main
10% building modules 2/5 modules 3 active
…oject\node_modules\webpack\hot\log 10% building modules 2/6
modules 4 active …t\node_modules\webpack\hot\emitter 10% building
modules 2/7 modules 5 active …dules\webpack\hot\log-apply-result
10% building modules 3/7 modules 4 active
…dules\webpack\hot\log-apply-result 10% building modules 4/7
modules 3 active …dules\webpack\hot\log-apply-result 10% building
modules 5/7 modules 2 active …dules\webpack\hot\log-apply-result
10% building modules 6/7 modules 1 active
…dules\webpack\hot\log-apply-result 10% building modules 7/8
modules 1 active …\webpack\hot nonrecursive /^./lo 10% building
modules 7/9 modules 2 active …s\webpack-dev-server\client\socket
10% building modules 7/10 modules 3 active
…\webpack-dev-server\client\overla 10% building modules 8/10
modules 2 active …\webpack-dev-server\client\overla 10% building
modules 8/11 modules 3 active …ianVueProject\node_modules\url\ur
10% building modules 8/12 modules 4 active
…Project\node_modules\events\event 11% building modules 9/12
modules 3 active …Project\node_modules\events\event 11% building
modules 10/12 modules 2 active …Project\node_modules\events\even
11% building modules 10/13 modules 3 active
…ject\node_modules\vue\dist\vue.e 11% building modules 11/13
modules 2 active …ject\node_modules\vue\dist\vue.e 11% building
modules 12/13 modules 1 active …ject\node_modules\vue\dist\vue.e
11% building modules 13/14 modules 1 active
…ode_modules\webpack\buildin\glob 11% building modules 14/15
modules 1 active …angjianVueProject\src\router\ind 11% building
modules 14/16 modules 2 active …anVueProject\node_modules\url\ut
11% building modules 14/17 modules 3 active
…ject\node_modules\strip-ansi\ind 11% building modules 14/18
modules 4 active …node_modules\loglevel\lib\loglev 11% building
modules 14/19 modules 5 active …node_modules\querystring-es3\ind
11% building modules 14/20 modules 6 active
…ser\node_modules\punycode\punyco 11% building modules 15/20
modules 5 active …ser\node_modules\punycode\punyco 11% building
modules 15/21 modules 6 active …_modules\sockjs-client\dist\sock
11% building modules 16/21 modules 5 active
…_modules\sockjs-client\dist\sock 12% building modules 17/21
modules 4 active …_modules\sockjs-client\dist\sock 12% building
modules 18/21 modules 3 active …_modules\sockjs-client\dist\sock
12% building modules 18/22 modules 4 active
…\test\zhangjianVueProject\src\Ap 12% building modules 19/22
modules 3 active …\test\zhangjianVueProject\src\Ap 12% building
modules 20/22 modules 2 active …\test\zhangjianVueProject\src\Ap
12% building modules 20/23 modules 3 active
…ode_modules\webpack\buildin\modu 12% building modules 21/23
modules 2 active …\test\zhangjianVueProject\src\Ap 12% building
modules 22/23 modules 1 active …\test\zhangjianVueProject\src\Ap
12% building modules 22/24 modules 2 active
…oject\node_modules\ansi-html\ind 12% building modules 23/24
modules 1 active …oject\node_modules\ansi-html\ind 12% building
modules 23/25 modules 2 active …t\node_modules\html-entities\ind
12% building modules 23/26 modules 3 active
…ode_modules\querystring-es3\deco 12% building modules 23/27
modules 4 active …ode_modules\querystring-es3\enco 12% building
modules 23/28 modules 5 active …Project\src\components\HelloWorl
12% building modules 24/28 modules 4 active
…Project\src\components\HelloWorl 13% building modules 25/28
modules 3 active …Project\src\components\HelloWorl 13% building
modules 25/29 modules 4 active …\test\zhangjianVueProject\src\Ap
13% building modules 26/29 modules 3 active
…Project\src\components\HelloWorl 13% building modules 26/30
modules 4 active …ue-loader\lib\component-normaliz 13% building
modules 27/30 modules 3 active …ue-loader\lib\component-normaliz
13% building modules 28/30 modules 2 active
…ue-loader\lib\component-normaliz 13% building modules 28/31
modules 3 active …\test\zhangjianVueProject\src\Ap p.vue{ parser:
“babylon” } is deprecated; we now treat it as { parser: “babel” } .
13% building modules 29/31 modules 2 active
…ue-loader\lib\component-normaliz 13% building modules 30/31
modules 1 active …ue-loader\lib\component-normaliz 13% building
modules 30/32 modules 2 active …Project\src\components\HelloWorl
13% building modules 30/33 modules 3 active
…Project\src\components\HelloWorl 13% building modules 31/33
modules 2 active …Project\src\components\HelloWorl 13% building
modules 32/33 modules 1 active …ue-loader\lib\component-normaliz
13% building modules 32/34 modules 2 active
…les\html-entities\lib\xml-entiti 13% building modules 32/35
modules 3 active …s\html-entities\lib\html4-entiti 13% building
modules 32/36 modules 4 active …s\html-entities\lib\html5-entiti
13% building modules 33/36 modules 3 active
…s\html-entities\lib\html5-entiti 13% building modules 33/37
modules 4 active …les\vue-router\dist\vue-router.e 13% building
modules 33/38 modules 5 active …ject\node_modules\ansi-regex\ind
14% building modules 34/38 modules 4 active
…ject\node_modules\ansi-regex\ind 14% building modules 35/38
modules 3 active …ject\node_modules\ansi-regex\ind 14% building
modules 36/38 modules 2 active …ject\node_modules\ansi-regex\ind
14% building modules 37/38 modules 1 active
…ject\node_modules\ansi-regex\ind 14% building modules 37/39
modules 2 active …\test\zhangjianVueProject\src\Ap 14% building
modules 38/39 modules 1 active …ject\node_modules\ansi-regex\ind
14% building modules 38/40 modules 2 active
…Project\src\components\HelloWorl 14% building modules 39/40
modules 1 active …ject\node_modules\ansi-regex\ind 14% building
modules 39/41 modules 2 active …\test\zhangjianVueProject\src\Ap
14% building modules 39/42 modules 3 active
…Project\src\components\HelloWorl 14% building modules 39/43
modules 4 active …ules\vue-hot-reload-api\dist\ind 14% building
modules 40/43 modules 3 active …ules\vue-hot-reload-api\dist\ind
14% building modules 40/44 modules 4 active
…e-style-loader\lib\addStylesClie 14% building modules 41/44
modules 3 active …e-style-loader\lib\addStylesClie 15% building
modules 42/44 modules 2 active …Project\src\components\HelloWorl
15% building modules 42/45 modules 3 active
…angjianVueProject\src\assets\log 15% building modules 42/46
modules 4 active …\vue-style-loader\lib\listToStyl 15% building
modules 43/46 modules 3 active …\vue-style-loader\lib\listToStyl
15% building modules 44/46 modules 2 active
…\vue-style-loader\lib\listToStyl 15% building modules 45/46
modules 1 active …\vue-style-loader\lib\listToStyl 15% building
modules 46/47 modules 1 active …de_modules\css-loader\lib\css-ba
95% emitting

DONE Compiled successfully in 4040ms
18:55:34

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

操作日志

Installing project dependencies …

========================

Project initialization finished!

========================

相关推荐