「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」。

1. Element UI

1.1 什么是Element UI

l Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

Element UI是基于Vue 2.0的

Element UI 提供一组组件

Element UI 提供组件的参考实例, 直接复制

l 官方网站：

element.eleme.cn/#/zh-CN/com…

1.2 搭建环境

1.2.1 创建vue项目

l 步骤一: 通过 vue-cli创建项目

vue create eui01

l 步骤二：运行项目

1.2.2 整合1：插件

l 安装好vue项目后，进入到项目目录，执行命令

vue add element

l 整合步骤1：确定引入方式（全部引入、按需引入）

l 整合

1.2.3 整合2：安装 element-ui组件

npm i element-ui --save

1.2.4 整合2：Element UI 引入

l 官方提供了2种引入方式：完整引入、按需引入

完整引入：引入了eui所有的组件，学习时/开发时常用

按需引入：引入需要的组件，生产环境下使用。

l 完整引入

导入 element ui 组件库

导入 element ui css样式

并将element ui 注册给vue

/*
	导入element-ui样式

*/

import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

 

/* element-ui所有组件

*/

import ElementUI from 'element-ui'

Vue.use(ElementUI)

 

Vue.config.productionTip = false

 

new Vue({

 router,

 store,

 render: h => h(App)

}).$mount('#app')

Element UI入门(一)