腳手架篇
Vue CLI
官方創(chuàng)建項(xiàng)目的文檔
https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
安裝
npm install @vue/cli -g
# OR
yarn global add @vue/cli
檢查其版本
vue --version
快速原型開發(fā)
使用 vue serve 和 vue build 命令對(duì)單個(gè) *.vue 文件進(jìn)行快速原型開發(fā)（單獨(dú)跑一個(gè)組件看它的樣式和邏輯）
npm install -g @vue/cli-service-global
創(chuàng)建一個(gè)項(xiàng)目
命令行方式
vue create hello-world
? Please pick a preset: (Use arrow keys)
? default (babel, eslint)
Manually select features
選第二個(gè) 手動(dòng)安裝插件（空格可以選擇y/n 上下切換選項(xiàng)）
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
?? Babel //babel
? TypeScript
? Progressive Web App (PWA) Support
? Router //路由
? Vuex //信息存儲(chǔ)
? CSS Pre-processors //css 壓縮
? Linter / Formatter //格式校驗(yàn)
? Unit Testing
? E2E Testing
這里css壓縮推薦dart-sass 性能更好
ESLint 推薦Standard config 反璃，代碼格式的校驗(yàn)雖然不夠嚴(yán)格但是更友好
慌闭？Pick additional lint features:** (Press **** to select, **** to toggle all, **
**>** to invert selection) //校驗(yàn)代碼的時(shí)機(jī)怠缸？推薦在save的時(shí)候校驗(yàn)代碼恒界，不然在提交時(shí)候才校驗(yàn)可能會(huì)有大量報(bào)錯(cuò)
?? Lint on save
? Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) //這些構(gòu)建文件
? In dedicated config files //推薦在單獨(dú)的configfile 中配置忘古，以免backage.json 過長(zhǎng)
In package.json
Save this as a preset for future projects? //是否存儲(chǔ)本次創(chuàng)建項(xiàng)目的配置鳖枕，如果選擇y 下次再創(chuàng)建項(xiàng)目的時(shí)候則會(huì)看到你保存的初始化選項(xiàng)
如果在創(chuàng)建項(xiàng)目時(shí)選擇了默認(rèn)模式安裝蝶怔，參考官方文檔插件和preset手動(dòng)增加插件伟叛，最好還是一開始就配置好勃教。
Preset
一個(gè) Vue CLI preset 是一個(gè)包含創(chuàng)建新項(xiàng)目所需預(yù)定義選項(xiàng)和插件的 JSON 對(duì)象淤击，讓用戶無(wú)需在命令提示中選擇它們。
在 vue create 過程中保存的 preset 會(huì)被放在你的 home 目錄下的一個(gè)配置文件中 (~/.vuerc)故源。你可以通過直接編輯這個(gè)文件來(lái)調(diào)整污抬、添加、刪除保存好的 preset。
vue ui 安裝
執(zhí)行vue ui 可以使用圖形界面初始化項(xiàng)目
安裝后的配置界面（儀表盤）
http://localhost:8000/dashboard
vue ui
執(zhí)行vue ui 可以使用圖形界面初始化項(xiàng)目
Babel+Router+CSS+Router+Linter
webpack相關(guān)
開發(fā)中的一些高級(jí)配置方法：官方文檔印机。
簡(jiǎn)單的配置方法可以參考官網(wǎng)配置參考中的內(nèi)容：
https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
幾個(gè)比較常用的配置：
- baseurl路徑的配置（3.0改叫publicpath了）配置開發(fā)/正式環(huán)境的網(wǎng)站目錄https://cli.vuejs.org/zh/config/#publicpath矢腻。
- devServer 啟動(dòng)一個(gè)代理服務(wù)器，防止本地調(diào)試的跨端端問題射赛。
- productionSourceMap 設(shè)置成false 多柑，生產(chǎn)環(huán)境就不會(huì)生成sourcemap 加速生產(chǎn)環(huán)境的構(gòu)建。
你可以將其輸出重定向到一個(gè)文件以便進(jìn)行查閱：
vue inspect > output.js
Vue 工程目錄
- package.json:
管理著項(xiàng)目中的所有的依賴和命令楣责； - babel.config.js:
配置整個(gè)項(xiàng)目中的es6的語(yǔ)法竣灌，定制化添加babel的屬性； - eslintrc.js:
配置許多eslint擴(kuò)展的語(yǔ)法腐魂，和一些基本法則帐偎；
