這篇主要是給自己看看萍摊，怕遇到什么情況忘了
前置準(zhǔn)備：
- Node.js安裝
- npm配置
- cnpm（淘寶源配置）webpack挤茄、vue-cli 安裝并建立項(xiàng)目
- vscode相關(guān)配置
前兩項(xiàng)就不講了,我們從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
新建項(xiàng)目嘗試
可以自己創(chuàng)建一個(gè)文件夾存放關(guān)于 Vue 文件夾如d:\codes\VueProject
輸入的指令為vue init webpack test1，會(huì)新建一個(gè) test1 的項(xiàng)目
建立項(xiàng)目的時(shí)候會(huì)進(jìn)行初始化配置：
vue.png
如上所示冰木，從第四個(gè)開始設(shè)置的東西依次是
- Vue Build ：直接回車會(huì)比較好
- 是否安裝 Vue 路由組件（后來發(fā)現(xiàn)做項(xiàng)目的時(shí)候是需要的）：YES
- 是否需要 ESLint 來規(guī)范你的代碼
- 是否安裝 Karma + Mocha 測試穷劈？
- 是否用 NightWatch 實(shí)現(xiàn)端到端的測試笼恰？
新建完成和運(yùn)行
以下是目錄結(jié)構(gòu)：
（這里之后會(huì)出另外一篇博客探索，立個(gè)flag）
目錄結(jié)構(gòu).png
如何運(yùn)行歇终？在命令行中輸入cnpm run dev運(yùn)行社证，可以看到這樣的頁面：
hello.png
VSCode 配置
主要是安裝兩個(gè)擴(kuò)展：
- Vetur (VScode 上 Vue 工具)
- ESLint (規(guī)范代碼工具)
在用戶設(shè)置中，加入以下代碼進(jìn)行配置：
"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
這篇有關(guān)于Node.js配置的评凝，而且過程比我的具體：
https://blog.csdn.net/junshangshui/article/details/80376489
