Vue Cli3安装初始化一个项目骨架

骨架"/>

Vue Cli3安装初始化一个项目骨架

之前写过一篇文章是vue环境搭建Vue环境搭建，那个时候基于2.0的，2017年发表的，比较老了。更新一版：

NPM设置淘宝镜像源，并安装cmpm

npm config set registry 
npm config get registry
npm install -g cnpm --registry=

具体操作过程如下：

ThinkPad@wangdy MINGW64 /e/2020code
$ npm config set registry @wangdy MINGW64 /e/2020code
$ npm config get registry
@wangdy MINGW64 /e/2020code
$ npm install -g cnpm --registry=:\DevTools\nodeJS8.11.3\node_global\cnpm -> D:\DevTools\nodeJS8.11.3\node_global\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.1
added 681 packages in 82.518s

安装vue cli3

cnpm  install -g @vue/cli

过程如下：

$ cnpm  install -g @vue/cli
Downloading @vue/cli to D:\DevTools\nodeJS8.11.3\node_global\node_modules\@vue\cli_tmp
Copying D:\DevTools\nodeJS8.11.3\node_global\node_modules\@vue\cli_tmp\_@vue_cli@4.1.2@@vue\cli to D:\DevTools\nodeJS8.11.3\node_global\node_modules\@vue\cli
Installing @vue/cli's dependencies to D:\DevTools\nodeJS8.11.3\node_global\node_modules\@vue\cli/node_modules
[1/31] deepmerge@^3.2.0 installed at node_modules\_deepmerge@3.3.0@deepmerge
[2/31] didyoumean@^1.2.1 installed at node_modules\_didyoumean@1.2.1@didyoumean
[3/31] commander@^2.20.0 installed at node_modules\_commander@2.20.3@commander
[4/31] debug@^4.1.0 installed at node_modules\_debug@4.1.1@debug
[5/31] ejs@^2.7.1 installed at node_modules\_ejs@2.7.4@ejs
[6/31] envinfo@^7.5.0 installed at node_modules\_envinfo@7.5.0@envinfo
[7/31] @vue/cli-ui-addon-webpack@^4.1.2 installed at node_modules\_@vue_cli-ui-addon-webpack@4.1.2@@vue\cli-ui-addon-webpack
[8/31] @vue/cli-ui-addon-widgets@^4.1.2 installed at node_modules\_@vue_cli-ui-addon-widgets@4.1.2@@vue\cli-ui-addon-widgets
[9/31] cmd-shim@^3.0.3 installed at node_modules\_cmd-shim@3.0.3@cmd-shim
[10/31] fs-extra@^7.0.1 installed at node_modules\_fs-extra@7.0.1@fs-extra
[11/31] isbinaryfile@^4.0.0 installed at node_modules\_isbinaryfile@4.0.3@isbinaryfile
[12/31] javascript-stringify@^1.6.0 installed at node_modules\_javascript-stringify@1.6.0@javascript-stringify
[13/31] import-global@^0.1.0 installed at node_modules\_import-global@0.1.0@import-global
[14/31] lodash.clonedeep@^4.5.0 installed at node_modules\_lodash.clonedeep@4.5.0@lodash.clonedeep
[15/31] lru-cache@^5.1.1 existed at node_modules\_lru-cache@5.1.1@lru-cache
[16/31] boxen@^4.1.0 installed at node_modules\_boxen@4.2.0@boxen
[17/31] minimist@^1.2.0 installed at node_modules\_minimist@1.2.0@minimist
[18/31] @vue/cli-shared-utils@^4.1.2 installed at node_modules\_@vue_cli-shared-utils@4.1.2@@vue\cli-shared-utilsWARN node unsupported "node@v8.11.3" is incompatible with @vue/cli-ui@4.1.2 › fkill@6.2.0 › taskkill@3.1.0 › execa@^3.3.0, expected node@^8.12.0 || >=9.7.0
[19/31] slash@^3.0.0 installed at node_modules\_slash@3.0.0@slash
[20/31] js-yaml@^3.13.1 installed at node_modules\_js-yaml@3.13.1@js-yaml
[21/31] inquirer@^6.3.1 installed at node_modules\_inquirer@6.5.2@inquirer
[22/31] resolve@^1.13.1 existed at node_modules\_resolve@1.14.1@resolveWARN node unsupported "node@v8.11.3" is incompatible with @vue/cli-ui@4.1.2 › fkill@6.2.0 › taskkill@3.1.0 › execa@3.4.0 › human-signals@^1.1.1, expected node@>=8.12.0
[23/31] recast@^0.18.1 installed at node_modules\_recast@0.18.5@recast
[24/31] download-git-repo@^1.0.2 installed at node_modules\_download-git-repo@1.1.0@download-git-repo
[25/31] shortid@^2.2.15 installed at node_modules\_shortid@2.2.15@shortid
[26/31] validate-npm-package-name@^3.0.0 installed at node_modules\_validate-npm-package-name@3.0.0@validate-npm-package-name
[27/31] yaml-front-matter@^3.4.1 installed at node_modules\_yaml-front-matter@3.4.1@yaml-front-matter
[28/31] globby@^9.2.0 installed at node_modules\_globby@9.2.0@globby
[29/31] vue-jscodeshift-adapter@^2.0.2 installed at node_modules\_vue-jscodeshift-adapter@2.0.3@vue-jscodeshift-adapter
[30/31] jscodeshift@^0.6.4 installed at node_modules\_jscodeshift@0.6.4@jscodeshift
platform unsupported @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › nodemon@1.19.4 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
[31/31] @vue/cli-ui@^4.1.2 installed at node_modules\_@vue_cli-ui@4.1.2@@vue\cli-ui
execute post install 5 scripts...
[1/5] scripts.postinstall ejs@^2.7.1 run "node ./postinstall.js", root: "D:\\DevTools\\nodeJS8.11.3\\node_global\\node_modules\\@vue\\cli\\node_modules\\_ejs@2.7.4@ejs"
Thank you for installing EJS: built with the Jake JavaScript build tool (/)[1/5] scripts.postinstall ejs@^2.7.1 finished in 485ms
[2/5] scripts.postinstall @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo-server-express@2.9.15 › apollo-server-types@0.2.10 › apollo-engine-reporting-protobuf@0.4.4 › @apollo/protobufjs@^1.0.3 run "node scripts/postinstall", root: "D:\\DevTools\\nodeJS8.11.3\\node_global\\node_modules\\@vue\\cli\\node_modules\\_@apollo_protobufjs@1.0.3@@apollo\\protobufjs"
[2/5] scripts.postinstall @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo-server-express@2.9.15 › apollo-server-types@0.2.10 › apollo-engine-reporting-protobuf@0.4.4 › @apollo/protobufjs@^1.0.3 finished in 543ms
[3/5] scripts.postinstall @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.21.2 › apollo-codegen-core@0.35.9 › apollo-language-server@1.17.2 › core-js@^3.0.1 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "D:\\DevTools\\nodeJS8.11.3\\node_global\\node_modules\\@vue\\cli\\node_modules\\_core-js@3.6.1@core-js"
Thank you for using core-js (  ) for polyfilling JavaScript standard library!The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> 
> , the author of core-js (  ) is looking for a good job -)[3/5] scripts.postinstall @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.21.2 › apollo-codegen-core@0.35.9 › apollo-language-server@1.17.2 › core-js@^3.0.1 finished in 609ms
[4/5] scripts.postinstall @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › nodemon@^1.19.4 run "node bin/postinstall || exit 0", root: "D:\\DevTools\\nodeJS8.11.3\\node_global\\node_modules\\@vue\\cli\\node_modules\\_nodemon@1.19.4@nodemon"
Love nodemon? You can now support the project via the open collective:> [4/5] scripts.postinstall @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › nodemon@^1.19.4 finished in 724ms
[5/5] scripts.postinstall @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.21.2 › git-parse@1.0.3 › babel-polyfill@6.26.0 › core-js@^2.5.0 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "D:\\DevTools\\nodeJS8.11.3\\node_global\\node_modules\\@vue\\cli\\node_modules\\_core-js@2.6.11@core-js"
[5/5] scripts.postinstall @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.21.2 › git-parse@1.0.3 › babel-polyfill@6.26.0 › core-js@^2.5.0 finished in 731ms
anti semver @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo-server-express@2.9.15 › @types/cors@2.8.6 › @types/express@* delcares @types/express@*(resolved as 4.17.2) but using ancestor(apollo-server-express)'s dependency @types/express@4.17.1(resolved as 4.17.1)
anti semver @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo-server-express@2.9.15 › apollo-server-core@2.9.15 › @types/graphql-upload@8.0.3 › @types/express@* delcares @types/express@*(resolved as 4.17.2) but using ancestor(apollo-server-express)'s dependency @types/express@4.17.1(resolved as 4.17.1)
anti semver @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo-server-express@2.9.15 › apollo-server-core@2.9.15 › @types/graphql-upload@8.0.3 › @types/koa@2.11.0 › @types/cookies@0.7.4 › @types/express@* delcares @types/express@*(resolved as 4.17.2) but using ancestor(apollo-server-express)'s dependency @types/express@4.17.1(resolved as 4.17.1)
deprecate @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.21.2 › git-parse@1.0.3 › babel-polyfill@6.26.0 › core-js@^2.5.0 core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
Recently updated (since 2019-12-30): 11 packages (detail see file D:\DevTools\nodeJS8.11.3\node_global\node_modules\@vue\cli\node_modules\.recently_updates.txt)Today:→ download-git-repo@1.1.0 › download@5.0.3 › decompress@4.2.0 › decompress-tar@4.1.1 › tar-stream@1.6.2 › readable-stream@^2.3.0(2.3.7) (01:13:39)→ jscodeshift@0.6.4 › @babel/preset-env@7.7.7 › browserslist@4.8.3 › electron-to-chromium@^1.3.322(1.3.326) (05:02:28)2020-01-05→ @vue/cli-ui@4.1.2 › prismjs@^1.16.0(1.18.0) (05:36:41)→ jscodeshift@0.6.4 › @babel/preset-env@7.7.7 › browserslist@4.8.3 › caniuse-lite@^1.0.30001017(1.0.30001019) (09:32:33)2020-01-04→ globby@9.2.0 › @types/glob@7.1.1 › @types/node@*(13.1.4) (07:33:41)2020-01-03→ @vue/cli-ui@4.1.2 › graphql-subscriptions@1.1.0 › iterall@^1.2.1(1.3.0) (10:30:35)→ jscodeshift@0.6.4 › flow-parser@0.*(0.115.0) (09:41:41)→ jscodeshift@0.6.4 › @babel/preset-env@7.7.7 › browserslist@^4.6.0(4.8.3) (12:15:55)→ @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo-server-express@2.9.15 › apollo-server-core@2.9.15 › apollo-engine-reporting@1.4.13 › async-retry@^1.2.1(1.3.1) (02:13:10)2020-01-02→ boxen@4.2.0 › chalk@3.0.0 › ansi-styles@^4.1.0(4.2.1) (02:15:19)→ jscodeshift@0.6.4 › @babel/register@7.7.7 › find-cache-dir@2.1.0 › pkg-dir@3.0.0 › find-up@3.0.0 › locate-path@3.0.0 › p-locate@3.0.0 › p-limit@^2.0.0(2.2.2) (02:42:31)
All packages installed (976 packages installed from npm registry, used 36s(network 32s), speed 1.12MB/s, json 857(2.12MB), tarball 33.49MB)
[@vue/cli@4.1.2] link D:\DevTools\nodeJS8.11.3\node_global\vue@ -> D:\DevTools\nodeJS8.11.3\node_global\node_modules\@vue\cli\bin\vue.js

测试：

vue --version

ThinkPad@wangdy MINGW64 /e/2020code
$ vue --version
@vue/cli 4.1.2

新建一个项目脚手架

vue create 项目名称

ThinkPad@wangdy MINGW64 /e/2020code
$ vue create vuecli3demo
? Please pick a preset: (Use arrow keys)
? Please pick a preset: default (babel, eslint)
-  Creating project in E:\2020code\vuecli3demo.
✨  Creating project in E:\2020code\vuecli3demo.
-  Initializing git repository...
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...> yorkie@2.0.0 install E:\2020code\vuecli3demo\node_modules\yorkie
> node bin/install.jssetting up Git hooks
done> core-js@3.6.4 postinstall E:\2020code\vuecli3demo\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"> ejs@2.7.4 postinstall E:\2020code\vuecli3demo\node_modules\ejs
> node ./postinstall.jsadded 1138 packages in 130.595s
🚀  Invoking generators...
📦  Installing additional dependencies...added 59 packages in 19.412s
-  Running completion hooks...
⚓  Running completion hooks...-  Generating README.md...
📄  Generating README.md...🎉  Successfully created project vuecli3demo.
👉  Get started with the following commands:$ cd vuecli3demo$ npm run serve

如下图的项目目录结构，看到新的版本给加入了git 版本控制，和readme文件，并执行了npm install命令生成了node_modules相关依赖模块，且上述创建过程的结尾也给了明确的提示，让进入到vuecli3demo项目根目录内，直接执行npm run serve启动程序。可以说是开箱即用了。坏处就是慢了一点。

npm run serve启动程序：

npm run serve

。。。。。省略。。。。。
<s> [webpack.Progress] 100%App running at:- Local:   http://localhost:8080/- Network: http://192.168.0.116:8080/Note that the development build is not optimized.To create a production build, run npm run build.

启动后，看到，默认端口是8080，浏览器访问路径是http://localhost:8080/，效果如下：