Element-UI快速入门

Element-UI快速入门

什么是Element UI

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

Element UI是基于Vue 2.0的Element UI 提供一组组件Element UI 提供组件的参考实例, 直接复制

官方网站：

​​vue-cli创建项目

vue create eui01

步骤二：运行项目

整合1：插件

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

vue add element

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

整合

整合2：安装element-ui插件

npm i element-ui --save

整合：element-ui引入

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

完整引入：引入了eui所有的组件，学习时/开发时常用按需引入：引入需要的组件，生产环境下使用。

完整引入

1. 导入 element ui 组件库2. 导入 element ui css样式3. 并将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 = falsenew Vue({ router, store, render: h => h(App)}).$mount('#app')

3.布局容器

布局容器

使用element-ui的布局容器(Container) 进行页面布局。对页面进行划分（上、下、左、中）官方文档 :​​flex 布局，使用前请确定目标浏览器是否兼容。此外，​​​​​ 的子元素只能是后四者，后四者的父元素也只能是 ​​​​。

步骤一: 修改src/main.js 导入 element-ui 样式和组件

/* 导入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 = falsenew Vue({ router, store, render: h => h(App)}).$mount('#app')

步骤二: 删除 src/App.vue所有内容, 拷贝布局模板和样式

reset.css

布局页面完成后, 整个body会存在一圈空白, 开发中一般选择重新设置页面样式

步骤一: 百度搜索”reset.css” , 并创建 assets/app.css ,拷贝样式 (复制下面样式即可)

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td { margin: 0; padding: 0;}table { border-collapse: collapse; border-spacing: 0;}fieldset,img { border: 0;}address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; font-weight: normal;}ol,ul { list-style: none;}caption,th { text-align: left;}h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal;}

满屏填充

在App.vue中，添加样式

html, body, .el-container { height: 100%; }

4.导航条

需求

导航条

使用导航菜单(NavMenu) 完成导航条效果

官方文档 : ​​

路由

步骤一: 修改 src/App.vue 设置路由视图

步骤二: 编写测试组件（Home.vue和Cart.vue）

页面刷新导航选择问题

刷新页面, 导航条的选中状态消失

修复: 修改 App.vue页面