• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue面向TypeScript开发实战

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

      3. https://juejin.im/post/5ac5fd7f5188257cc20d854e


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript api-extractor.ExtractorConfig类代码示例发布时间:2022-05-29
下一篇:
VSCode搭建node + typescript开发环境发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap