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/webpack
4、切换项目路径
C:\Users\Administrator.USER-0GUONPPBHK>cd vuecmp
5、项目安装
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:8081
7、查看项目结构
