Element UI框架

525 阅读1分钟

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) 
})