如何安装vue并创建vue.js框架项目
1、安装vue工具
C:\Users\Administrator.USER-0GUONPPBHK>$ cnpm install vue
'$' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
C:\Users\Administrator.USER-0GUONPPBHK>cnpm install vue
√ Installed 1 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (1 packages installed from npm registry, used 934ms, s
peed 1010.57kB/s, json 1(278.91kB), tarball 664.97kB)2、安装vue-cli
C:\Users\Administrator.USER-0GUONPPBHK>cnpm install --global vue-cli
Downloading vue-cli to C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\np
m\node_modules\vue-cli_tmp
Copying C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\node_modules\
vue-cli_tmp\[email protected]@vue-cli to C:\Users\Administrator.USER-0GUONPPBHK\App
Data\Roaming\npm\node_modules\vue-cli
Installing vue-cli's dependencies to C:\Users\Administrator.USER-0GUONPPBHK\AppD
ata\Roaming\npm\node_modules\vue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\[email protected]@commander
[2/20] minimatch@^3.0.0 installed at node_modules\[email protected]@minimatch
[3/20] multimatch@^2.1.0 installed at node_modules\[email protected]@multimatch
[4/20] ora@^1.3.0 installed at node_modules\[email protected]@ora
[5/20] rimraf@^2.5.0 existed at node_modules\[email protected]@rimraf
[6/20] chalk@^2.1.0 installed at node_modules\[email protected]@chalk
[7/20] semver@^5.1.0 installed at node_modules\[email protected]@semver
[8/20] consolidate@^0.14.0 installed at node_modules\[email protected]@consoli
date
[9/20] [email protected] installed at node_modules\[email protected]@uid
[10/20] user-home@^2.0.0 installed at node_modules\[email protected]@user-home
[11/20] tildify@^1.2.0 installed at node_modules\[email protected]@tildify
[12/20] read-metadata@^1.0.0 installed at node_modules\[email protected]@read
-metadata
[13/20] [email protected] existed at node_modules\[email protected]@coffe
e-script
[14/20] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm
[email protected]@validate-npm-package-name
[15/20] metalsmith@^2.1.0 installed at node_modules\[email protected]@metalsmith
[16/20] request@^2.67.0 installed at node_modules\[email protected]@request
[17/20] async@^2.4.0 installed at node_modules\[email protected]@async
[18/20] inquirer@^3.3.0 installed at node_modules\[email protected]@inquirer
[19/20] download-git-repo@^1.0.1 installed at node_modules\_download-git-repo@1.
0.2@download-git-repo
[20/20] handlebars@^4.0.5 installed at node_modules\[email protected]@handlebar
s
deprecate [email protected] › [email protected] › coffee-script@^1.12.4 CoffeeS
cript on NPM has moved to "coffeescript" (no hyphen)
Recently updated (since 2018-03-17): 6 packages (detail see file C:\Users\Admini
strator.USER-0GUONPPBHK\AppData\Roaming\npm\node_modules\vue-cli\node_modules\.r
ecently_updates.txt)
Today:
→ [email protected] › [email protected] › [email protected] › decompre
[email protected] › [email protected] › [email protected] › ieee754@^1.1.4(1.1.11
) (15:26:34)
2018-03-23
→ [email protected] › [email protected] › [email protected] › strip-ou
ter@^1.0.0(1.0.1) (13:41:37)
→ [email protected] › [email protected] › [email protected] › lowercase-keys@
^1.0.0(1.0.1) (15:52:08)
2018-03-22
→ [email protected] › clone@^1.0.2(1.0.4) (05:21:25)
→ [email protected] › [email protected] › [email protected] › decompre
[email protected] › [email protected] › bl@^1.0.0(1.2.2) (05:59:58)
2018-03-20
→ commander@^2.9.0(2.15.1) (09:47:22)
All packages installed (252 packages installed from npm registry, used 4s, speed
1.8MB/s, json 235(2.46MB), tarball 4.45MB)
[[email protected]] link C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\
vue@ -> C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\node_modules\
vue-cli\bin\vue
[[email protected]] link C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\
vue-init@ -> C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\node_mod
ules\vue-cli\bin\vue-init
[[email protected]] link C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\
vue-list@ -> C:\Users\Administrator.USER-0GUONPPBHK\AppData\Roaming\npm\node_mod
ules\vue-cli\bin\vue-list
3、初始化vue并创建项目
C:\Users\Administrator.USER-0GUONPPBHK>vue init webpack vuecmp
? Project name vuecmp
? Project description A Vue.js project
? Author [youhai]
? 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? (reco
mmended) npm
vue-cli · Generated "vuecmp".
# Installing project dependencies ...
# ========================
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
> [email protected] install C:\Users\Administrator.USER-0GUONPPBHK\vuecmp\node
_modules\chromedriver
> node install.js
Downloading https://chromedriver.storage.googleapis.com/2.37/chromedriver_win32.
zip
Saving to C:\Users\ADMINI~1.USE\AppData\Local\Temp\chromedriver\chromedriver_win
32.zip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3270K total.
Extracting zip contents
Copying to target path C:\Users\Administrator.USER-0GUONPPBHK\vuecmp\node_module
s\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at C:\Users\Administrator.USER-0GUONPPBHK\vu
ecmp\node_modules\chromedriver\lib\chromedriver\chromedriver.exe
> [email protected] postinstall C:\Users\Administrator.USER-0GUONPPB
HK\vuecmp\node_modules\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 optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)
added 1549 packages in 211.183s
Running eslint --fix to comply with chosen preset rules...
# ========================
> [email protected] lint C:\Users\Administrator.USER-0GUONPPBHK\vuecmp
> eslint --ext .js,.vue src test/unit test/e2e/specs "--fix"
# Project initialization finished!
# ========================
To get started:
cd vuecmp
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack4、切换项目路径
C:\Users\Administrator.USER-0GUONPPBHK>cd vuecmp5、项目安装
C:\Users\Administrator.USER-0GUONPPBHK\vuecmp>cnpm install
√ Installed 58 packages
√ Linked 0 latest versions
√ Run 0 scripts
√ All packages installed (used 25ms, speed 0B/s, json 0(0B), tarball 0B)6、项目编译
C:\Users\Administrator.USER-0GUONPPBHK\vuecmp>cnpm run dev
> [email protected] dev C:\Users\Administrator.USER-0GUONPPBHK\vuecmp
> 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 ...or.USER-0GUONPPBHK\vuecmp\src\main
10% building modules 2/5 modules 3 active ...uecmp\node_modules\webpack\hot\log
10% building modules 2/6 modules 4 active ...dules\webpack\hot\log-apply-result
10% building modules 2/7 modules 5 active ...p\node_modules\webpack\hot\emitter
10% building modules 3/7 modules 4 active ...p\node_modules\webpack\hot\emitter
10% building modules 4/7 modules 3 active ...p\node_modules\webpack\hot\emitter
10% building modules 5/7 modules 2 active ...p\node_modules\webpack\hot\emitter
10% building modules 6/7 modules 1 active ...p\node_modules\webpack\hot\emitter
10% building modules 7/8 modules 1 active ...\webpack\hot nonrecursive /^\.\/lo
10% building modules 7/9 modules 2 active ...\webpack-dev-server\client\overlay
10% building modules 7/10 modules 3 active ...s\webpack-dev-server\client\socke
10% building modules 8/10 modules 2 active ...s\webpack-dev-server\client\socke
10% building modules 8/11 modules 3 active ...NPPBHK\vuecmp\node_modules\url\ur
11% building modules 9/11 modules 2 active ...NPPBHK\vuecmp\node_modules\url\ur
11% building modules 10/11 modules 1 active ...NPPBHK\vuecmp\node_modules\url\u
11% building modules 10/12 modules 2 active ...ecmp\node_modules\vue\dist\vue.e
11% building modules 10/13 modules 3 active ...\vuecmp\node_modules\events\even
11% building modules 11/13 modules 2 active ...\vuecmp\node_modules\events\even
11% building modules 12/13 modules 1 active ...\vuecmp\node_modules\events\even
11% building modules 12/14 modules 2 active ...ode_modules\webpack\buildin\glob
11% building modules 13/14 modules 1 active ...\vuecmp\node_modules\events\even
11% building modules 14/15 modules 1 active ...0GUONPPBHK\vuecmp\src\router\ind
11% building modules 14/16 modules 2 active ...PPBHK\vuecmp\node_modules\url\ut
11% building modules 14/17 modules 3 active ...ecmp\node_modules\strip-ansi\ind
11% building modules 14/18 modules 4 active ...node_modules\querystring-es3\ind
11% building modules 14/19 modules 5 active ...cmp\node_modules\punycode\punyco
11% building modules 14/20 modules 6 active ...node_modules\loglevel\lib\loglev
11% building modules 15/20 modules 5 active ...node_modules\loglevel\lib\loglev
11% building modules 16/20 modules 4 active ...node_modules\loglevel\lib\loglev
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 17/22 modules 5 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
12% building modules 18/22 modules 4 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
12% building modules 18/23 modules 5 active ...ode_modules\webpack\buildin\modu
12% building modules 19/23 modules 4 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
12% building modules 20/23 modules 3 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
12% building modules 21/23 modules 2 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
12% building modules 21/24 modules 3 active ...uecmp\node_modules\ansi-html\ind
12% building modules 22/24 modules 2 active ...uecmp\node_modules\ansi-html\ind
12% building modules 23/24 modules 1 active ...uecmp\node_modules\ansi-html\ind
12% building modules 23/25 modules 2 active ...p\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 ...\vuecmp\src\components\HelloWorl
12% building modules 24/28 modules 4 active ...\vuecmp\src\components\HelloWorl
13% building modules 25/28 modules 3 active ...\vuecmp\src\components\HelloWorl
13% building modules 26/28 modules 2 active ...\vuecmp\src\components\HelloWorl
13% building modules 27/28 modules 1 active ...\vuecmp\src\components\HelloWorl
13% building modules 27/29 modules 2 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
13% building modules 28/29 modules 1 active ...\vuecmp\src\components\HelloWorl
13% building modules 28/30 modules 2 active ...ue-loader\lib\component-normaliz
13% building modules 28/31 modules 3 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
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 ...\vuecmp\src\components\HelloWorl
13% building modules 30/33 modules 3 active ...\vuecmp\src\components\HelloWorl
13% building modules 31/33 modules 2 active ...\vuecmp\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
14% building modules 34/37 modules 3 active ...les\vue-router\dist\vue-router.e
14% building modules 35/37 modules 2 active ...les\vue-router\dist\vue-router.e
14% building modules 36/37 modules 1 active ...les\vue-router\dist\vue-router.e
14% building modules 36/38 modules 2 active ...ecmp\node_modules\ansi-regex\ind
14% building modules 37/38 modules 1 active ...ecmp\node_modules\ansi-regex\ind
14% building modules 37/39 modules 2 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
14% building modules 38/39 modules 1 active ...ecmp\node_modules\ansi-regex\ind
14% building modules 38/40 modules 2 active ...\vuecmp\src\components\HelloWorl
14% building modules 39/40 modules 1 active ...ecmp\node_modules\ansi-regex\ind
14% building modules 39/41 modules 2 active ...or.USER-0GUONPPBHK\vuecmp\src\Ap
14% building modules 39/42 modules 3 active ...\vuecmp\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 ...\vuecmp\src\components\HelloWorl
15% building modules 42/45 modules 3 active ...0GUONPPBHK\vuecmp\src\assets\log
15% building modules 43/45 modules 2 active ...\vuecmp\src\components\HelloWorl
15% building modules 44/45 modules 1 active ...\vuecmp\src\components\HelloWorl
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 3566ms 18:07:43
I Your application is running here: http://localhost:80817、查看项目结构
