vue-typescript 專案開發 - 優雅的構建專案
引言
近幾年前端對 TypeScript的呼聲越來越高，Typescript也幾乎成為了前端必備的技能，TypeScript 作為 JS型別的超集，當中的泛型、型別、命名空間、列舉等特性，彌補了 JS 在大型應用開發中的不足，讓我們在開發中有了更嚴格的代碼要求，
Typescript在單獨學習時都還比較好理解，當它與VUE結合后兩者都有著有著不小的改變，需要去查看框架提供的.d.ts的宣告檔案中一些復雜型別的定義、組件的書寫方式等都要做出不小的調整，
VUE 3.0 也出來一段時間了，在學習vue3.0之前記錄一下vue2.x結合Typescript的一些心得體會，在接下來的時間會學習vue3.0的語法，然后再分享出來，有不對的地方希望各位多多指正，共同學習 😄
官方腳手架安裝
如果沒有安裝 vue cli 就先安裝 cli
npm install --global @vue/cli
在最新的vue cli 工具中允許開發者使用 Typescript 集成環境創建新專案，
運行vue create my-product-name
這里有自己遇到給一個坑，我是win10的系統無法選擇選項
在官方檔案上查了一下，給出了一個解決辦法
重新在gitbash上測驗，成功解決
first-config 這個選項是我自己本地配置一次后把我上一次的配置進行了保存，方便以后重用，這個后面會再講
繼續上面的配置，Default 是默認是 vue 2.x 版本，Default (Vue 3 Preview) 是 vue 3.0 版本，他們都包含了 babel 和 eslint 配置，Manually select features 是自己手動選擇想要的配置，這里我們用這一項來進行Typescript的配置
空格手動選擇所需要的內容，這里 Babel、Typescript、Router、Vuex、CSS Pre-processors、linter 是我所需要的匯入的配置，Progressive Web App (PWA) Support 如果需要PWA的勾選它，我們沒做單元測驗所以也不需要 Unit Testing，同樣 E2E Testing 也用不上，不用勾選
- vue 版本選擇，這里我們是2.x專案所以選擇 2.x
- Typescript 使用類樣式的組件語法，這里選擇yes
- Babel 支持
- vue-router 這里是用的 history 模式，需要后端支持才行，詳情見 官方檔案: HTML5 History 模式
- css 擴展，這幾個擴展的使用根據自己的需要做選擇，這里不多贅述，我選擇的是 dart-sass ，關于 dart-sass 和 node-sass 兩者的區別網上有比較多的回答，我這里參考的 這個回答
- ESLint 規范標準， 我選擇的是 ESLint + Prettier
然后是什么時候執行 ESLint 檢測，我個人比較喜歡保存時進行ESLint處理
- 最后就是剛才我執行 create 命令時出現的 first-config 選項出現的原因，你之前所有的配置都會保存到一個組態檔或者是 package.json 里面，方便下一次在直接使用該配置，可以進一步提高我們的開發效率
第一步的 config files 配置已經知道怎么用了，這里我用 package.json 試一下，配置完畢以后，運行，最后會在本地保存一個 .vuerc 的組態檔
.vuerc 的是用官方檔案上有個解釋
至此專案構建完畢，打開專案后的目錄結構是這樣
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/242400.html
標籤：其他