官方网站:
https://element.eleme.cn/#/zh-CN/component/installation
Element Plus 基于Vue 3.0 组件
——页面指南
—— vue功能结构示例
—— 此处在vue中示例
创建项目命令:vue create 项目名
运行项目命令:npm run serve
2. 整合插件
安装好vue项目后,进入到项目目录,执行命令:vue add element
—— 注:空格视为选中,enter为进入下一选项
——示例图:
步骤一: 修改src/main.js 调整 element-ui 导入位置
步骤二: 修改 src/App.vue所有内容,将App.vue中所有样式删除, 配置一级路由
步骤三:编写Home.vue页面,添加布局容器
const routes = [
{
path: '/',
name: '首页',
component: () => import('../views/Home.vue')
}
]
页面编写—— 在element ui 官方网站链接在找到布局容器,复制相对应代码样式即可
Header
Main
Footer
步骤一: 百度搜索”reset.css” , 并创建 assets/reset.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;
}
重置样式参考:CSS Reset(样式重置) - weizhxa - 博客园
步骤二: 修改 src/main.js 导入 reset.css 样式
步骤1:修改在App.vue中,设置html外层标签的高度为100%
html, body, #app {
height: 100%;
}
步骤2:修改Home.vue,设置外部容器的高度为100%
/* 设置容器的高度 */
.el-container {
height: 100%;
}