搭建 vue 环境

第一步：安装node

http://nodejs.cn/

在控制台CMD命令输入 node -v，如果提示v开头的版本号，则证明node安装成功

第二步：安装Git

Git官网： https://git-scm.com/download/win 选择64位安装包

https://github.com/git-for-windows/git/releases/download/v2.19.0.windows.1/Git-2.19.0-64-bit.exe

第三步：vue-cli脚手架安装

在控制台CMD命令输入 npm install -g cnpm --registry=https://registry.npm.taobao.org

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
C:\Users\zhang\AppData\Roaming\npm\cnpm -> C:\Users\zhang\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.0.0
added 633 packages from 843 contributors in 25.411s

$ cnpm install cnpm@6.0.0
√ Installed 1 packages
√ Linked 226 latest versions
√ Run 0 scripts
deprecate cnpm@6.0.0 › npm-request@1.0.0 › urllib@2.30.0 › proxy-agent@2.3.1 › socks-proxy-agent@3.0.1 › socks@^1.1.10 If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
Recently updated (since 2018-09-27): 3 packages (detail see file C:\Users\zhang\Desktop\node\node_modules\.recently_updates.txt)
√ All packages installed (247 packages installed from npm registry, used 13s(network 13s), speed 854.28kB/s, json 227(2.29MB), tarball 8.36MB)

$ cnpm -v
cnpm@6.0.0 (C:\Users\zhang\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.4.1 (C:\Users\lixiaodong\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@10.8.0 (C:\Program Files\nodejs\node.exe)
npminstall@3.12.0 (C:\Users\zhang\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\zhang\AppData\Roaming\npm
win32 x64 10.0.17134
registry=https://registry.npm.taobao.org

$ npm install vue-cli -g
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\zhang\AppData\Roaming\npm\vue-list -> C:\Users\zhang\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\zhang\AppData\Roaming\npm\vue-init -> C:\Users\zhang\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
C:\Users\zhang\AppData\Roaming\npm\vue -> C:\Users\zhang\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
+ vue-cli@2.9.6
added 237 packages from 205 contributors in 76.411s

第四步：初始化项目

新建一个存放项目的文件夹dev，打开该文件夹，然后鼠标右键点击，选择Git Bash Here，打开了控制台窗口

然后执行命令：vue init webpack vue-demo，可以一路回车键

$ vue init webpack vue-demo? Target directory exists. Continue? (Y/n) y
? Target directory exists. Continue? Yes
? Project name (vue-demo)
? Project name vue-demo
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (zhangsj <1036259645@qq.com>)
? Author zhangsj <1036259645@qq.com>
? Vue build standalone
? Install vue-router? (Y/n)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) y
? Use ESLint to lint your code? Yes
? Pick an ESLint preset (Use arrow keys)
? Pick an ESLint preset Standard
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n) n
? Setup e2e tests with Nightwatch? No
? 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) npmvue-cli · Generated "vue-demo".# Installing project dependencies ...
# ========================npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})removed 301 packages and audited 11098 packages in 13.265s
found 1 moderate severity vulnerabilityrun `npm audit fix` to fix them, or `npm audit` for detailsRunning eslint --fix to comply with chosen preset rules...
# ========================> vue-demo@1.0.0 lint C:\Users\lixiaodong\Desktop\dev\vue-demo
> eslint --ext .js,.vue src "--fix"# Project initialization finished!
# ========================To get started:cd vue-demonpm run devDocumentation can be found at https://vuejs-templates.github.io/webpack

这样一个脚手架框架就搭建好了。

第五步：运行

$ npm run dev> vue-demo@1.0.0 dev C:\Users\lixiaodong\Desktop\dev\vue-demo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js10% 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 ...dong\Desktop\dev\vue-demo\src\main 10% building modules 2/5 modules 3 active ...-demo\node_modules\webpack\hot\log 10% building modules 2/6 modules 4 active ...o\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 ...\dev\vue-demo\node_modules\url\ur 10% building modules 8/12 modules 4 active ...demo\node_modules\vue\dist\vue.es 11% building modules 9/12 modules 3 active ...demo\node_modules\vue\dist\vue.es 11% building modules 10/12 modules 2 active ...demo\node_modules\vue\dist\vue.e 11% building modules 10/13 modules 3 active ...ue-demo\node_modules\events\even 11% building modules 11/13 modules 2 active ...ue-demo\node_modules\events\even 11% building modules 11/14 modules 3 active ...ktop\dev\vue-demo\src\router\ind 11% building modules 12/14 modules 2 active ...ktop\dev\vue-demo\src\router\ind 11% building modules 12/15 modules 3 active ...demo\node_modules\strip-ansi\ind 11% building modules 13/15 modules 2 active ...demo\node_modules\strip-ansi\ind 11% building modules 13/16 modules 3 active ...dev\vue-demo\node_modules\url\ut 11% building modules 13/17 modules 4 active ...node_modules\loglevel\lib\loglev 11% building modules 13/18 modules 5 active ...dong\Desktop\dev\vue-demo\src\Ap 11% building modules 13/19 modules 6 active ..._modules\sockjs-client\dist\sock 11% building modules 13/20 modules 7 active ...emo\node_modules\punycode\punyco 11% building modules 13/21 modules 8 active ...node_modules\querystring-es3\ind 11% building modules 14/21 modules 7 active ...node_modules\querystring-es3\ind 11% building modules 15/21 modules 6 active ...node_modules\querystring-es3\ind 11% building modules 16/21 modules 5 active ...node_modules\querystring-es3\ind 12% building modules 17/21 modules 4 active ...node_modules\querystring-es3\ind 12% building modules 18/21 modules 3 active ...emo\node_modules\punycode\punyco 12% building modules 18/22 modules 4 active ...-demo\node_modules\ansi-html\ind 12% building modules 19/22 modules 3 active ...-demo\node_modules\ansi-html\ind 12% building modules 19/23 modules 4 active ...ue-demo\src\components\HelloWorl 12% building modules 19/24 modules 5 active ...o\node_modules\html-entities\ind 12% building modules 20/24 modules 4 active ...o\node_modules\html-entities\ind 12% building modules 20/25 modules 5 active ...ode_modules\webpack\buildin\modu 12% building modules 20/26 modules 6 active ...ode_modules\webpack\buildin\glob 12% building modules 20/27 modules 7 active ...ode_modules\querystring-es3\enco 12% building modules 20/28 modules 8 active ...ode_modules\querystring-es3\deco 12% building modules 20/29 modules 9 active ...dong\Desktop\dev\vue-demo\src\Ap 12% building modules 21/29 modules 8 active ...ode_modules\querystring-es3\deco 12% building modules 21/30 modules 9 active ...ue-loader\lib\component-normaliz 12% building modules 21/31 modules 10 active ...dong\Desktop\dev\vue-demo\src\A 12% building modules 22/31 modules 9 active ...ue-loader\lib\component-normaliz 12% building modules 23/31 modules 8 active ...ue-loader\lib\component-normaliz 12% building modules 24/31 modules 7 active ...ue-loader\lib\component-normaliz 12% building modules 24/32 modules 8 active ...ue-demo\src\components\HelloWorl 12% building modules 24/33 modules 9 active ...ue-demo\src\components\HelloWorl 13% building modules 25/33 modules 8 active ...ue-demo\src\components\HelloWorl 13% building modules 26/33 modules 7 active ...ue-loader\lib\component-normaliz 13% building modules 27/33 modules 6 active ...ue-loader\lib\component-normaliz 13% building modules 28/33 modules 5 active ...ue-loader\lib\component-normaliz 13% building modules 29/33 modules 4 active ...ue-loader\lib\component-normaliz 13% building modules 30/33 modules 3 active ...ue-loader\lib\component-normaliz 13% building modules 31/33 modules 2 active ..._modules\sockjs-client\dist\sock 13% building modules 31/34 modules 3 active ...les\vue-router\dist\vue-router.e 13% building modules 31/35 modules 4 active ...les\html-entities\lib\xml-entiti 13% building modules 31/36 modules 5 active ...s\html-entities\lib\html4-entiti 13% building modules 31/37 modules 6 active ...s\html-entities\lib\html5-entiti 13% building modules 32/37 modules 5 active ...s\html-entities\lib\html5-entiti 13% building modules 33/37 modules 4 active ...s\html-entities\lib\html5-entiti 13% building modules 33/38 modules 5 active ...demo\node_modules\ansi-regex\ind 13% building modules 33/39 modules 6 active ...dong\Desktop\dev\vue-demo\src\Ap 14% building modules 34/39 modules 5 active ...demo\node_modules\ansi-regex\ind 14% building modules 34/40 modules 6 active ...ue-demo\src\components\HelloWorl 14% building modules 35/40 modules 5 active ...demo\node_modules\ansi-regex\ind 14% building modules 35/41 modules 6 active ...dong\Desktop\dev\vue-demo\src\Ap 14% building modules 35/42 modules 7 active ...ue-demo\src\components\HelloWorl 14% building modules 35/43 modules 8 active ...ules\vue-hot-reload-api\dist\ind 14% building modules 36/43 modules 7 active ...ules\vue-hot-reload-api\dist\ind 14% building modules 37/43 modules 6 active ...ules\vue-hot-reload-api\dist\ind 14% building modules 37/44 modules 7 active ...e-style-loader\lib\addStylesClie 14% building modules 38/44 modules 6 active ...e-style-loader\lib\addStylesClie 14% building modules 39/44 modules 5 active ...e-style-loader\lib\addStylesClie 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 ...ue-demo\src\components\HelloWorl 15% building modules 42/45 modules 3 active ...ktop\dev\vue-demo\src\assets\log 15% building modules 43/45 modules 2 active ...ue-demo\src\components\HelloWorl 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 3755ms19:30:52I  Your application is running here: http://localhost:8081

恭喜，VUE已经成功安装，并运行起来了一个基础项目，算是走到VUE的门口了。