ElementUI学习笔记

使用了TypeScript作为定义文件，比如button.d.ts

把每个组件都封装成了Vue的组件

组件可以按需引入，以减小最终的静态资源文件大小；注意引入时，组件和样式都要引进来：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Vue from 'vue';

import {Card, Button, Row, Col} from 'element-ui';

// 别忘了引入样式文件
import 'element-ui/lib/theme-chalk/button.css';
import 'element-ui/lib/theme-chalk/card.css';
import 'element-ui/lib/theme-chalk/row.css';
import 'element-ui/lib/theme-chalk/col.css';

import App from './App';


Vue.config.productionTip = false;

Vue.component(Button.name, Button);
Vue.component(Card.name, Card);
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);

new Vue({
  render : h => h(App)
}).$mount('#app');

按需引入组件时，如果只是本地开发调试，可以不用装babel插件；如果要打包发布，则需要安装babel插件

组件主要是布局+样式，样式是通过组件的各种参数、条件判断，然后加上去的

样式文件需要单独引入，因为组件代码中没有涉及样式的定义，只有对样式的应用：

Note that CSS file needs to be imported separately.

截止目前(20191017)，有近90个组件了。