vue-cli3.0 + typescript搭建工程，实现el

github地址： https://github.com/nuonuoge/vue2-elm-ts 欢迎star

为什么使用ts
平时业务中一直使用angular开发，ng使用的是typescript，在现在这个市场下只懂一个框架感觉短板太大，于是就学了vue和react，已经习惯使用ts，所以就在vue中延用了

TypeScript的优势

1. 静态输入
   静态类型化是一种功能，可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能，就会允许开发人员编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。

2. 大型的开发项目
   有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。

3. 更好的协作
   当发开大型项目时，会有许多开发人员，此时乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误。这为开发团队创建了一个更高效的编码和调试过程。

4. 更强的生产力
   干净的 ECMAScript 6 代码，自动完成和动态输入等因素有助于提高开发人员的工作效率。这些功能也有助于编译器创建优化的代码。

vue配置
由于习惯了ng的三文件配置(.ts .html .css)，所以在vue中也使用了三文件格式
目录结构

使用vue-cli3.0创建项目

1. 配置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'
      }
    }
  }
}

2. 安装
   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提供了Mutation State等装饰器
  贴一段项目中的使用代码
  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，暂时未搞定，如果大家找到了解决方案，求指导