这周对公司的内容使用vue进行重构,所以记录一下开始项目的过程
下载elementUI:
项目文件夹中在命令行中输入:npm install elementui -s
下载完成后在 main.js 中加入以下内容:
import ElementUI from ‘element-ui‘; import ‘element-ui/lib/theme-chalk/index.css‘; Vue.use(ElementUI);
需要注意的是,样式文件需要单独引入
使用elementui的布局的组件组成页面结构,并在结构中使用自定义的组件
<template> <el-container> <el-header> <Top /> </el-header> <el-container> <el-aside width="200px"> <Aside/> </el-aside> <el-main> <router-view></router-view> </el-main> </el-container> </el-container> </template>
在上边组件中引入了top和aside组件
引入外部的组件需要使用import引入组件,并且导出组件
import Aside from ‘@/components/common/aside.vue‘ import Top from ‘@/components/common/top.vue‘ export default { components:{ Top, Aside } };
这样页面初始加载的时候就显示了
使用elementui的导航栏时如果使用路由要把:router设置为true,并在el-menu-item中的index中写上对应的路由地址
<el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#00b4aa" router=true active-text-color="#fff"> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">透传概览</span> </el-menu-item> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>异网透传清单</span> </template> <el-menu-item-group> <el-menu-item index="/first">疑似透传客户清单</el-menu-item> </el-menu-item-group> <el-menu-item-group> <el-menu-item index="/second">疑似透传客户分析</el-menu-item> </el-menu-item-group> <el-menu-item-group> <el-menu-item index="/third">疑似服务IP清单</el-menu-item> </el-menu-item-group> <el-menu-item-group> <el-menu-item index="/fourth">服务IP行为分析</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu>
可以设置导航栏中字体的激活和未激活的状态,也可以设置背景颜色,激活的背景颜色可以通过一下代码来实现
.el-menu-item.is-active { background-color: #00b4aa !important; }
添加路由需要的几步:
新建一个路由对应的文件
Router下的index.js中引入组件,并配置路由
添加新的路由链接
此时项目的结构就构建成功了
原文地址:https://www.cnblogs.com/wyongz/p/11192957.html
时间: 2024-11-05 06:26:35