ui框架(库)是什么?
纯html-ui框架: layui、bootstrap、mui、jQuery-ui 就是一份写好样式的了css代码
基于框架(vue react等等)的ui框架:写好了样式和基于框架语法的组件的组件库
layui: css代码和js代码
element-ui: 根据vue框架的语法实现了很多组件,我们只需要引入然后注册为组件再使用。
引入Element UI框架
1.安装
npm i element-ui
2.全局引入在 main.js 中写入以下内容:
import Vue from 'vue'
//引入组件库
import ElementUI from 'element-ui'
//引入全局的css样式
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
//注册全局组件,等价于Vue.component("xxxx",{})
Vue.use(ElementUI)
new Vue({
el: '#app',
render: h => h(App)
})
3.按需引入
import Vue from 'vue'
import { Button, Select } from 'element-ui' import App from './App.vue'
Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或写为
Vue.use(Button)
Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
})