(二)、Vue2.x搭建 (ElementUI+Vue)
1.搭建Vue基本环境
(1).安装Vue项目框架
1.创建vue2.x
2.查看版本是否正确
3.测试我们的Vue脚手架是否能够跑的动...
(2).安装elementui插件
1.搜索插件并安装
2.选择默认的的数据
3.查看我们的插件是否安装成功!!
(3).跑一下项目
2.非Vue-router搭建静态资源
(1).基本介绍
官网: https://element.eleme.cn/#/zh-CN
Vue继承了Element UI
Element UI后台管理系统主要的标签:
el-container: 构建整个页面的框架。el-aside:构建左侧菜单的。el-menu: 构建左侧菜单的详细数据。常用属性如下
- default-openeds: 默认展开的菜单，通过菜单的index值来关联。:default-openeds=“[‘1’, ‘3’]”
- default-active: 默认选中的菜单子结点，通过菜单的index值来关联。:default-active=“‘1-1’”
el-subment: 可展开的菜单,常用属性
- index:菜单的下标，文本类型，不能是数值类型的。
- template: 对应el-submenu的菜单名。
i:设置菜单的图标,通过class属性拉设置的。
- el-icon-messae 信封的图标
- el-icon-menu菜单的图标
- el-icon-setting设置的图标
- el-menu-item : 菜单的子结点，不可再展开的子结点。常用属性:
- index:菜单的下标，供default-active调用…
(2).Vue前端静态页面搭建
<template> <div> <!-- 页面框架 --> <el-container style="height: 500px; border: 1px solid #eee"> <!-- 左菜单框架 --> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <!-- 左菜单详细内容 --> <el-menu :default-openeds="['1', '3']" :default-active="'1-1'"> <!-- 可展开的菜单 --> <el-submenu index="1"> <!-- 对应展开菜单的文本标题 --> <template slot="title"><i class="el-icon-message"></i>导航一</template> <!-- 菜单分组 --> <el-menu-item-group> <template slot="title">分组一</template> <!-- 菜单子结点 --> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>查看</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>删除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span>王小虎</span> </el-header> <el-main> <el-table :data="tableData"> <el-table-column prop="date" label="日期" width="140"> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </el-main> </el-container> </el-container> </div> </template> <script> export default { data() { const item = { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }; return { tableData: Array(20).fill(item) } } }; </script> <style> .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; } </style>
3.Vue-router动态搭建(左侧菜单栏部分)
(1).配置路由
router/main.js
import Vue from 'vue' import VueRouter from 'vue-router' import HomeView from '../views/HomeView.vue' import PageOne from '../views/PageOne.vue' import PageTwo from '../views/PageTwo.vue' import PageThree from '../views/PageThree.vue' import PageFour from '../views/PageFour.vue' import App from '../App.vue' Vue.use(VueRouter) const routes = [ // 导航1 { path: '/', name: '导航1', component: App, children: [ // 二级路由 { path: '/pageone', name: 'pageone', component: PageOne }, { path: '/pagetwo', name: 'pagetwo', component: PageTwo }, ] }, // 导航2 { path: '/navigation', name: '导航2', component: App, children: [ { path: 'pagethree', name: 'pagethree', component: PageThree }, { path: 'pagefour', name: 'pagefour', component: PageFour } ] } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router
(2).搭建前端接受路由
App.vue
这里我们index对我们的项目很有用，主要可以帮助我们独立化高亮选择。
<template> <div> <!-- 页面框架 --> <el-container style="height: 500px; border: 1px solid #eee"> <!-- 左菜单框架 --> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <!-- 左菜单详细内容 --> <!-- <el-menu :default-openeds="['1', '3']" :default-active="'1-1'"> --> <!-- 可展开的菜单 --> <!-- <el-submenu index="1"> --> <!-- 对应展开菜单的文本标题 --> <!-- <template slot="title" ><i class="el-icon-message"></i>导航一</template > --> <!-- 菜单分组 --> <!-- <el-menu-item-group> <template slot="title">分组一</template> --> <!-- 菜单子结点 --> <!-- <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> --> <!-- 菜单详细信息 --> <el-menu default-active="0"> <!-- 可展开的菜单 : 这里的index一定要加上,目的是为了分清父菜单--> <el-submenu v-for="(item_father, index_father) in $router.options.routes" :key="index_father" :index="index_father+''"> <!-- 这个菜单的标题和图标 --> <template slot="title"><i class="el-icon-message"></i>{{item_father.name}}</template> <!-- 菜单字节点 index在这里作用是高亮选择,index一定要保证唯一性 --> <el-menu-item v-for="(item_son, index_son) in item_father.children" :key="index_son" :index="index_father+'-'+index_son">{{item_son.name}}</el-menu-item> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>查看</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>删除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span>王小虎</span> </el-header> <el-main> <router-view></router-view> </el-main> </el-container> </el-container> </div> </template> <script> export default { data() { const item = { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄", }; return { tableData: Array(20).fill(item), }; }, mounted(){ console.log('vc',this); } }; </script> <style> .el-header { background-color: #b3c0d1; color: #333; line-height: 60px; } .el-aside { color: #333; } </style>
