github地址： https://github.com/nuonuoge/vue2-elm-ts 歡迎star
為什么使用ts
平時業(yè)務中一直使用angular開發(fā)，ng使用的是typescript府寒，在現(xiàn)在這個市場下只懂一個框架感覺短板太大断凶，于是就學了vue和react伤提，已經(jīng)習慣使用ts，所以就在vue中延用了
TypeScript的優(yōu)勢
靜態(tài)輸入
靜態(tài)類型化是一種功能认烁，可以在開發(fā)人員編寫腳本時檢測錯誤肿男。查找并修復錯誤是當今開發(fā)團隊的迫切需求。有了這項功能却嗡，就會允許開發(fā)人員編寫更健壯的代碼并對其進行維護舶沛，以便使得代碼質(zhì)量更好、更清晰窗价。大型的開發(fā)項目
有時為了改進開發(fā)項目如庭，需要對代碼庫進行小的增量更改。這些小小的變化可能會產(chǎn)生嚴重的撼港、意想不到的后果坪它，因此有必要撤銷這些變化。使用TypeScript工具來進行重構(gòu)更變的容易帝牡、快捷往毡。更好的協(xié)作
當發(fā)開大型項目時，會有許多開發(fā)人員靶溜，此時亂碼和錯誤的機也會增加开瞭。類型安全是一種在編碼期間檢測錯誤的功能，而不是在編譯項目時檢測錯誤罩息。這為開發(fā)團隊創(chuàng)建了一個更高效的編碼和調(diào)試過程嗤详。更強的生產(chǎn)力
干凈的 ECMAScript 6 代碼，自動完成和動態(tài)輸入等因素有助于提高開發(fā)人員的工作效率扣汪。這些功能也有助于編譯器創(chuàng)建優(yōu)化的代碼断楷。
vue配置
由于習慣了ng的三文件配置(.ts .html .css)，所以在vue中也使用了三文件格式
目錄結(jié)構(gòu)
使用vue-cli3.0創(chuàng)建項目
- 配置vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('ts')
.test(/\.ts$/)
.use('ts-loader')
.loader('ts-loader')
.end()
config.module
.rule('tsx')
.test(/\.tsx?$/)
.use('ts-loader')
.loader('ts-loader')
.end()
},
configureWebpack: {
module: {
rules: [{
test: /\.html$/,
loader: 'vue-template-loader',
exclude: /index.html/,
options: {
transformAssetUrls: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
},
scoped: false
}
}],
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
}
}
- 安裝
vue-class-component
vue-property-decorator
vuex-class
其他安裝包請參考項目中package.json文件
vue-property-decorator在 vue-class-component 上增強了更多的結(jié)合 Vue 特性的裝飾器崭别，新增了這 7 個裝飾器：
@Emit@Inject@Model@Prop@Provide@Watch-
@Component(從vue-class-component繼承)
vuex-class提供了MutationState等裝飾器
貼一段項目中的使用代碼
order.ts
3$router$route.html.css識別問題
在項目中引入的時候創(chuàng)建一個 vue-shim.d.ts 文件
import Vue from 'vue';
import VueRouter, { Route } from 'vue-router';
declare module 'vue/types/vue' {
interface Vue {
$router: VueRouter; // 這表示this下有這個東西
$route: Route;
}
}
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
declare module '*.html' {
import Vue, { ComponentOptions, FunctionalComponentOptions } from 'vue'
interface WithRender {
<V extends Vue, U extends ComponentOptions<V> | FunctionalComponentOptions>(options: U): U
<V extends typeof Vue>(component: V): V
}
const withRender: WithRender
export default withRender
}
declare module '*.scss' {
import Vue, { ComponentOptions, FunctionalComponentOptions } from 'vue'
interface WithRender {
<V extends Vue, U extends ComponentOptions<V> | FunctionalComponentOptions>(options: U): U
<V extends typeof Vue>(component: V): V
}
const withRender: WithRender
export default withRender
}
declare module '*.css' {
import Vue, { ComponentOptions, FunctionalComponentOptions } from 'vue'
interface WithRender {
<V extends Vue, U extends ComponentOptions<V> | FunctionalComponentOptions>(options: U): U
<V extends typeof Vue>(component: V): V
}
const withRender: WithRender
export default withRender
}
未解決問題
目前項目中css不支持scoped冬筒，暫時未搞定，如果大家找到了解決方案茅主，求指導
