use typescript in vue family bucket
摘要：
自從 vue cli 升級到 3.0 之後,vue 專案對 TypeScript 的支援度也不斷的提升,為了更好的學習 TypeScript,本篇文章記錄著 vue 全家桶結合 TypeScript 的食用方式
vue-cli 3.0
cli 工具到底升級了什麼
...
自從 vue cli 升級到 3.0 之後,vue 專案對 TypeScript 的支援度也不斷的提升,為了更好的學習 TypeScript,本篇文章記錄著 vue 全家桶結合 TypeScript 的食用方式
vue-cli 3.0
cli 工具到底升級了什麼
- GUI 專案管理介面
- 更加簡潔的目錄結構
- TypeScript 的支援
- Git Hook 提交 commit 的時候檢查程式碼的規範性
- 依賴和外掛管理更加方便(GUI 管理)
- Progressive Web App 的支援
- Vue Router & Vuex
- ESLint / TSLint / Prettier
- 用 Jest 或 Mocha 進行單元測試
- 用 Cypress 或者 Nightwatch 進行 E2E 測試
- 預配置webpack功能,如模組熱替換、程式碼拆分、 搖樹優化（tree-shaking）、高效持久化快取等
- 通過 Babel 7 + preset-env（Babel外掛）對 ES2017進行轉換和基於使用情況注入 polyfill
- 支援 PostCSS（預設啟用 autoprefixer）和所有主要的 CSS 前處理器
安裝
npm i -g @vue/cli
建立專案
vue create [productName] # or vue ui
在選方案時,記得把 TypeScript 的支援勾選
TypeScript
TypeScript 是一種由微軟開發的自由和開源的程式語言。它是 JavaScript 的一個超集,而且本質上向這個語言添加了可選的靜態型別和基於類的面向物件程式設計.TypeScript 擴充套件了JavaScript語法,任何已經存在的JavaScript程式,可以不加任何改動,在TypeScript環境下執行。TypeScript只是向JavaScript添加了一些新的遵循ES6規範的語法,以及基於類的面向物件程式設計的這種特性。
在專案中食用 TypeScript
data
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class App extends Vue {
msg1:number = 123
msg2:String = 'hello word'
obj:Object = {
msg1: 123,
msg2: 'hello word'
}
arr:Array = [
123,
'hello word'
]
}
</script>
編譯之後 ==>
<script>
export default {
name: 'App',
data () {
return {
msg1: 123,
msg2: 'hello word',
obj: {
msg1: 123,
msg2: 'hello word'
},
arr: [
123,
'hello word'
]
}
}
}
</script>