ElementUI(具体参考官方文档)
ElementUIElementUI是一套为开发者、设计师准备的基于vue的PC端组件库。搭建ElementUI基础环境(基于脚手架)新建项目。# 配置镜像源npm config set registry http://registry.npm.taobao.org# 安装VueCLInpm install -g @vue/cli# 找一个空文件夹VUEUI/day01/demo下执行一个命令vu
ElementUI
ElementUI
是一套为开发者、设计师准备的基于vue
的PC
端组件库。
搭建ElementUI
基础环境(基于脚手架)
-
新建项目。
# 配置镜像源 npm config set registry http://registry.npm.taobao.org # 安装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
-
在新项目中,通过
npm i
命令安装ElementUI
。# 进入新创建的项目目录 cd elepro # 执行安装命令 npm i element-ui -S
安装成功后,将会在
package.json
中出现element-ui
的依赖。node_modules
文件夹下也会出现element-ui
的源码包。 -
在脚手架项目中,
main.js
配置ElementUI
。// 引入ElementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' // 全量引入所有组件 Vue.use(ElementUI)
-
开始使用组件。
npm run serve
没有编译错误,配置完成。
npm run serve
将会把当前脚手架项目源码进行编译、打包、部署到8080
服务器,这样才可以使用浏览器通过请求地址进行访问。npm run build
命令可以将脚手架项目进行编译,生成dist
目录。
案例:访问http://localhost:8080/button
,看到elementui
的button
。
-
新建
src/views/Button.vue
,编写ElementUI
的Button
组件。 -
配置路由。
/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>
案例: 访问地址:http://localhost:8080/nav
, 看到导航组件。
- 新建
vue
文件。views/Nav.vue
- 配置路由。
设置导航的默认选中项
<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>
如何修改组件库组件的默认样式?
- 查看文档,当前组件是否提供了一个属性用于修改该组件的样式。如果有,则首选使用组件属性修改默认样式。
- 如果没有提供属性,可以为该组件直接添加
style
属性设置内联样式。 - 可以为该组件添加
class
属性,然后通过<style>
来设置组件样式。 - 在浏览器中右键检查该组件样式类名,然后再
<style>
直接覆盖该类名,重写相关样式;如果重写后的优先级没有组件默认的优先级高,则可以使用!important
来提高样式优先级。
Container
布局容器
用于布局的容器组件,方便快速搭建页面的基本结构:
<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页面
基于嵌套路由,显示完整的页面内容的步骤:
-
希望可以处理以下3个路由的页面显示:
localhost:8080/component/button 看到组件页面中嵌套Button页面 localhost:8080/component/container 看到组件页面中嵌套Container页面 localhost:8080/component/icon 看到组件页面中嵌套icon页面
-
编写3个组件页面:
Button.vue、Container.vue、Icon.vue
-
在
router/index.js
中配置嵌套路由。{ path: '/component', name: 'component', component: ()=> import('../views/Component.vue'), children: [ { path: 'button', component: ()=> import('../views/Button.vue') }, ...... ] }
-
在
Component
页面的el-main
,编写<router-view/>
,用于动态显示子路由的内容。<el-main> <router-view></router-view> </el-main>
-
在地址栏输入以下地址,测试嵌套路由的显示效果。
http://localhost:8080/component/button http://localhost:8080/component/container http://localhost:8080/component/icon
实现点击左侧边栏导航选项,跳转到相应页面。
为el-menu
添加router
属性,开启路由模式,这样就会在点击时自动跳转到index
指向的地址。
<el-menu router ...>
<el-menu-item index="button">
Button按钮
</el-menu-item>
</el-menu>
路径跳转规则(相对、绝对):
当前:http://localhost:8080/component/1111 跳转到: button
最终:http://localhost:8080/component/button
当前:http://localhost:8080/component/1111 跳转到: /button
最终:http://localhost:8080/button
当前:http://localhost:8080/component/1111 跳转到: /component/button
最终:http://localhost:8080/component/button
修改每一个el-menu-item
的index
属性。点击后页面将跳转到正确的路径。
为/component
路由添加redirect, 若用户直接访问/component
,则自动重定向到/component/button
更多推荐
所有评论(0)