vue面向TypeScript开发实战

好长一段时间没有写文章了。文笔生疏，写得不好请大家不要见怪。

1、背景说明

     前端团队技术栈由angular(1/4/6)转向VUE，为什么会这样变(VUE简单；大家都在使用VUE；使用VUE爱国......)？ 哎，总之，也不是一两句就可以说清的，也不是某个小团队就可以自主决定的，这里就不详细说了。

     团队转型VUE后，上手总体感觉还是比较快。总结原因主要如下几点：一，VUE入门确实是相对简单一些；二，VUE中文资料较多；三，VUE与angular背后大部分设计思想基本一致；

    在这里不得不赞VUE作者，提供这么简单，让我们容易上手项目的框架。

    两个月跌跌撞撞的VUE体验期很快就过去了。团队人员的体验感各不一样，就不在这一一阐述了，重要的说明一下团队70%人都一致认为不习惯的位置：VUE里面SFC的使用。当然，这里强调一下，我们团队并不是否定SFC的设计(本人认为SFC的设计是非常nice的)，而是一种使用习惯，习惯了面向.ts的开发方式；习惯了html片段、SCSS、js(ts)分离的代码组织方式。说白了就是习惯了angular组件开发方式(!~ ~)。

2、主要表象

• vue的SFC综合了html template、script、css
  • 对于简单/小型组件开发组织代码非常方便。
  • 在实际开发中，由于对web界面组件化设计不足（能力、习惯），使得组件规模庞大，甚至有时一个界面一个组件，而不是做细化拆分，组件代码html/script/css加起来可能达到几百上千行代码，引起不便
  • 所以，约定vue sfc达到300行左右，就更倾向使用文件分离模式(当然拆分为子sfc组件也是一种方式)
  • vue sfc综合了html template、script、css，感觉有种回到传统网页开发，一个.html把所有事情都干了
• 对插件的支持(主要指的vscode插件)
  • 我们常用的工具vscode对于vue的sfc的支持有限。
  • 在veture插件支持下仍然有和其他插件无法顺利配合使用的问题，比如许多语法检查插件如vscode-prettier、vscode-tslint等。
• 开发思想影响
  • SFC把JS、CSS、HTML 综合在一起，这种思想尤其是对原始做后端的同学，在基于spring-boot开发某个服务时，有些同学会把业务逻辑糅在controller里面(哈哈，是不是有些夸张了啊)。

     当然说这么多，仅仅在客观阐述angular技术栈同学转vue技术栈的同学的感受，并不是在指责VUE的不好啊(因为我们团队现在正在使用vue，感觉还很不错)。

3、思路

　上面正确的不正确的说了一堆，但总归需要总结一下思路，找到一个好的方向。

　思路如下：

• vue中怎么使用typescript(团队人员都适应了ts编码)？这个好解决，vue 2.x版本已经支持了typescript，并且在vue-cli中可以创建基于typescript的模板工程
• 脱离sfc，以面向.ts为主导的开发方式，分离.vue文件(template->html、script->.ts、css->scss），这个稍微有些麻烦，可以详细参考
• 改造完成后，基本能保持同.vue 被vue-loader装载后的全部特性。
• 除了一些特殊特性，如局部样式(scoped)，因为直接使用import from './comp.scss' 引入的样式是全局样式。这个是需要去解决的。

/* 问题是引入的样式是全局样式*/
import { Vue, Component } from 'vue-property-decorator';
import errorBizStyle from './error.biz.scss'; 

  import ErrorBizHtml from './error.biz.html';

  import { ErrorBizChildComponent } from './child/error.child'

@Component({
  template: ErrorBizHtml,
  style: errorBizStyle,
  components: {
    'child-biz': ErrorBizChildComponent
  }
})
export class ErrorChildComponent extends Vue {

}

3、解决方案

1. 使用css module，将样式styles对象传入vue组件$options中
2. 劫持 VUE 渲染方法，注入样式绑定逻辑
3. 实现 父组件样式传递子组件样式如，.button-green /deep/ .error—biz /deep/ .error—child—》c____3____error—child
4. 封装成 vue插件

4、参考示例

      插件代码及使用方式

      插件使用demo参考

4、参考资料

      1. https://github.com/vuejs/vue-class-component/issues/15

      2. https://github.com/vuejs/vue-class-component/issues/230