VUE 兩種創(chuàng)建項目詳解
一、Vue init webpack 創(chuàng)建項目選項詳解
一、Project name :項目名稱，如果不需要就直接回車。注：此處項目名不能使用大寫。
二、Project description:項目描述，直接回車
三、Author ：作者
四、vue build 構(gòu)建方式（暫且這么解釋）
兩個選擇（上下箭頭選擇，回車即為選定）(是使用閹割版的vue還是使用完整版的vue 第一個是完整版的 第二個是閹割版的)
1.Runtime + Compiler:recommended for most users
(譯：運(yùn)行+編譯：被推薦給大多數(shù)用戶)
2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
allowed in .vue files-render functions are required elsewhere
(譯：只運(yùn)行大約6KB比較輕量的壓縮文件，但只允許模板（或任何VUE特定HTML）。VUE文件需要在其他地方呈現(xiàn)函數(shù)。翻譯不精準(zhǔn)，意思大概是選擇該構(gòu)建方式對文件大小有要求)
這里推薦使用1選項，適合大多數(shù)用戶的
五、install vue-router？是否安裝vue的路由插件，需要就選y，否則就n（以下均遵循此方法）
六、Use ESLint to lint your code?是否使用ESLint檢測你的代碼？
?。‥SLint 是一個語法規(guī)則和代碼風(fēng)格的檢查工具，可以用來保證寫出語法正確、風(fēng)格統(tǒng)一的代碼。）
七、Pick an ESLint preset:選擇分支風(fēng)格
選項有三個
1.standard(https://github.com/feross/standard) js的標(biāo)準(zhǔn)風(fēng)格
2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法，這個github地址說是JavaScript最合理的方法
3.none (configure it yourself) 自己配置
八、Set up unit tests? 是否安裝單元測試（暫不詳細(xì)介紹）
Pick a test runner 選擇一個單元測試運(yùn)行器
選項有三個
1.Jest（Jest是由Facebook發(fā)布的開源的、基于Jasmine的JavaScript單元測試框架）
2.Karma and Mocha
3.none
九、Setup e2e tests with Nightwatch(Y/n)?是否安裝E2E測試框架NightWatch（E2E，也就是End To End，就是所謂的“用戶真實場景”。）
Should we run ‘npm install’ for you after the project has been created?(譯：項目創(chuàng)建后是否要為你運(yùn)行“npm install”?這里選擇包管理工具)
選項有三個
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(自己配置安裝包)
二：Vue create project 創(chuàng)建項目選項詳解
1.default (babel, eslint)默認(rèn)套餐，提供babel和eslint支持
Manually select features自己去選擇需要的功能，提供更多的特性選擇。比如如果想要支持 TypeScript ，就應(yīng)該選擇這一項。
可以使用上下方向鍵來切換選項。如果只需要 babel 和 eslint 支持，那么選擇第一項，就完事了，靜靜等待 vue 初始化項目。
vue-cli 內(nèi)置支持了8個功能特性，可以多選：使用方向鍵在特性選項之間切換，使用空格鍵選中當(dāng)前特性，使用 a 鍵切換選擇所有，使用 i 鍵翻轉(zhuǎn)選項。
2.Use class-style component syntax? (Y/n)：是否使用class風(fēng)格的組件語法 yes
Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) 是否使用babel做轉(zhuǎn)義 yes
3.TypeScript 支持使用 TypeScript 書寫源碼
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Use history mode for router? (Requires proper server setup for index fallback in production) 詢問項目的路由模式是否使用History Yes
Vuex 支持 vuex 。
4.CSS Pre-processors 支持 CSS 預(yù)處理器。
Sass/SCSS（with dart-sass）是用 node(調(diào)用 cpp 編寫的 libsass)來編譯 sass，dart-sass 性能更好（也是 sass 官方使用的）
Sass/SCSS（with node-sass）是用 drat VM 來編譯 sass，node-sass是自動編譯實時的，dart-sass需要保存后才會生效。
node-sass和dart-sass 區(qū)別：
node-sass 是用 node(調(diào)用 cpp 編寫的 libsass)來編譯 sass；
dart-sass 是用 drat VM 來編譯 sass；
node-sass是自動編譯實時的，dart-sass需要保存后才會生效
推薦 dart-sass 性能更好（也是 sass 官方使用的），而且 node-sass 因為國情問題經(jīng)常裝不上
5.Linter / Formatter 支持代碼風(fēng)格檢查和格式化。
ESLint with error prevention only （僅具有錯誤預(yù)防功能）
ESLint + Airbnb config （Airbnb配置）
ESLint + Standard config （標(biāo)準(zhǔn)配置）
ESLint + Prettier （更漂亮）
6.Pick additional lint features（詢問項目的什么時候校驗格式）：
Lint on save（保存時）
Lint and fix on commit（提交時）
7.Unit Testing 支持單元測試。
Pick a unit testing solutio（詢問項目的測試框架）：
Mocha +Chai （Mocha是JavaScript界中最受歡迎的一款單元測試框架，1、靈活，和更多的一些庫結(jié)合使用，2、資料較多。）
Jest（Jest是由facebook發(fā)布，1、容易安裝配置；2、提供snapshot功能。snapshot功能能夠確保UI不會意外被改變。Jest會把結(jié)果值保存在一個文件當(dāng)中，每次進(jìn)行測試的時候會把測試值與文件中的結(jié)果值進(jìn)行比較，如果兩個結(jié)果值不同，那么開發(fā)者可以選擇要么改變代碼，要么替代結(jié)果文件。）
E2E Testing 支持 E2E 測試。
8.選擇 Babel, PostCSS, ESLint 等自定義配置的存放位置：
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
選項：
In dedicated config files 在專用的配置文件中
In package.json 在package.json
9.將此作為將來項目的預(yù)置嗎？
Save this as a preset for future projects?
選項：
In dedicated config files 在專用的配置文件中
In package.json 在package.json
ps:vue3.x 遇到遇到TypeError: Cannot read property ‘parseComponent‘ of undefined解決方法問題：
npm i @vue/compiler-sfc@latest
npm i vue-loader@next
————————————————
參考鏈接：https://blog.csdn.net/soulman1234/article/details/106021143
