这里也有一篇比较详细的vscode+vue大前端的配置文档配置文档，我就不转发了，内事不决找百度，外事不决找谷歌。
vscode 安装的vue插件为veture
补充一下的是Vue CLI 拥有开箱即用的通过 Jest 或 Mocha 进行单元测试的内置选项。我们还有官方的 Vue Test Utils 提供更多详细的指引和自定义设置。
官网关于旧版本,旧版本安装完是2.9.6
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
可以使用下列任一命令安装这个新的包：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装之后，你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。
你还可以用这个命令来检查其版本是否正确：
vue -V
@vue/cli 4.1.2
要注意可以使用
cnpm install -g @vue/cli来安装，最后再换回npm install -g @vue/cli，安装，这样速度快。不然还是用不了vue init webpack，当然最正统的还是乖乖使用npm在最后创建项目后才把npm改为cnpm
如果cnpm 还没有安装可以
npm install -g cnpm --registry=https://registry.npm.taobao.org
`` `
# 以下是我使用`npm install -g @vue/cli-init`自己的安装过程
D:\phpstudy_pro\WWW>cnpm install -g @vue/cli
Downloading @vue/cli to C:\Users\gorgage\AppData\Roaming\npm\node_modules@vue\cli_tmp
Copying C:\Users\gorgage\AppData\Roaming\npm\node_modules@vue\cli_tmp_@vue_cli@4.1.2@@vue\cli to C:\Users\gorgage\AppData\Roaming\npm\node_modules@vue\cli
Installing @vue/cli's dependencies to C:\Users\gorgage\AppData\Roaming\npm\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] @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
[5/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
[6/31] ejs@^2.7.1 installed at node_modules_ejs@2.7.4@ejs
[7/31] envinfo@^7.5.0 installed at node_modules_envinfo@7.5.0@envinfo
[8/31] debug@^4.1.0 installed at node_modules_debug@4.1.1@debug
[9/31] isbinaryfile@^4.0.0 installed at node_modules_isbinaryfile@4.0.4@isbinaryfile
[10/31] cmd-shim@^3.0.3 installed at node_modules_cmd-shim@3.0.3@cmd-shim
[11/31] fs-extra@^7.0.1 installed at node_modules_fs-extra@7.0.1@fs-extra
[12/31] javascript-stringify@^1.6.0 installed at node_modules_javascript-stringify@1.6.0@javascript-stringify
[13/31] boxen@^4.1.0 installed at node_modules_boxen@4.2.0@boxen
[14/31] lru-cache@^5.1.1 existed at node_modules_lru-cache@5.1.1@lru-cache
[15/31] minimist@^1.2.0 installed at node_modules_minimist@1.2.0@minimist
[16/31] import-global@^0.1.0 installed at node_modules_import-global@0.1.0@import-global
[17/31] lodash.clonedeep@^4.5.0 installed at node_modules_lodash.clonedeep@4.5.0@lodash.clonedeep
[18/31] @vue/cli-shared-utils@^4.1.2 installed at node_modules_@vue_cli-shared-utils@4.1.2@@vue\cli-shared-utils
[19/31] js-yaml@^3.13.1 installed at node_modules_js-yaml@3.13.1@js-yaml
[20/31] slash@^3.0.0 installed at node_modules_slash@3.0.0@slash
[21/31] resolve@^1.13.1 installed at node_modules_resolve@1.15.0@resolve
[22/31] shortid@^2.2.15 installed at node_modules_shortid@2.2.15@shortid
[23/31] inquirer@^6.3.1 installed at node_modules_inquirer@6.5.2@inquirer
[24/31] download-git-repo@^1.0.2 installed at node_modules_download-git-repo@1.1.0@download-git-repo
[25/31] validate-npm-package-name@^3.0.0 installed at node_modules_validate-npm-package-name@3.0.0@validate-npm-package-name
[26/31] recast@^0.18.1 installed at node_modules_recast@0.18.5@recast
[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: "C:\Users\gorgage\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_ejs@2.7.4@ejs"
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
[1/5] scripts.postinstall ejs@^2.7.1 finished in 109ms
[2/5] scripts.postinstall @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.22.0 › @apollographql/apollo-tools@0.4.3 › apollo-env@0.6.1 › core-js@^3.0.1 run "node -e "try{require('./postinstall')}catch(e){}"", root: "C:\Users\gorgage\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_core-js@3.6.4@core-js"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
https://opencollective.com/core-js
https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
[2/5] scripts.postinstall @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.22.0 › @apollographql/apollo-tools@0.4.3 › apollo-env@0.6.1 › core-js@^3.0.1 finished in 110ms
[3/5] scripts.postinstall @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo-server-express@2.9.16 › apollo-server-types@0.2.10 › apollo-engine-reporting-protobuf@0.4.4 › @apollo/protobufjs@^1.0.3 run "node scripts/postinstall", root: "C:\Users\gorgage\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_@apollo_protobufjs@1.0.3@@apollo\protobufjs"
[3/5] scripts.postinstall @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo-server-express@2.9.16 › apollo-server-types@0.2.10 › apollo-engine-reporting-protobuf@0.4.4 › @apollo/protobufjs@^1.0.3 finished in 107ms
[4/5] scripts.postinstall @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.22.0 › git-parse@1.0.3 › babel-polyfill@6.26.0 › core-js@^2.5.0 run "node -e "try{require('./postinstall')}catch(e){}"", root: "C:\Users\gorgage\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_core-js@2.6.11@core-js"
[4/5] scripts.postinstall @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.22.0 › git-parse@1.0.3 › babel-polyfill@6.26.0 › core-js@^2.5.0 finished in 98ms
[5/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: "C:\Users\gorgage\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\_nodemon@1.19.4@nodemon"
Love nodemon? You can now support the project via the open collective:
[5/5] scripts.postinstall @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › nodemon@^1.19.4 finished in 357ms
deprecate @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.22.0 › 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 2020-01-25): 32 packages (detail see file C:\Users\gorgage\AppData\Roaming\npm\node_modules@vue\cli\node_modules.recently_updates.txt)
Today:
→ globby@9.2.0 › @types/glob@7.1.1 › @types/node@(13.7.0) (05:35:07)
→ jscodeshift@0.6.4 › @babel/preset-env@7.8.4 › @babel/compat-data@^7.8.4(7.8.5) (02:51:38)
2020-01-31
→ shortid@2.2.15 › nanoid@^2.1.0(2.1.11) (03:56:12)
→ @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@^2.20.0(2.22.0) (04:51:00)
→ @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.22.0 › apollo-codegen-core@^0.36.0(0.36.0) (04:50:40)
→ @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.22.0 › apollo-codegen-core@0.36.0 › apollo-language-server@^1.19.0(1.19.0) (04:50:34)
→ @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.22.0 › apollo-codegen-flow@^0.34.0(0.34.0) (04:50:48)
→ @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.22.0 › apollo-codegen-scala@^0.35.0(0.35.0) (04:50:48)
→ @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.22.0 › apollo-codegen-swift@^0.36.0(0.36.0) (04:50:48)
→ @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.22.0 › apollo-codegen-core@0.36.0 › apollo-language-server@1.19.0 › apollo-graphql@^0.4.0(0.4.0) (04:50:30)
→ @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.22.0 › apollo-codegen-typescript@^0.36.0(0.36.0) (04:50:54)
2020-01-30
→ boxen@4.2.0 › term-size@^2.1.0(2.2.0) (23:56:29)
→ jscodeshift@0.6.4 › @babel/preset-env@^7.1.6(7.8.4) (20:37:36) → jscodeshift@0.6.4 › @babel/core@^7.1.6(7.8.4) (20:37:42)
→ jscodeshift@0.6.4 › @babel/parser@^7.1.6(7.8.4) (20:37:26)
→ jscodeshift@0.6.4 › @babel/preset-env@7.8.4 › @babel/helper-compilation-targets@^7.8.4(7.8.4) (20:37:31)
→ jscodeshift@0.6.4 › flow-parser@0.(0.117.1) (15:08:23)
→ jscodeshift@0.6.4 › @babel/core@7.8.4 › @babel/helpers@^7.8.4(7.8.4) (20:37:37)
→ jscodeshift@0.6.4 › @babel/core@7.8.4 › @babel/generator@^7.8.4(7.8.4) (20:37:08)
→ jscodeshift@0.6.4 › @babel/core@7.8.4 › @babel/traverse@^7.8.4(7.8.4) (20:37:31)
→ jscodeshift@0.6.4 › @babel/preset-env@7.8.4 › @babel/compat-data@7.8.5 › browserslist@^4.8.5(4.8.6) (08:41:17)
→ jscodeshift@0.6.4 › @babel/preset-env@7.8.4 › @babel/compat-data@7.8.5 › browserslist@4.8.6 › electron-to-chromium@^1.3.341(1.3.344) (21:02:31)
→ jscodeshift@0.6.4 › @babel/preset-env@7.8.4 › @babel/plugin-transform-for-of@^7.8.4(7.8.4) (20:37:06)
→ jscodeshift@0.6.4 › @babel/preset-env@7.8.4 › @babel/plugin-transform-parameters@^7.8.4(7.8.4) (20:37:07)
→ jscodeshift@0.6.4 › @babel/preset-env@7.8.4 › @babel/plugin-transform-typeof-symbol@^7.8.4(7.8.4) (20:37:07)
→ @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo-upload-client@11.0.0 › @babel/runtime@^7.5.4(7.8.4) (20:37:09)
2020-01-29
→ @vue/cli-ui@4.1.2 › rss-parser@^3.7.3(3.7.4) (04:32:51)
→ @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.22.0 › @oclif/plugin-plugins@1.7.9 › cli-ux@^5.2.1(5.4.4) (01:55:55)
→ @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo-server-express@2.9.16 › apollo-server-types@0.2.10 › apollo-engine-reporting-protobuf@0.4.4 › @apollo/protobufjs@1.0.3 › @types/node@^10.1.0(10.17.14) (03:37:54)
2020-01-28
→ jscodeshift@0.6.4 › @babel/preset-env@7.8.4 › @babel/helper-compilation-targets@7.8.4 › levenary@^1.1.1(1.1.1) (11:33:06)
2020-01-27
→ @vue/cli-ui@4.1.2 › graphql@^14.3.1(14.6.0) (00:25:06)
2020-01-25
→ @vue/cli-ui@4.1.2 › vue-cli-plugin-apollo@0.21.3 › apollo@2.22.0 › @oclif/plugin-plugins@1.7.9 › cli-ux@5.4.4 › cli-progress@^3.4.0(3.6.0) (19:42:53)
All packages installed (986 packages installed from npm registry, used 55s(network 54s), speed 673.6kB/s, json 866(2.14MB), tarball 33.5MB)
[@vue/cli@4.1.2] link C:\Users\gorgage\AppData\Roaming\npm\vue@ -> C:\Users\gorgage\AppData\Roaming\npm\node_modules@vue\cli\bin\vue.js
D:\phpstudy_pro\WWW>vue -V
@vue/cli 4.1.2
//用cnpm安装完的后，创建项目时报依赖错误
D:\phpstudy_pro\WWW>vue init webpack vue-test
Command vue init requires a global addon to be installed.
Please run npm install -g @vue/cli-init and try again.
//只能重装再老老实实安装一次了
D:\phpstudy_pro\WWW>npm install -g @vue/cli-init
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
- @vue/cli-init@4.1.2
added 256 packages from 208 contributors in 58.236s
//发现好快就安装完了
D:\phpstudy_pro\WWW>vue init webpack vue-test
'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
? Project name vue-test //项目名
? Project description A Vue.js project //项目描述
? Author Gorgage //作者
? Vue build standalone
? Install vue-router? Yes //是否安装路由，这能单页模拟多页
? Use ESLint to lint your code? Yes //ESLint标准化检测
//ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次eslint代码检查，就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃，可以有效的控制项目代码的质量。
//https://eslint.org/
//https://eslint.bootcss.com/
? Pick an ESLint preset Standard
? Set up unit tests Yes //是否使用单元测试
? Pick a test runner jest //安装了jest
? Setup e2e tests with Nightwatch? Yes 是否使用了自动化测试框架
? Should we run npm install for you after the project has been created? (recommended) no
vue-cli · Generated "vue-test".
Project initialization finished!
========================
To get started:
cd vue-test
npm install (or if using yarn: yarn)
npm run lint -- --fix (or for yarn: yarn run lint --fix)
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
D:\phpstudy_pro\WWW>cd vue-test
D:\phpstudy_pro\WWW\vue-test>cnpm install
/ [18/58] Installing minimalistic-assert@^1.0.0platform unsupported babel-loader@7.1.5 › webpack@3.12.0 › watchpack@1.6.0 › 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)
√ Installed 58 packages
√ Linked 1029 latest versions
[1/4] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 run "node -e "try{require('./postinstall')}catch(e){}"", root: "D:\phpstudy_pro\WWW\vue-test\node_modules\_core-js@2.6.11@core-js"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
https://opencollective.com/core-js
https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
[1/4] scripts.postinstall babel-core@6.26.3 › babel-register@6.26.0 › core-js@^2.5.0 finished in 109ms
[2/4] scripts.install chromedriver@^2.27.2 run "node install.js", root: "D:\phpstudy_pro\WWW\vue-test\node_modules\_chromedriver@2.46.0@chromedriver"
ChromeDriver binary exists. Validating...
ChromeDriver 2.46.628402 (536cd7adbad73a3783fdc2cab92ab2ba7ec361e1)
ChromeDriver is already available at 'C:\Users\gorgage\AppData\Local\Temp\2.46\chromedriver\chromedriver.exe'.
Copying to target path D:\phpstudy_pro\WWW\vue-test\node_modules_chromedriver@2.46.0@chromedriver\lib\chromedriver
Done. ChromeDriver binary available at D:\phpstudy_pro\WWW\vue-test\node_modules_chromedriver@2.46.0@chromedriver\lib\chromedriver\chromedriver.exe
[2/4] scripts.install chromedriver@^2.27.2 finished in 3s
[3/4] scripts.postinstall babel-loader@7.1.5 › webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 run "node lib/post_install.js", root: "D:\phpstudy_pro\WWW\vue-test\node_modules\_uglifyjs-webpack-plugin@0.4.6@uglifyjs-webpack-plugin"
[3/4] scripts.postinstall babel-loader@7.1.5 › webpack@3.12.0 › uglifyjs-webpack-plugin@^0.4.6 finished in 103ms
[4/4] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 run "node ./postinstall.js", root: "D:\phpstudy_pro\WWW\vue-test\node_modules\_ejs@2.7.4@ejs"
Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)
[4/4] scripts.postinstall webpack-bundle-analyzer@2.13.1 › ejs@^2.5.7 finished in 105ms
√ Run 4 scripts
peerDependencies link ajv@5.5.2 in D:\phpstudy_pro\WWW\vue-test\node_modules_ajv-keywords@2.1.1@ajv-keywords unmet with D:\phpstudy_pro\WWW\vue-test\node_modules\ajv(6.11.0)
deprecate autoprefixer@7.2.6 › browserslist@^2.11.3 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate babel-core@6.26.3 › babel-register@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.
deprecate css-loader@0.28.11 › cssnano@3.10.0 › autoprefixer@6.7.7 › browserslist@^1.7.6 Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
deprecate extract-text-webpack-plugin@^3.0.0 Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
deprecate eslint@4.19.1 › file-entry-cache@2.0.0 › flat-cache@1.3.4 › circular-json@^0.3.1 CircularJSON is in maintenance only, flatted is its successor.
deprecate nightwatch@0.9.21 › mocha-nightwatch@3.2.2 › json3@3.3.2 Please use the native JSON object instead of JSON 3
deprecate nightwatch@0.9.21 › proxy-agent@2.0.0 › socks-proxy-agent@2.1.1 › socks@~1.1.5 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
deprecate jest@22.4.4 › jest-cli@22.4.4 › jest-environment-jsdom@22.4.3 › jsdom@11.12.0 › left-pad@^1.3.0 use String.prototype.padStart()
deprecate webpack-bundle-analyzer@2.13.1 › bfj-node4@^5.2.0 Switch to the bfj package for fixes and new features!
Recently updated (since 2020-01-25): 6 packages (detail see file D:\phpstudy_pro\WWW\vue-test\node_modules.recently_updates.txt)
√ All packages installed (1293 packages installed from npm registry, used 25s(network 21s), speed 123.84kB/s, json 1087(2.57MB), tarball 0B)
D:\phpstudy_pro\WWW\vue-test>
最后直接启动
D:\phpstudy_pro\WWW\vue-test>npm run dev
vue-test@1.0.0 dev D:\phpstudy_pro\WWW\vue-test
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
13% building modules 33/37 modules 4 active ...ue-test\src\components\HelloWorld.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
95% emitting
DONE Compiled successfully in 3536ms 下午9:21:27
I Your application is running here: http://localhost:8080
