搭建Vue-TypeScript項(xiàng)目(一)
這是一個(gè)系列文章，一步步搭建vue項(xiàng)目，包含vue-cli3，axios，vuex，vue-router，type-script等等
假設(shè)你有了vue基礎(chǔ),并且學(xué)會(huì)了基礎(chǔ)的typescript語(yǔ)法
安裝
1.node版本
node版本要求node>=8.9以上，使用以下命令查看node版本
node -v
2、vue-cli3安裝
（1）若已全局安裝vue-cli(低版本1或2)，需先卸載(千萬(wàn)記得卸載，不然后悔)
npm uninstall vue-cli -g
（2）全局安裝 vue-cli3.0
#安裝
npm install -g @vue/cli`
#查看版本
vue --version
3.創(chuàng)建項(xiàng)目
（1）創(chuàng)建項(xiàng)目
vue create myapp
#若本地是國(guó)外npm換源，會(huì)提示換taobao源
Your connection to the default npm registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? Yes
（2）選擇創(chuàng)建方式
// 默認(rèn)預(yù)設(shè)配置 babel，eslint
default (babel， eslint)
// 手動(dòng)選擇配置（我們要選擇這種方式）
Manually select features
（3）手動(dòng)配置
1.Babel //是否使用babel編譯代碼，廢話當(dāng)然用
2.TypeScript //是否使用TypeScript，看文章標(biāo)題
3.Progressive Web App (PWA) Support //支持漸進(jìn)式網(wǎng)頁(yè)應(yīng)用程序
4.Router //路由管理器
5.Vuex //狀態(tài)管理模式（構(gòu)建一個(gè)中大型單頁(yè)應(yīng)用時(shí)）
6.CSS Pre-processors //css預(yù)處理
7.Linter / Formatter //代碼風(fēng)格、格式校驗(yàn)
8.Unit Testing // 單元測(cè)試
9.E2E Testing // 即端對(duì)端測(cè)試
空格選中，上下鍵切換，回車(chē)確認(rèn)，具體配置見(jiàn)下圖
demo
1、 TypeScript
是否使用class風(fēng)格的組件語(yǔ)法，是
Use class-style component syntax?
是否使用babel做轉(zhuǎn)義，是
Use Babel alongside TypeScript for auto-detected polyfills?
2、Router
路由使用歷史模式，一般實(shí)際項(xiàng)目要使用history
Use history mode for router? (Requires proper server setup for index fallback in production)
3、CSS Pre-processors css預(yù)處理，我用的sass
Pick a CSS pre-processor (PostCSS， Autoprefixer and CSS Modules are supported by default)
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
4、Linter / Formatter 代碼風(fēng)格、格式校驗(yàn)，我用的tslint
TSLint
僅錯(cuò)誤預(yù)防
ESLint with error prevention only
Airbnb配置
ESLint + Airbnb config
標(biāo)準(zhǔn)配置
ESLint + Standard config
Prettier配置（常用）
ESLint + Prettier
5、選擇lint方式：Pick additional lint features，選擇保存時(shí)檢查
保存時(shí)檢查
Lint on save
提交時(shí)檢查
Lint and fix on commit
6、Unit Testing 單元測(cè)試，不使用
Mocha + Chai
Jest
7、E2E Testing E2E（End To End）即端對(duì)端測(cè)試，不使用
Cypress (Chrome only)
Nightwatch (Selenium-based)
8、選擇 Babel，PostCSS， ESLint 等自定義配置的存放位置，在package.json里配置
在單獨(dú)的配置文件中
In dedicated config files
在package.json
In package.json
9、將此作為將來(lái)項(xiàng)目的預(yù)置嗎？是的，下次可以直接用
Save this as a preset for future projects?
10、項(xiàng)目配置名稱(chēng)，設(shè)置配置名稱(chēng)為：my
Save preset as：my
11、回車(chē)構(gòu)建項(xiàng)目,具體選項(xiàng)看下圖
3.運(yùn)行項(xiàng)目
#進(jìn)入項(xiàng)目文件夾
cd myapp
#運(yùn)行項(xiàng)目
npm run serve
