Vue+VScode环境配置

这篇主要是给自己看看，怕遇到什么情况忘了

前置准备：

• Node.js安装
• npm配置
• cnpm（淘宝源配置）webpack、vue-cli 安装并建立项目
  
• vscode相关配置
  

前两项就不讲了,我们从cpm开始

cnpm,webpack,vue-cli 安装

//淘宝源
npm install –g cnpm --registry=https://registry.npm.taobao.org
//webpack
cnpm install webpack –g
//vue-cli
cnpm install vue-cli –g

新建项目尝试

可以自己创建一个文件夹存放关于 Vue 文件夹如d:\codes\VueProject

输入的指令为vue init webpack test1，会新建一个 test1 的项目

建立项目的时候会进行初始化配置：

vue.png

如上所示，从第四个开始设置的东西依次是

1. Vue Build ：直接回车会比较好
2. 是否安装 Vue 路由组件（后来发现做项目的时候是需要的）：YES
3. 是否需要 ESLint 来规范你的代码
4. 是否安装 Karma + Mocha 测试？
5. 是否用 NightWatch 实现端到端的测试？

新建完成和运行

以下是目录结构：
（这里之后会出另外一篇博客探索，立个flag）

目录结构.png

如何运行？在命令行中输入cnpm run dev运行，可以看到这样的页面：

hello.png

VSCode 配置

主要是安装两个扩展：

• Vetur (VScode 上 Vue 工具)
• ESLint (规范代码工具)

在用户设置中，加入以下代码进行配置：

  "eslint.validate": [
        "javascript",
        "javascriptreact",
         {
             "language": "vue",
             "autoFix": true
         }
    ],
    "eslint.autoFixOnSave": true,
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "vetur.format.defaultFormatter.html": "prettier",
    "editor.formatOnSave": true,
    "editor.tabSize": 2,

参考资料

这篇可以让你看懂 VSCode 的具体配置:
https://segmentfault.com/a/1190000014785115
这篇有关于Node.js配置的，而且过程比我的具体：
https://blog.csdn.net/junshangshui/article/details/80376489