好长一段时间没有写文章了。文笔生疏，写得不好请大家不要见怪。
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';
@Component({ template: ErrorBizHtml, style: errorBizStyle, components: { 'child-biz': ErrorBizChildComponent } }) export class ErrorChildComponent extends Vue { }
3、解决方案
- 使用css module，将样式styles对象传入vue组件$options中
- 劫持 VUE 渲染方法，注入样式绑定逻辑
- 实现 父组件样式传递子组件样式如，.button-green /deep/ .error—biz /deep/ .error—child—》c____3____error—child
- 封装成 vue插件
4、参考示例
4、参考资料
1. https://github.com/vuejs/vue-class-component/issues/15
2. https://github.com/vuejs/vue-class-component/issues/230
3. https://juejin.im/post/5ac5fd7f5188257cc20d854e
请发表评论