一、創(chuàng)建項(xiàng)目
1、語(yǔ)法格式
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n3" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">vue create <項(xiàng)目名></pre>
注意: 項(xiàng)目名 不支持駝峰（含大寫(xiě)字母）
建議使用 使用全部小寫(xiě)字母跟字母之間使用短橫線
2、栗子
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n7" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">vue create vue-example</pre>
二、選項(xiàng)信息
1、預(yù)設(shè)配置
如果之前有創(chuàng)建過(guò)項(xiàng)目并保存了配置 會(huì)提示多出一個(gè)預(yù)設(shè)的配置選項(xiàng)
2、默認(rèn)設(shè)置
default（babel，eslint）
默認(rèn)設(shè)置（直接enter）非常適合快速創(chuàng)建一個(gè)新項(xiàng)目的原型，沒(méi)有帶任何輔助功能的 npm包
3、自定義配置
Manually select features
提供可選的包的信息
三、自定義配置
1、說(shuō)明
命令行創(chuàng)建項(xiàng)目需要用:
方向鍵選擇相關(guān)選項(xiàng),回車(chē)進(jìn)入下一級(jí)
空格鍵 選擇/取消選擇
A鍵全選/取消全選
2、選項(xiàng)概要
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n30" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">>( ) Babel //轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。
( ) TypeScript// TypeScript是一個(gè)JavaScript包含并擴(kuò)展了JavaScript的語(yǔ)法，需要被編譯輸出為 JavaScript在瀏覽器運(yùn)行
( ) Progressive Web App (PWA) Support// 漸進(jìn)式Web應(yīng)用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的狀態(tài)管理模式）
( ) CSS Pre-processors // CSS 預(yù)處理器（如：less、sass）
( ) Linter / Formatter // 代碼風(fēng)格檢查和格式化（如：ESlint）
( ) Unit Testing // 單元測(cè)試（unit tests）
( ) E2E Testing //（end to end） 測(cè)試</pre>
3、Babel
轉(zhuǎn)化器, 可以將ES6代碼轉(zhuǎn)為ES5代碼
4、Router
是否使用history router
-
hash
默認(rèn)值,瀏覽器url址欄中帶#符號(hào)
-
history
單頁(yè)客戶(hù)端應(yīng)用(比如移動(dòng)端應(yīng)用)
5、Vuex
vue的狀態(tài)管理
6、Progressive Web App (PWA) Support
PWA全稱(chēng)Progressive Web App，直譯是漸進(jìn)式WEB應(yīng)用
7、預(yù)處理器
主要為css解決瀏覽器兼容、簡(jiǎn)化CSS代碼等問(wèn)題（Sass誕生于2007年，最早也是最成熟的一款CSS預(yù)處理器語(yǔ)言）
選擇一個(gè)你熟悉的預(yù)編譯語(yǔ)言(LESS)
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="csharp" cid="n49" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
//Sass安裝需要Ruby環(huán)境，是在服務(wù)端處理的，SCSS 是 Sass3新語(yǔ)法（完全兼容 CSS3且繼承Sass功能）
SCSS/SASS
//Less最終會(huì)通過(guò)編譯處理輸出css到瀏覽器，Less 既可以在客戶(hù)端上運(yùn)行，也可在服務(wù)端運(yùn)行 (借助 Node.js)
LESS
//Stylus主要用來(lái)給Node項(xiàng)目進(jìn)行CSS預(yù)處理支持，Stylus功能上更為強(qiáng)壯，和js聯(lián)系更加緊密，可創(chuàng)建健壯的、動(dòng)態(tài)的的CSS。
Stylus</pre>
8、ESLint
提供一個(gè)插件化的javascript代碼檢測(cè)工具(新手不建議開(kāi)啟)
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="dart" cid="n52" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">? Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier</pre>
9、檢測(cè)時(shí)機(jī)
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="csharp" cid="n54" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
// 保存就檢測(cè)
( ) Lint on save
// fix和commit時(shí)候檢查
( ) Lint and fix on commit </pre>
9、單元測(cè)試
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="cpp" cid="n56" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">? Pick a unit testing solution: (Use arrow keys)
//mocha靈活,只提供簡(jiǎn)單的測(cè)試結(jié)構(gòu)，如果需要其他功能需要添加其他庫(kù)/插件完成。必須在全局環(huán)境中安裝
Mocha + Chai
//安裝配置簡(jiǎn)單，容易上手。內(nèi)置Istanbul，可以查看到測(cè)試覆蓋率，相較于Mocha:配置簡(jiǎn)潔、測(cè)試代碼簡(jiǎn)潔、易于和babel集成、內(nèi)置豐富的expect
Jest</pre>
10、存放配置的路徑
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="java" cid="n58" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
// 獨(dú)立文件放置
In dedicated config files
// 放package.json里
In package.json</pre>
11、是否保存本次配置
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="kotlin" cid="n60" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">// y:記錄本次配置，然后需要你起個(gè)名; n：不記錄本次配置
? Save this as a preset for future projects? (Y/n) </pre>
