网站快速成型工具-Element UI

学习方式我们还是按三布来的方式，我觉得这样学比较明白（如果有其他想法留言给我~~）

Element UI

1 什么是Element UI？？？？

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

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

• 官方网站：
  https://element.eleme.cn/#/zh-CN/component/installation

2 搭建环境

2.1 创建vue项目

• 步骤一: 通过 vue-cli创建项目
  vue create eui01
• 步骤二：运行项目
  

2.2 安装 element-ui组件

npm i element-ui --save

2.3 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 = false
new Vue({
router,
store,
render: h => h(App)
}).$mount(’#app’)

3 布局

3.1 布局

• 使用element-ui的布局容器(Container) 进行页面布局

• 官方文档 : https://element.eleme.cn/#/zh-CN/component/container

• 步骤一: 修改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 = false
new Vue({
router,
store,
render: h => h(App)
}).$mount(’#app’)

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

3.2 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;

}

重置样式参考：https://www.cnblogs.com/weizhxa/p/9885329.html

• 步骤二: 修改 src/main.js 导入 app.css 样式

/** 导入公共样式
/
import ‘@/assets/app.css’
/ 导入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’)

3.3 满屏填充

• 在App.vue中，添加样式

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

4 导航条

4.1 需求

4.2 导航条

• 使用导航菜单(NavMenu) 完成导航条效果
• 官方文档 : https://element.eleme.cn/#/zh-CN/component/menu

• 步骤1: 修改 src/App.vue

4.3 路由

• 点击”首页” 和 “购物车” 可以调整页面
  

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

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

4.4 页面刷新导航选中问题

• 默认情况：点击后的默认效果

• 刷新页面, 导航条的选中状态消失
  
• 修复: 修改 App.vue页面