这篇主要是给自己看看，怕遇到什么情况忘了
前置准备：
- 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
如上所示，从第四个开始设置的东西依次是
- Vue Build ：直接回车会比较好
- 是否安装 Vue 路由组件（后来发现做项目的时候是需要的）：YES
- 是否需要 ESLint 来规范你的代码
- 是否安装 Karma + Mocha 测试？
- 是否用 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
