如果不了解vue,請(qǐng)先閱讀vue中文官方文檔静盅。
手腳架創(chuàng)建vue項(xiàng)目
// 安裝手腳架
npm install -g @vue/cli
# OR
yarn global add @vue/cli
// 查看手腳架版本
vue --version
// 創(chuàng)建項(xiàng)目
vue create 項(xiàng)目名稱(chēng)
終端直接報(bào)錯(cuò)，提示如下：
bogon:~ jing$ vue create myPro_vue
Invalid project name: "myPro_vue"
Warning: name can no longer contain capital letters
報(bào)錯(cuò)信息指出項(xiàng)目名稱(chēng)不能出現(xiàn)大寫(xiě)字母豪治，注意項(xiàng)目名命規(guī)則叼丑。項(xiàng)目名稱(chēng)注意要使用小寫(xiě)字母，'_'或是'-'分割
// 創(chuàng)建項(xiàng)目
vue create mypro_vue
使用腳手架命令行創(chuàng)建vue項(xiàng)目陆赋，具體操作步驟如下：
這里提示我們沐祷，需要先選擇一個(gè)預(yù)先裝置嚷闭。
第一項(xiàng)是你的項(xiàng)目模板，包含了基本的 stylus, babel, router, vuex, eslint, unit-jest 設(shè)置的 preset赖临；
第二項(xiàng)是默認(rèn)方式創(chuàng)建vue項(xiàng)目模板胞锰，包含了基本的 Babel + ESLint 設(shè)置的 preset；
第三項(xiàng)是手動(dòng)選擇功能創(chuàng)建vue項(xiàng)目兢榨，手動(dòng)選擇特性”來(lái)選取需要的特性嗅榕；
使用鍵盤(pán)↑或↓來(lái)選擇你需要的模板，按回車(chē)鍵確認(rèn)吵聪，這里我選擇第三項(xiàng)手動(dòng)模式凌那。
這個(gè)默認(rèn)的設(shè)置非常適合快速創(chuàng)建一個(gè)新項(xiàng)目的原型，而手動(dòng)設(shè)置則提供了更多的選項(xiàng)暖璧，可以根據(jù)項(xiàng)目需求選擇你需要安裝的依賴包案怯。
// Babel 是一個(gè) JavaScript 編譯器,用于代碼編譯
? Babel
// ts腳本
? TypeScript
// 漸進(jìn)式WEB應(yīng)用,在網(wǎng)頁(yè)應(yīng)用中實(shí)現(xiàn)和原生應(yīng)用相近的用戶體驗(yàn)
? Progressive Web App (PWA) Support
// vue的路由
? Router
// vue的狀態(tài)管理模式
? Vuex
// css樣式預(yù)處理
? CSS Pre-processors
// 代碼風(fēng)格，格式校驗(yàn)
? Linter / Formatter
// 單元測(cè)試澎办，站在程序員的角度測(cè)試
? Unit Testing
// 端到端測(cè)試嘲碱，站在用戶角度的測(cè)試
? E2E Testing
這里根據(jù)需求選擇了Babel, Router, Vuex, Linter，按回車(chē)鍵進(jìn)入下一步局蚀。
// 由于添加了路由麦锯，這里需要選擇使用歷史路由模式`history路由需要依賴運(yùn)維`, 根據(jù)需求選擇。
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
這里選擇了n琅绅，放棄歷史路由模式扶欣，采用哈希路由模式。
下面選擇代碼風(fēng)格千扶、格式 選擇嚴(yán)格模式
? Pick a linter / formatter config: (Use arrow keys)
// 只進(jìn)行報(bào)錯(cuò)提示
ESLint with error prevention only
// Airbnb配置
ESLint + Airbnb config
// 標(biāo)準(zhǔn)配置
ESLint + Standard config
// 嚴(yán)格模式
ESLint + Prettier
選擇校驗(yàn)時(shí)料祠，一般都會(huì)選擇保存時(shí)校驗(yàn)，好及時(shí)做出調(diào)整澎羞。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
// 保存時(shí)檢查
Lint on save
// 提交時(shí)檢查
Lint and fix on commit
選擇Babel,PostCSS, ESLint等自定義配置的存放位置髓绽。這里選擇第一個(gè)放在專(zhuān)用文件，方便管理妆绞。
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
// 存放在專(zhuān)用配置文件中
In dedicated config files
// 存放在package.json中
In package.json
是否保存當(dāng)前選擇的配置項(xiàng)顺呕，如果當(dāng)前配置是經(jīng)常用到的配置，建議選擇y存儲(chǔ)一下當(dāng)前配置項(xiàng)括饶。如果只是臨時(shí)使用的話就不需要存儲(chǔ)了株茶，根據(jù)自己情況而定。
? Save this as a preset for future projects? (y/N)
以上一系列選擇之后图焰，項(xiàng)目就會(huì)自動(dòng)創(chuàng)建并且安裝依賴启盛。
cd mypro_vue
npm run serve
