vuecli4与typeScript实现按键组件的封装

1. 项目创建

2. 项目结构

3. 标签动态样式及Stylus

4. 混合

  项目用到了vuecli4脚手架，ts语法，stylus预编译器。最终目标实现一个按键的封装，可通过在标签中定义按键的颜色，边框，圆角，阴影效果。源码

1 项目创建

vue create UIButton

勾选上Babel,TypeScript,Css Pre-processors三项安装包。各安装提示:

1. Use class-style …使用类语法 : yes
2. Use Babel alongsidee Ts…: yes
3. Pick a CSS pre-processor 选择css预编译: Stylus
4. where do you prefer placing config for Babel…: In dedicated config files 配置文件存放在各自文件中。

VSconde中各种插件根据需求安装。

2 项目结构

  使用ts后vue文件的结构与原来有些区别，ts主要以类进行编写，结构上需要重新适应。主要是每个传递的属性都会用修饰器进行声明。

@Component - 类修饰器，可存放组件
@Prop(Type) - 属性修饰器，接受父组件传值
@Emit(方法名) - 自定义父组件方法
原本的data与method及各种生命周期属性直接写在类内
computed属性用 get 名称(){return}表示

// UIButton.vue