当后端有了强大的接口，需要展示在前端时，就需要考虑怎么将接口数据显示在前端了。那我们就需要一个靠谱的前端编辑器了。虽然掌握了编程语言，什么编辑器都可以，但是还是要选择一个顺手的，这样至少顺心吧。

上网一搜，前端vue编程用什么编辑器好，基本都是推荐 webStrom和vs code 想了想现在用idea比较多，而且电脑128g，目前只剩下可用的22g左右了。程序越少安装，越兼容越好。然后就决定用idea试下。

接着就是一系列让人崩溃的事情发生了，现在终于明白为什么研发同学有的头发长有的头发短了。好了，废话不说，开始搭建vue开发环境吧。

首先，电脑中需要安装一个idea程序。什么，你没装，那赶紧去 https://www.jetbrains.com/idea/ 下载安装吧。

然后，按照网上教程，需要在 idea的 插件 plugins中下载 vue.js

就这步，我差点把自己的头发给全抓扯下来。为什么呢，我的idea是2019.1.3版本的，在Marketplace中就没有搜索到vue或者vue.js或者其他。怎么办呢，就凭着自己的感觉乱七八糟下载了一通和vue有关的。然后重启，然而还是没用。上网继续查，原来有两种方法在idea中安装vue插件。第二种方法是，可以去vue官网上下载vue的插件包，一般都是zip的。然后解压缩后，将vue.js插件包复制到idea的content->plugins包中即可。

那我们赶紧试下吧。操作完后，打开idea的plugins处，终于看到vue.js了，瞬间开心激动起来。但是后面标注的字让我瞬间发难。

null
null

标红的意思，根据我英语3级的初步了解，应该是说要想用vue.js， 还需要安装JavaScript和com.xxxx.css包。然后在idea的plugins中查找了一番，发现根本没有！！！

然后再上网查，发现就没什么可用的资料了。在找这些资料的时候，我就不断的抓自己的头发，真是痛苦啊，为什么自己的idea和网上说的不一样呢？

在终端上一顿操作，什么vue-cli脚手架，什么vue项目，都安装了，但是这个红字就是取消不了。

拉倒吧！算了吧！什么破玩意，还是那句老话，听人劝吃饱饭，就乖乖的下载webStrom或者vs code算了。折腾了一天也没有解决一点问题。都说磨刀不误砍柴工，但是你斧子都没有，砍个毛呢。

来吧，开始下载vs code吧

首先，需要去官网下载vs code https://code.visualstudio.com/

下载你需要的版本，然后一直next就可以了。我这边说的都是mac系统的，winodws的可以暂时不用看了

然后安装打开，可以按照这个网页上的来一步步的操作

https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

一般电脑上都有chrome和firefox浏览器，需要安装下插件，直接点击

Debugger for Chrome和 Debugger for Firefox 然后跳转到vs code 编辑器里去安装就可以了。

http://roc.havemail.cn/archives/194.html#environment

参考这个网页，在创建vue的新程序时，会进行检查。需要先安装node 和 npm

在vs code的命令行中创建第一个 vue

ligangdeMacBook-Pro:~ lg$ vue create hello-word

回车后，提示: vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
You may want to run the following to upgrade to Vue CLI 3:

npm uninstall -g vue-cli
npm install -g @vue/cli

然后在终端中先运行 **npm uninstall -g vue-cli
**

**(base) ligangdeMacBook-Pro:~ lg$ npm uninstall -g vue-cli
removed 238 packages in 2.354s
**

然后运行 npm install -g @vue/cli

就一直等待就好了

通过安装vue的编辑环境，终于彻底的理解了听人劝吃饱饭，不听老人言吃亏在眼前等名家名句。希望对有志于从事前端的朋友提供帮助。

好了，今天就到这里吧！

http://roc.havemail.cn/archives/194.html#environment

最好是安装完vs code后，就按照上面的网页来配置，不要从cdsn上去查，太多垃圾写的垃圾文章了！

(base) ligangdeMacBook-Pro:~ lg$ npm install -g cnpm --registry=https://registry.npm.taobao.org
/usr/local/bin/cnpm -> /usr/local/lib/node_modules/cnpm/bin/cnpm
+ cnpm@6.1.1
updated 1 package in 12.748s
(base) ligangdeMacBook-Pro:~ lg$ cnpm install vue
✔ Installed 1 packages
✔ Linked 0 latest versions
✔ Run 0 scripts
✔ All packages installed (1 packages installed from npm registry, used 886ms(network 885ms), speed 965.52kB/s, json 1(29.27kB), tarball 825.22kB)
(base) ligangdeMacBook-Pro:~ lg$ cnpm install -g @vue/cli
Downloading @vue/cli to /usr/local/lib/node_modules/@vue/cli_tmp
Copying /usr/local/lib/node_modules/@vue/clitmp/@vue_cli@4.4.4@@vue/cli to /usr/local/lib/node_modules/@vue/cli
Installing @vue/cli's dependencies to /usr/local/lib/node_modules/@vue/cli/node_modules
[1/32] commander@^2.20.0 installed at node_modules/_commander@2.20.3@commander
[2/32] deepmerge@^4.2.2 installed at node_modules/_deepmerge@4.2.2@deepmerge
[3/32] @vue/cli-ui-addon-widgets@^4.4.4 installed at nodemodules/@vue_cli-ui-addon-widgets@4.4.4@@vue/cli-ui-addon-widgets
[4/32] debug@^4.1.0 installed at node_modules/_debug@4.1.1@debug
[5/32] ejs@^2.7.1 installed at node_modules/_ejs@2.7.4@ejs
[6/32] @vue/cli-ui-addon-webpack@^4.4.4 installed at nodemodules/@vue_cli-ui-addon-webpack@4.4.4@@vue/cli-ui-addon-webpack
[7/32] envinfo@^7.5.1 installed at node_modules/_envinfo@7.5.1@envinfo
[8/32] cmd-shim@^3.0.3 installed at node_modules/_cmd-shim@3.0.3@cmd-shim
[9/32] isbinaryfile@^4.0.6 installed at node_modules/_isbinaryfile@4.0.6@isbinaryfile
[10/32] fs-extra@^7.0.1 installed at node_modules/_fs-extra@7.0.1@fs-extra
[11/32] javascript-stringify@^1.6.0 installed at node_modules/_javascript-stringify@1.6.0@javascript-stringify
[12/32] boxen@^4.1.0 installed at node_modules/_boxen@4.2.0@boxen
[13/32] leven@^3.1.0 installed at node_modules/_leven@3.1.0@leven
[14/32] lru-cache@^5.1.1 existed at node_modules/_lru-cache@5.1.1@lru-cache
[15/32] minimist@^1.2.5 existed at node_modules/_minimist@1.2.5@minimist
[16/32] import-global@^0.1.0 installed at node_modules/_import-global@0.1.0@import-global
[17/32] resolve@^1.17.0 existed at node_modules/_resolve@1.17.0@resolve
[18/32] lodash.clonedeep@^4.5.0 installed at node_modules/_lodash.clonedeep@4.5.0@lodash.clonedeep
[19/32] slash@^3.0.0 installed at node_modules/_slash@3.0.0@slash
[20/32] @vue/cli-shared-utils@^4.4.4 installed at nodemodules/@vue_cli-shared-utils@4.4.4@@vue/cli-shared-utils
[21/32] shortid@^2.2.15 installed at node_modules/_shortid@2.2.15@shortid
[22/32] recast@^0.18.8 installed at node_modules/_recast@0.18.10@recast
[23/32] js-yaml@^3.13.1 installed at node_modules/_js-yaml@3.14.0@js-yaml
[24/32] download-git-repo@^3.0.2 installed at node_modules/_download-git-repo@3.0.2@download-git-repo
[25/32] validate-npm-package-name@^3.0.0 installed at node_modules/_validate-npm-package-name@3.0.0@validate-npm-package-name
[26/32] yaml-front-matter@^3.4.1 installed at node_modules/_yaml-front-matter@3.4.1@yaml-front-matter
[27/32] vue@^2.6.11 installed at node_modules/_vue@2.6.11@vue
[28/32] jscodeshift@^0.9.0 installed at node_modules/_jscodeshift@0.9.0@jscodeshift
[29/32] globby@^9.2.0 installed at node_modules/_globby@9.2.0@globby
[30/32] vue-jscodeshift-adapter@^2.1.0 installed at node_modules/_vue-jscodeshift-adapter@2.1.0@vue-jscodeshift-adapter
fsevents@1.2.13 download from binary mirror: {"host":"https://cdn.npm.taobao.org/dist/fsevents"}
[31/32] inquirer@^7.1.0 installed at node_modules/_inquirer@7.2.0@inquirer
[32/32] @vue/cli-ui@^4.4.4 installed at nodemodules/@vue_cli-ui@4.4.4@@vue/cli-ui
execute post install 5 scripts...
[1/5] scripts.postinstall ejs@^2.7.1 run "node ./postinstall.js", root: "/usr/local/lib/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 144ms
[2/5] scripts.postinstall @vue/cli-ui@4.4.4 › apollo-server-express@2.15.0 › apollo-server-types@0.5.0 › apollo-engine-reporting-protobuf@0.5.1 › @apollo/protobufjs@^1.0.3 run "node scripts/postinstall", root: "/usr/local/lib/node_modules/@vue/cli/nodemodules/@apollo_protobufjs@1.0.4@@apollo/protobufjs"
[2/5] scripts.postinstall @vue/cli-ui@4.4.4 › apollo-server-express@2.15.0 › apollo-server-types@0.5.0 › apollo-engine-reporting-protobuf@0.5.1 › @apollo/protobufjs@^1.0.3 finished in 83ms
[3/5] scripts.install @vue/cli-ui@4.4.4 › vue-cli-plugin-apollo@0.21.3 › nodemon@1.19.4 › chokidar@2.1.8 › fsevents@^1.2.7 run "node install.js", root: "/usr/local/lib/node_modules/@vue/cli/node_modules/_fsevents@1.2.13@fsevents"
gyp http GET https://npm.taobao.org/mirrors/node/v12.18.1/node-v12.18.1-headers.tar.gz
gyp http 200 https://npm.taobao.org/mirrors/node/v12.18.1/node-v12.18.1-headers.tar.gz
gyp http GET https://npm.taobao.org/mirrors/node/v12.18.1/SHASUMS256.txt
gyp http 200 https://npm.taobao.org/mirrors/node/v12.18.1/SHASUMS256.txt
SOLINK_MODULE(target) Release/.node
CXX(target) Release/obj.target/fse/fsevents.o
SOLINK_MODULE(target) Release/fse.node
ld: warning: text-based stub file /System/Library/Frameworks//CoreServices.framework/CoreServices.tbd and library file /System/Library/Frameworks//CoreServices.framework/CoreServices are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks//CFNetwork.framework/Versions/A/CFNetwork.tbd and library file /System/Library/Frameworks//CFNetwork.framework/Versions/A/CFNetwork are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/OSServices.framework/Versions/A/OSServices.tbd and library file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/OSServices.framework/Versions/A/OSServices are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/LaunchServices.tbd and library file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/LaunchServices.framework/Versions/A/LaunchServices are out of sync. Falling back to library file for linking.
ld: warning: text-based stub file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/SharedFileList.framework/Versions/A/SharedFileList.tbd and library file /System/Library/Frameworks/CoreServices.framework/Versions/A/Frameworks/SharedFileList.framework/Versions/A/SharedFileList are out of sync. Falling back to library file for linking.
[3/5] scripts.install @vue/cli-ui@4.4.4 › vue-cli-plugin-apollo@0.21.3 › nodemon@1.19.4 › chokidar@2.1.8 › fsevents@^1.2.7 finished in 6s
[4/5] scripts.postinstall @vue/cli-ui@4.4.4 › apollo-server-express@2.15.0 › apollo-server-core@2.15.0 › @apollographql/apollo-tools@0.4.8 › apollo-env@0.6.5 › core-js@^3.0.1 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "/usr/local/lib/node_modules/@vue/cli/node_modules/_core-js@3.6.5@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 -)

[4/5] scripts.postinstall @vue/cli-ui@4.4.4 › apollo-server-express@2.15.0 › apollo-server-core@2.15.0 › @apollographql/apollo-tools@0.4.8 › apollo-env@0.6.5 › core-js@^3.0.1 finished in 162ms
[5/5] scripts.postinstall @vue/cli-ui@4.4.4 › vue-cli-plugin-apollo@0.21.3 › nodemon@^1.19.4 run "node bin/postinstall || exit 0", root: "/usr/local/lib/node_modules/@vue/cli/node_modules/_nodemon@1.19.4@nodemon"
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate

[5/5] scripts.postinstall @vue/cli-ui@4.4.4 › vue-cli-plugin-apollo@0.21.3 › nodemon@^1.19.4 finished in 301ms
peerDependencies WARNING jscodeshift@^0.9.0 requires a peer of @babel/preset-env@^7.1.6 but none was installed
anti semver @vue/cli-ui@4.4.4 › apollo-server-express@2.15.0 › @types/cors@2.8.6 › @types/express@* delcares @types/express@(resolved as 4.17.6) but using ancestor(apollo-server-express)'s dependency @types/express@4.17.4(resolved as 4.17.4)
anti semver @vue/cli-ui@4.4.4 › apollo-server-express@2.15.0 › apollo-server-core@2.15.0 › @types/graphql-upload@8.0.3 › @types/express@ delcares @types/express@(resolved as 4.17.6) but using ancestor(apollo-server-express)'s dependency @types/express@4.17.4(resolved as 4.17.4)
anti semver @vue/cli-ui@4.4.4 › apollo-server-express@2.15.0 › apollo-server-core@2.15.0 › @types/graphql-upload@8.0.3 › @types/koa@2.11.3 › @types/cookies@0.7.4 › @types/express@ delcares @types/express@*(resolved as 4.17.6) but using ancestor(apollo-server-express)'s dependency @types/express@4.17.4(resolved as 4.17.4)
deprecate @vue/cli-ui@4.4.4 › vue-cli-plugin-apollo@0.21.3 › nodemon@1.19.4 › chokidar@^2.1.8 Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
Recently updated (since 2020-06-15): 26 packages (detail see file /usr/local/lib/node_modules/@vue/cli/node_modules/.recently_updates.txt)
2020-06-20
→ @vue/cli-shared-utils@4.4.4 › read-pkg@5.2.0 › parse-json@5.0.0 › @babel/code-frame@^7.0.0(7.10.3) (04:54:25)
→ @vue/cli-shared-utils@4.4.4 › read-pkg@5.2.0 › parse-json@5.0.0 › @babel/code-frame@7.10.3 › @babel/highlight@^7.10.3(7.10.3) (04:54:16)
→ @vue/cli-shared-utils@4.4.4 › read-pkg@5.2.0 › parse-json@5.0.0 › @babel/code-frame@7.10.3 › @babel/highlight@7.10.3 › @babel/helper-validator-identifier@^7.10.3(7.10.3) (04:54:07)
→ jscodeshift@0.9.0 › @babel/plugin-proposal-optional-chaining@^7.1.0(7.10.3) (04:54:21)
→ jscodeshift@0.9.0 › @babel/register@^7.0.0(7.10.3) (04:54:08)
→ jscodeshift@0.9.0 › @babel/core@^7.1.6(7.10.3) (04:54:50)
→ jscodeshift@0.9.0 › @babel/parser@^7.1.6(7.10.3) (04:54:08)
→ jscodeshift@0.9.0 › @babel/plugin-proposal-nullish-coalescing-operator@7.10.1 › @babel/helper-plugin-utils@^7.10.1(7.10.3) (04:54:08)
→ jscodeshift@0.9.0 › @babel/plugin-proposal-class-properties@7.10.1 › @babel/helper-create-class-features-plugin@^7.10.1(7.10.3) (04:54:42)
→ jscodeshift@0.9.0 › @babel/preset-typescript@7.10.1 › @babel/plugin-transform-typescript@^7.10.1(7.10.3) (04:54:45)
→ jscodeshift@0.9.0 › @babel/core@7.10.3 › @babel/template@^7.10.3(7.10.3) (04:54:32)
→ jscodeshift@0.9.0 › @babel/core@7.10.3 › @babel/generator@^7.10.3(7.10.3) (04:54:26)
→ jscodeshift@0.9.0 › @babel/core@7.10.3 › @babel/traverse@^7.10.3(7.10.3) (04:54:42)
→ jscodeshift@0.9.0 › @babel/core@7.10.3 › @babel/types@^7.10.3(7.10.3) (04:54:17)
→ jscodeshift@0.9.0 › @babel/plugin-proposal-class-properties@7.10.1 › @babel/helper-create-class-features-plugin@7.10.3 › @babel/helper-function-name@^7.10.3(7.10.3) (04:54:37)
→ jscodeshift@0.9.0 › @babel/plugin-proposal-class-properties@7.10.1 › @babel/helper-create-class-features-plugin@7.10.3 › @babel/helper-optimise-call-expression@^7.10.3(7.10.3) (04:54:32)
→ jscodeshift@0.9.0 › @babel/plugin-proposal-class-properties@7.10.1 › @babel/helper-create-class-features-plugin@7.10.3 › @babel/helper-member-expression-to-functions@^7.10.3(7.10.3) (04:54:30)
→ jscodeshift@0.9.0 › @babel/plugin-transform-modules-commonjs@7.10.1 › @babel/helper-module-transforms@7.10.1 › @babel/helper-module-imports@^7.10.1(7.10.3) (04:54:31)
→ jscodeshift@0.9.0 › @babel/plugin-proposal-class-properties@7.10.1 › @babel/helper-create-class-features-plugin@7.10.3 › @babel/helper-function-name@7.10.3 › @babel/helper-get-function-arity@^7.10.3(7.10.3) (04:54:29)
→ @vue/cli-ui@4.4.4 › vue-cli-plugin-apollo@0.21.3 › apollo-upload-client@11.0.0 › @babel/runtime@^7.5.4(7.10.3) (04:54:16)
→ @vue/cli-ui@4.4.4 › vue-cli-plugin-apollo@0.21.3 › apollo@2.28.3 › apollo-codegen-core@0.37.3 › apollo-language-server@1.22.3 › @endemolshinegroup/cosmiconfig-typescript-loader@^1.0.0(1.0.2) (21:27:36)
2020-06-19
→ @vue/cli-ui@4.4.4 › apollo-server-express@2.15.0 › apollo-server-types@0.5.0 › apollo-server-env@2.4.4 › util.promisify@1.0.1 › es-abstract@1.17.6 › object-inspect@^1.7.0(1.8.0) (14:05:34)
→ @vue/cli-ui@4.4.4 › vue-cli-plugin-apollo@0.21.3 › apollo@2.28.3 › @oclif/plugin-autocomplete@0.2.0 › moment@^2.22.1(2.27.0) (06:00:56)
2020-06-18
→ @vue/cli-ui@4.4.4 › apollo-server-express@^2.13.1(2.15.0) (01:25:26)
→ @vue/cli-ui@4.4.4 › apollo-server-express@2.15.0 › apollo-server-core@^2.15.0(2.15.0) (01:25:23)
→ @vue/cli-ui@4.4.4 › apollo-server-express@2.15.0 › apollo-server-core@2.15.0 › apollo-engine-reporting@^2.2.0(2.2.0) (01:25:18)
All packages installed (968 packages installed from npm registry, used 19s(network 11s), speed 3.28MB/s, json 838(2.17MB), tarball 34.51MB)
[@vue/cli@4.4.4] link /usr/local/bin/vue@ -> /usr/local/lib/node_modules/@vue/cli/bin/vue.js
(base) ligangdeMacBook-Pro:~ lg$ vue --version
@vue/cli 4.4.4
(base) ligangdeMacBook-Pro:~ lg$