ElementUI（具体参考官⽅⽂档）
ElementUI
ElementUI是⼀套为开发者、设计师准备的基于vue的PC端组件库。
搭建ElementUI基础环境（基于脚⼿架）
1. 新建项⽬。
# 配置镜像源
npm config set registry registry.
# 安装VueCLI
npm install -g @vue/cli
# ⼀个空⽂件夹  VUEUI/day01/demo下执⾏⼀个命令
vue  create  elepro
# 依次选择
Manually select features
选择 Babel - Router  去掉 linter
2.x
是否使⽤history的路由模式？回车 Y
In package.json
是否将当前上设置作为未来创建项⽬的预设配置？回车 N
2. 在新项⽬中，通过npm i 命令安装ElementUI。
# 进⼊新创建的项⽬⽬录
cd elepro
# 执⾏安装命令
npm i element-ui -S
安装成功后，将会在package.json中出现element-ui的依赖。node_modules⽂件夹下也会出现element-ui的源码包。
3. 在脚⼿架项⽬中，main.js配置ElementUI。
// 引⼊ElementUI
import ElementUI from'element-ui'
import'element-ui/lib/theme-chalk/index.css'
// 全量引⼊所有组件
Vue.use(ElementUI)
4. 开始使⽤组件。
npm run serve
没有编译错误，配置完成。
npm run serve将会把当前脚⼿架项⽬源码进⾏编译、打包、部署到8080服务器，这样才可以使⽤浏览器通过请求地址进⾏访问。
npm run build命令可以将脚⼿架项⽬进⾏编译，⽣成dist⽬录。
1. 新建src/views/Button.vue，编写ElementUI的Button组件。
2. 配置路由。
/button      Button.vue
ElementUI组件库适合写什么样的⽹站？
后台管理类⽹站。（敏捷开发）
ElementUI常⽤组件
Navmenu组件（导航）
navmenu⽤于实现导航，其基本结构：
<el-menu mode="horizontal">
<el-menu-item>导航项1</el-menu-item>
<el-menu-item>导航项2</el-menu-item>
<el-menu-item>导航项3</el-menu-item>
<el-menu-item>导航项4</el-menu-item>
</el-menu>
1. 新建vue⽂件。 views/Nav.vue
2. 配置路由。
设置导航的默认选中项
<el-menu mode="horizontal"default-active="2">
<el-menu-item index="1">导航项1</el-menu-item>
<el-menu-item index="2">导航项2</el-menu-item>
<el-menu-item index="3">导航项3</el-menu-item>
<el-menu-item index="4">导航项4</el-menu-item>
</el-menu>
设置导航的下拉⼦菜单
<el-menu mode="horizontal"default-active="2">
<el-menu-item index="1">导航项1</el-menu-item>
<el-menu-item index="2">导航项2</el-menu-item>
<el-submenu index="3">
主题
<el-menu-item>炫酷⿊</el-menu-item>
<el-menu-item>猛男粉</el-menu-item>
</el-submenu>
<el-menu-item index="4">导航项4</el-menu-item>
</el-menu>
设置垂直导航（侧边栏导航）
<el-menu default-active="2">
<el-menu-item index="1">导航项1</el-menu-item>
<el-menu-item index="2">导航项2</el-menu-item>
<el-menu-item index="3">导航项3</el-menu-item>
<el-menu-item index="4">导航项4</el-menu-item>
</el-menu>
如何修改组件库组件的默认样式？
1. 查看⽂档，当前组件是否提供了⼀个属性⽤于修改该组件的样式。如果有，则⾸选使⽤组件属性修改默认样式。
2. 如果没有提供属性，可以为该组件直接添加style属性设置内联样式。
3. 可以为该组件添加class属性，然后通过<style>来设置组件样式。
4. 在浏览器中右键检查该组件样式类名，然后再<style>直接覆盖该类名，重写相关样式；如果重写后的优先级没有组件默认的优先级
⾼，则可以使⽤!important来提⾼样式优先级。
Container布局容器
⽤于布局的容器组件，⽅便快速搭建页⾯的基本结构：
vue element admin<el-container>：外层容器。当⼦元素中包含 <el-header> 或 <el-footer> 时，全部⼦元素会垂直上下排列，否则会⽔平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
修改滚动条的样式
.test{
height:100px;
overflow: auto;
}
.test::-webkit-scrollbar{
width: 15px;
}
<!--修改滚动条的下⾯的样式-->
.test::-webkit-scrollbar-track{
background-color: red;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
.test::-webkit-scrollbar-thumb{
background-color: #191919;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
基于嵌套路由实现main内容的动态更新
嵌套路由可以实现通过多层级的请求资源路径来对页⾯的局部内容进⾏动态更新。
例如：
localhost:8080/component/button    看到组件页⾯中嵌套Button页⾯
localhost:8080/component/container  看到组件页⾯中嵌套Container页⾯
localhost:8080/component/icon  看到组件页⾯中嵌套icon页⾯
基于嵌套路由，显⽰完整的页⾯内容的步骤：
1. 希望可以处理以下3个路由的页⾯显⽰：
localhost:8080/component/button    看到组件页⾯中嵌套Button页⾯
localhost:8080/component/container  看到组件页⾯中嵌套Container页⾯
localhost:8080/component/icon  看到组件页⾯中嵌套icon页⾯
2. 编写3个组件页⾯：Button.vue、Container.vue、Icon.vue
3. 在router/index.js中配置嵌套路由。
{
path: '/component',
name: 'component',
component: ()=> import('../views/Component.vue'),
children: [
{
path: 'button',
component: ()=> import('../views/Button.vue')
},
......
]
}
4. 在Component页⾯的el-main，编写<router-view/>，⽤于动态显⽰⼦路由的内容。
<el-main>
<router-view></router-view>
</el-main>
5. 在地址栏输⼊以下地址，测试嵌套路由的显⽰效果。
localhost:8080/component/button
localhost:8080/component/container
localhost:8080/component/icon
实现点击左侧边栏导航选项，跳转到相应页⾯。
为el-menu添加router属性，开启路由模式，这样就会在点击时⾃动跳转到index指向的地址。
<>
<el-menu-item index="button">
Button按钮
</el-menu-item>
</el-menu>
路径跳转规则（相对、绝对）:
当前：localhost:8080/component/1111    跳转到:  button
最终：localhost:8080/component/button
当前：localhost:8080/component/1111    跳转到:  /button
最终：localhost:8080/button
当前：localhost:8080/component/1111    跳转到:  /component/button
最终：localhost:8080/component/button
修改每⼀个el-menu-item的index属性。点击后页⾯将跳转到正确的路径。
为/component路由添加redirect， 若⽤户直接访问/component，则⾃动重定向到/component/button

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。