github地址： https://github.com/nuonuoge/vue2-elm-ts 欢迎star
为什么使用ts
平时业务中一直使用angular开发，ng使用的是typescript，在现在这个市场下只懂一个框架感觉短板太大，于是就学了vue和react，已经习惯使用ts，所以就在vue中延用了
TypeScript的优势
静态输入
静态类型化是一种功能，可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能，就会允许开发人员编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。大型的开发项目
有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。更好的协作
当发开大型项目时，会有许多开发人员，此时乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误。这为开发团队创建了一个更高效的编码和调试过程。更强的生产力
干净的 ECMAScript 6 代码，自动完成和动态输入等因素有助于提高开发人员的工作效率。这些功能也有助于编译器创建优化的代码。
vue配置
由于习惯了ng的三文件配置(.ts .html .css)，所以在vue中也使用了三文件格式
目录结构
目录
使用vue-cli3.0创建项目
- 配置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 上增强了更多的结合 Vue 特性的装饰器，新增了这 7 个装饰器：
@Emit@Inject@Model@Prop@Provide@Watch-
@Component(从vue-class-component继承)
vuex-class提供了MutationState等装饰器
贴一段项目中的使用代码
order.ts
3$router$route.html.css识别问题
在项目中引入的时候创建一个 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，暂时未搞定，如果大家找到了解决方案，求指导
