如何安装vue并创建vue.js框架项目

1、安装vue工具

C:UsersAdministrator.USER-0GUONPPBHK>$ cnpm install vue
'$' 不是内部或外部命令，也不是可运行的程序
或批处理文件。

C:UsersAdministrator.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:UsersAdministrator.USER-0GUONPPBHK>cnpm install --global vue-cli
Downloading vue-cli to C:UsersAdministrator.USER-0GUONPPBHKAppDataRoaming
p
m
ode_modulesvue-cli_tmp
Copying C:UsersAdministrator.USER-0GUONPPBHKAppDataRoaming
pm
ode_modules
vue-cli_tmp\_vue-cli@2.9.3@vue-cli to C:UsersAdministrator.USER-0GUONPPBHKApp
DataRoaming
pm
ode_modulesvue-cli
Installing vue-cli's dependencies to C:UsersAdministrator.USER-0GUONPPBHKAppD
ataRoaming
pm
ode_modulesvue-cli/node_modules
[1/20] commander@^2.9.0 installed at node_modules\_commander@2.15.1@commander
[2/20] minimatch@^3.0.0 installed at node_modules\_minimatch@3.0.4@minimatch
[3/20] multimatch@^2.1.0 installed at node_modules\_multimatch@2.1.0@multimatch
[4/20] ora@^1.3.0 installed at node_modules\_ora@1.4.0@ora
[5/20] rimraf@^2.5.0 existed at node_modules\_rimraf@2.6.2@rimraf
[6/20] chalk@^2.1.0 installed at node_modules\_chalk@2.3.2@chalk
[7/20] semver@^5.1.0 installed at node_modules\_semver@5.5.0@semver
[8/20] consolidate@^0.14.0 installed at node_modules\_consolidate@0.14.5@consoli
date
[9/20] uid@0.0.2 installed at node_modules\_uid@0.0.2@uid
[10/20] user-home@^2.0.0 installed at node_modules\_user-home@2.0.0@user-home
[11/20] tildify@^1.2.0 installed at node_modules\_tildify@1.2.0@tildify
[12/20] read-metadata@^1.0.0 installed at node_modules\_read-metadata@1.0.0@read
-metadata
[13/20] coffee-script@1.12.7 existed at node_modules\_coffee-script@1.12.7@coffe
e-script
[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] request@^2.67.0 installed at node_modules\_request@2.85.0@request
[17/20] async@^2.4.0 installed at node_modules\_async@2.6.0@async
[18/20] inquirer@^3.3.0 installed at node_modules\_inquirer@3.3.0@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\_handlebars@4.0.11@handlebar
s
deprecate metalsmith@2.3.0 › gray-matter@2.1.1 › 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:UsersAdmini
strator.USER-0GUONPPBHKAppDataRoaming
pm
ode_modulesvue-cli
ode_modules.r
ecently_updates.txt)
  Today:
    → download-git-repo@1.0.2 › download@5.0.3 › decompress@4.2.0 › decompre
ss-tarbz2@4.1.1 › unbzip2-stream@1.2.5 › buffer@3.6.0 › ieee754@^1.1.4(1.1.11
) (15:26:34)
  2018-03-23
    → download-git-repo@1.0.2 › download@5.0.3 › filenamify@2.0.0 › strip-ou
ter@^1.0.0(1.0.1) (13:41:37)
    → download-git-repo@1.0.2 › download@5.0.3 › got@6.7.1 › lowercase-keys@
^1.0.0(1.0.1) (15:52:08)
  2018-03-22
    → metalsmith@2.3.0 › clone@^1.0.2(1.0.4) (05:21:25)
    → download-git-repo@1.0.2 › download@5.0.3 › decompress@4.2.0 › decompre
ss-tar@4.1.1 › tar-stream@1.5.5 › 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)
[vue-cli@2.9.3] link C:UsersAdministrator.USER-0GUONPPBHKAppDataRoaming
pm
vue@ -> C:UsersAdministrator.USER-0GUONPPBHKAppDataRoaming
pm
ode_modules
vue-cliinvue
[vue-cli@2.9.3] link C:UsersAdministrator.USER-0GUONPPBHKAppDataRoaming
pm
vue-init@ -> C:UsersAdministrator.USER-0GUONPPBHKAppDataRoaming
pm
ode_mod
ulesvue-cliinvue-init
[vue-cli@2.9.3] link C:UsersAdministrator.USER-0GUONPPBHKAppDataRoaming
pm
vue-list@ -> C:UsersAdministrator.USER-0GUONPPBHKAppDataRoaming
pm
ode_mod
ulesvue-cliinvue-list

3、初始化vue并创建项目

C:UsersAdministrator.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 socks@1.1.10: 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

> chromedriver@2.37.0 install C:UsersAdministrator.USER-0GUONPPBHKvuecmp
ode
_moduleschromedriver
> node install.js

Downloading https://chromedriver.storage.googleapis.com/2.37/chromedriver_win32.
zip
Saving to C:UsersADMINI~1.USEAppDataLocalTempchromedriverchromedriver_win
32.zip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3270K total.
Extracting zip contents
Copying to target path C:UsersAdministrator.USER-0GUONPPBHKvuecmp
ode_module
schromedriverlibchromedriver
Done. ChromeDriver binary available at C:UsersAdministrator.USER-0GUONPPBHKvu
ecmp
ode_moduleschromedriverlibchromedriverchromedriver.exe

> uglifyjs-webpack-plugin@0.4.6 postinstall C:UsersAdministrator.USER-0GUONPPB
HKvuecmp
ode_moduleswebpack
ode_modulesuglifyjs-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: fsevents@1.1.3 (node_modulesfse
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...
# ========================


> vuecmp@1.0.0 lint C:UsersAdministrator.USER-0GUONPPBHKvuecmp
> 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/webpack

4、切换项目路径

C:UsersAdministrator.USER-0GUONPPBHK>cd vuecmp

5、项目安装

C:UsersAdministrator.USER-0GUONPPBHKvuecmp>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:UsersAdministrator.USER-0GUONPPBHKvuecmp>cnpm run dev

> vuecmp@1.0.0 dev C:UsersAdministrator.USER-0GUONPPBHKvuecmp
> 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_moduleswebpackhotdev-server
 10% building modules 2/3 modules 1 active ...clientindex.js?http://localhost:8
 10% building modules 2/4 modules 2 active ...or.USER-0GUONPPBHKvuecmpsrcmain
 10% building modules 2/5 modules 3 active ...uecmp
ode_moduleswebpackhotlog
 10% building modules 2/6 modules 4 active ...duleswebpackhotlog-apply-result
 10% building modules 2/7 modules 5 active ...p
ode_moduleswebpackhotemitter
 10% building modules 3/7 modules 4 active ...p
ode_moduleswebpackhotemitter
 10% building modules 4/7 modules 3 active ...p
ode_moduleswebpackhotemitter
 10% building modules 5/7 modules 2 active ...p
ode_moduleswebpackhotemitter
 10% building modules 6/7 modules 1 active ...p
ode_moduleswebpackhotemitter
 10% building modules 7/8 modules 1 active ...webpackhot nonrecursive /^./lo
 10% building modules 7/9 modules 2 active ...webpack-dev-serverclientoverlay
 10% building modules 7/10 modules 3 active ...swebpack-dev-serverclientsocke
 10% building modules 8/10 modules 2 active ...swebpack-dev-serverclientsocke
 10% building modules 8/11 modules 3 active ...NPPBHKvuecmp
ode_modulesurlur
 11% building modules 9/11 modules 2 active ...NPPBHKvuecmp
ode_modulesurlur
 11% building modules 10/11 modules 1 active ...NPPBHKvuecmp
ode_modulesurlu
 11% building modules 10/12 modules 2 active ...ecmp
ode_modulesvuedistvue.e
 11% building modules 10/13 modules 3 active ...vuecmp
ode_moduleseventseven
 11% building modules 11/13 modules 2 active ...vuecmp
ode_moduleseventseven
 11% building modules 12/13 modules 1 active ...vuecmp
ode_moduleseventseven
 11% building modules 12/14 modules 2 active ...ode_moduleswebpackuildinglob
 11% building modules 13/14 modules 1 active ...vuecmp
ode_moduleseventseven
 11% building modules 14/15 modules 1 active ...0GUONPPBHKvuecmpsrc
outerind
 11% building modules 14/16 modules 2 active ...PPBHKvuecmp
ode_modulesurlut
 11% building modules 14/17 modules 3 active ...ecmp
ode_modulesstrip-ansiind
 11% building modules 14/18 modules 4 active ...node_modulesquerystring-es3ind
 11% building modules 14/19 modules 5 active ...cmp
ode_modulespunycodepunyco
 11% building modules 14/20 modules 6 active ...node_modulesloglevellibloglev
 11% building modules 15/20 modules 5 active ...node_modulesloglevellibloglev
 11% building modules 16/20 modules 4 active ...node_modulesloglevellibloglev
 11% building modules 16/21 modules 5 active ..._modulessockjs-clientdistsock
 12% building modules 17/21 modules 4 active ..._modulessockjs-clientdistsock
 12% building modules 17/22 modules 5 active ...or.USER-0GUONPPBHKvuecmpsrcAp
 12% building modules 18/22 modules 4 active ...or.USER-0GUONPPBHKvuecmpsrcAp
 12% building modules 18/23 modules 5 active ...ode_moduleswebpackuildinmodu
 12% building modules 19/23 modules 4 active ...or.USER-0GUONPPBHKvuecmpsrcAp
 12% building modules 20/23 modules 3 active ...or.USER-0GUONPPBHKvuecmpsrcAp
 12% building modules 21/23 modules 2 active ...or.USER-0GUONPPBHKvuecmpsrcAp
 12% building modules 21/24 modules 3 active ...uecmp
ode_modulesansi-htmlind
 12% building modules 22/24 modules 2 active ...uecmp
ode_modulesansi-htmlind
 12% building modules 23/24 modules 1 active ...uecmp
ode_modulesansi-htmlind
 12% building modules 23/25 modules 2 active ...p
ode_moduleshtml-entitiesind
 12% building modules 23/26 modules 3 active ...ode_modulesquerystring-es3deco
 12% building modules 23/27 modules 4 active ...ode_modulesquerystring-es3enco
 12% building modules 23/28 modules 5 active ...vuecmpsrccomponentsHelloWorl
 12% building modules 24/28 modules 4 active ...vuecmpsrccomponentsHelloWorl
 13% building modules 25/28 modules 3 active ...vuecmpsrccomponentsHelloWorl
 13% building modules 26/28 modules 2 active ...vuecmpsrccomponentsHelloWorl
 13% building modules 27/28 modules 1 active ...vuecmpsrccomponentsHelloWorl
 13% building modules 27/29 modules 2 active ...or.USER-0GUONPPBHKvuecmpsrcAp
 13% building modules 28/29 modules 1 active ...vuecmpsrccomponentsHelloWorl
 13% building modules 28/30 modules 2 active ...ue-loaderlibcomponent-normaliz
 13% building modules 28/31 modules 3 active ...or.USER-0GUONPPBHKvuecmpsrcAp
 13% building modules 29/31 modules 2 active ...ue-loaderlibcomponent-normaliz
 13% building modules 30/31 modules 1 active ...ue-loaderlibcomponent-normaliz
 13% building modules 30/32 modules 2 active ...vuecmpsrccomponentsHelloWorl
 13% building modules 30/33 modules 3 active ...vuecmpsrccomponentsHelloWorl
 13% building modules 31/33 modules 2 active ...vuecmpsrccomponentsHelloWorl
 13% building modules 32/33 modules 1 active ...ue-loaderlibcomponent-normaliz
 13% building modules 32/34 modules 2 active ...leshtml-entitieslibxml-entiti
 13% building modules 32/35 modules 3 active ...shtml-entitieslibhtml4-entiti
 13% building modules 32/36 modules 4 active ...shtml-entitieslibhtml5-entiti
 13% building modules 33/36 modules 3 active ...shtml-entitieslibhtml5-entiti
 13% building modules 33/37 modules 4 active ...lesvue-routerdistvue-router.e
 14% building modules 34/37 modules 3 active ...lesvue-routerdistvue-router.e
 14% building modules 35/37 modules 2 active ...lesvue-routerdistvue-router.e
 14% building modules 36/37 modules 1 active ...lesvue-routerdistvue-router.e
 14% building modules 36/38 modules 2 active ...ecmp
ode_modulesansi-regexind
 14% building modules 37/38 modules 1 active ...ecmp
ode_modulesansi-regexind
 14% building modules 37/39 modules 2 active ...or.USER-0GUONPPBHKvuecmpsrcAp
 14% building modules 38/39 modules 1 active ...ecmp
ode_modulesansi-regexind
 14% building modules 38/40 modules 2 active ...vuecmpsrccomponentsHelloWorl
 14% building modules 39/40 modules 1 active ...ecmp
ode_modulesansi-regexind
 14% building modules 39/41 modules 2 active ...or.USER-0GUONPPBHKvuecmpsrcAp
 14% building modules 39/42 modules 3 active ...vuecmpsrccomponentsHelloWorl
 14% building modules 39/43 modules 4 active ...ulesvue-hot-reload-apidistind
 14% building modules 40/43 modules 3 active ...ulesvue-hot-reload-apidistind
 14% building modules 40/44 modules 4 active ...e-style-loaderlibaddStylesClie
 14% building modules 41/44 modules 3 active ...e-style-loaderlibaddStylesClie
 15% building modules 42/44 modules 2 active ...vuecmpsrccomponentsHelloWorl
 15% building modules 42/45 modules 3 active ...0GUONPPBHKvuecmpsrcassetslog
 15% building modules 43/45 modules 2 active ...vuecmpsrccomponentsHelloWorl
 15% building modules 44/45 modules 1 active ...vuecmpsrccomponentsHelloWorl
 15% building modules 45/46 modules 1 active ...vue-style-loaderliblistToStyl
 15% building modules 46/47 modules 1 active ...de_modulescss-loaderlibcss-ba
 95% emitting

 DONE  Compiled successfully in 3566ms                                  18:07:43


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

7、查看项目结构