标签：新建 实现 激活 开始 结构 注意 布局 服务 tle
这周对公司的内容使用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中引入组件，并配置路由
添加新的路由链接
此时项目的结构就构建成功了
标签：新建 实现 激活 开始 结构 注意 布局 服务 tle
原文地址：https://www.cnblogs.com/wyongz/p/11192957.html
