devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

从0-1创建Vue项目,整合ElementUI_vue elementui

作者：weixin_40725706 | 2024-02-17 05:04:21

赞

踩

vue elementui

目录

一、项目创建

1 首先保证安装node.js 与 Vue

2.创建一个文件夹，这里创建了名为VueProject的文件夹，进入该文件的cmd。这里原本是空的，只不过我执行完第3步命令之后生成的东西。

        2.1 在cmd里面执行

 二、项目配置

 三、项目实战

3.1 整合elementUI

 3.2 axios安装

 3.3 路由安装

 3.3.1 路由懒加载

3.3.2 异步组件

 3.4 登陆页面实现

 封装验证规则及token

封装axios

 3.5 后台页面

3.5.1 后台页面布局

 

 

一、项目创建

1 首先保证安装node.js 与 Vue

2.创建一个文件夹，这里创建了名为VueProject的文件夹，进入该文件的cmd。这里原本是空的，只不过我执行完第3步命令之后生成的东西。

5fa8b1c723cd4059a51a56d51f545312.png

 

        2.1 在cmd里面执行

                1. npm init -y                                进行初始化

5b8d2cc0e9664a07b1c6ce09fb8323de.png

 

        2. npm i -D @vue/cli                    创建脚手架

fdaccec7a18a4c90922a36799741f001.png

 

        3. npx vue -V                               查看脚手架版本

8f7c42ea0c984a778e9c66c21f2d3450.png

 

        4. npx vue create project-one      通过脚手架构建

25f3b46325bd4e21b3a9819c003d14db.png

 

这里会让你选择创建vue的哪个版本，我选择的是vue2,选择之后回车，就开始下载了。

955e27bd92f141e6893c04ac4029ab2e.png

 构建完成了一个名为project-one的项目

845c1997f5b049f4862db9f008466262.png

 cd project-one

4337db9bcef74f679f200b97ad960647.png

 执行npm run serve,build中。。。。。

d86c0ec5c7aa4a8c83c4b392a6a57d41.png

 a8708508dcf6493da3c5754088eef6b1.png

打开浏览器，访问localhost:8080 

0eb5453e31874cec8afc1fe330e884b5.png

目录

 

 

d8198a70483a4c2a8f52db365d9109b3.png

 

 二、项目配置

进入project-one文件夹,输入code . 就会用vscode打开该项目了。

263b9114837d45cea8f449a14766142c.png

 df8b8823c88048098a6ae53569404b4c.png

 配置运行npm run serve 自动打开

b1d85c88057e41358e552759bea6cf94.png

 三、项目实战

3.1 整合elementUI

进入project-one文件夹，进入cmd，执行npm i element-ui -S。

a6ecb9425f45429483f5590859aa942d.png

 在package.json里面会多出elementUI的东西。

a1585854830b4664b195ace5466c81ad.png

 依赖导入了，进行引用，进入src->main.js里面。

a079e150ebf54af18285bad91199647a.png

  1. import ElementUI from 'element-ui'            //引入ElementUI
  2. import 'element-ui/lib/theme-chalk/index.css' //导入样式
  3. Vue.use(ElementUI)                            //使用

修改原始HelloWorld.vue 改为Home.vue,修改app.vue

69c88afed2564172a4e9613b2926e52b.png

 964bc570177243588a706d6b85e60942.png

 最终效果

4d56e9d782d446078e89bc3f31ecc71a.png

 3.2 axios安装

进入项目cmd，运行npm i axios -S

9b94d024dd704add9539be3ba7c23f66.png

 进入main.js，配置全局使用

7f09e0b31b63452da878c4e9bb7c2ca6.png

  1. import axios from 'axios'                     //引入axios
  2. Vue.prototype.axios = axios                   // 挂载到原型上，可以全局使用

 3.3 路由安装

进入项目cmd，运行npm i vue-router@3.5.3 -S    因为用的是Vue2版本，所以定义一下router的版本。

81806a419f41460db6a6655ea839ab1c.png

 安装完进行配置，在src目录下新建文件夹router，在该文件夹下创建index.js

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import Home from '../components/Home.vue'
  4. Vue.use(Router)
  5. export default new Router({
  6.     routes:[
  7.         {
  8.             path:'/',
  9.             component:Home
  10.         }
  11.     ],
  12.     mode:'history'
  13. })

使用，在main.js里面导入并在渲染之前挂载一下

82e008438c394932ad828106ac25aa03.png

在app.vue里面加入路由出口， <router-view></router-view>

f83ddca2b75d4b01808ab84c53f71005.png

 最终显示4df47d9b48944943b0e92cefc9870cdf.png

 3.3.1 路由懒加载

不需要import Home...,只需要在componet后面加import

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. // import Home from '../components/Home.vue'
  4. Vue.use(Router)
  5. export default new Router({
  6.     routes:[
  7.         {
  8.             path:'/home',
  9.             component:()=> import('@/components/Home')
  10.         }
  11.     ],
  12.     mode:'history'
  13. })

3.3.2 异步组件

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. // import Home from '../components/Home.vue'
  4. Vue.use(Router)
  5. export default new Router({
  6.     routes:[
  7.         {
  8.             path:'/home',
  9.             // component:()=> import('@/components/Home') //路由懒加载
  10.             component:resolve => require(['@/components/Home'],resolve) // 异步组件
  11.         }
  12.     ],
  13.     mode:'history'
  14. })

 3.4 登陆页面实现

component文件夹创建Login.vue

  1. <template>
  2.     <div class="login">
  3.     <el-card class="box-card">
  4.       <div slot="header" class="clearfix">
  5.         <span>通用后台管理系统</span>
  6.       </div>
  7.       <el-form label-width="80px" :model="form" ref="form">
  8.         <el-form-item label="用户名" prop="username" 
  9.         :rules="[
  10.         {required:true,message:'请输入用户名', trigger:'blur'},
  11.         {min:4,max:10,message:'长度在4-10位字符之间', trigger:'blur'}
  12.         ]">
  13.           <el-input v-model="form.username"></el-input>
  14.         </el-form-item>
  15.         <el-form-item label="密码" prop="password"
  16.         :rules="[
  17.         {required:true,message:'请输入密码', trigger:'blur'},
  18.         {min:6,max:12,message:'长度在6-12位字符', trigger:'blur'}
  19.       ]">
  20.           <el-input type="password" v-model="form.password"></el-input>
  21.         </el-form-item>
  22.         <el-form-item>
  23.           <el-button type="primary" @click="login('form')">登录</el-button>
  24.         </el-form-item>
  25.       </el-form>
  26.     </el-card>
  27.     </div>
  28.   </template>
  29.   
  30.   <script>
  31.   export default {
  32.     name: 'HelloWorld',
  33.     data(){
  34.       return {
  35.         form:{
  36.           username:'',
  37.           password:''
  38.         }
  39.       }
  40.     },
  41.     methods:{
  42.       login(form){
  43.           this.$refs[form].validate((valid)=>{
  44.             if(valid){
  45.               console.log(this.form)
  46.             }else{
  47.               console.error(this.form)
  48.             }
  49.           })
  50.       }
  51.     }
  52.   }
  53.   </script>
  54.   
  55.   <!-- Add "scoped" attribute to limit CSS to this component only -->
  56.   <style scoped>
  57.   .login{
  58.     width: 100%;
  59.     height: 100%;
  60.     position: absolute;
  61.     background: #409EFF;
  62.   }
  63.   .box-card{
  64.     width: 450px;
  65.     margin:200px auto;
  66.   }
  67.   </style>

 修改router文件夹下的index.js

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. // import Home from '../components/Home.vue'
  4. Vue.use(Router)
  5. export default new Router({
  6.     routes:[
  7.         {
  8.             path:'/',
  9.             redirect:'/login',
  10.             component:()=> import('@/components/Login') //路由懒加载
  11.         },
  12.         {
  13.             path:'/login',
  14.             name:'/Login',
  15.             component:()=> import('@/components/Login') //路由懒加载
  16.         },
  17.         {
  18.             path:'/home',
  19.             // component:()=> import('@/components/Home') //路由懒加载
  20.             component:resolve => require(['@/components/Home'],resolve) // 异步组件
  21.         }
  22.     ],
  23.     mode:'history'
  24. })

81123ce4e217498c98a54c67a06bb51b.png

 封装验证规则及token

在src下创建utils文件夹，增加validate.js，用来封装验证的方法

57c3a212695143fea24bf3be82fc2854.png

 

  1. // 用户名匹配
  2. export function nameRule(rule,value,callback){
  3.        // 请输入4-10位的昵称
  4.        let reg = /(^[a-zA-Z0-9]{4,10}$)/;
  5.        if(value === ''){
  6.            callback(new Error('请输入用户名'))
  7.        }else if(!reg.test(value)){ // 校验没有通过
  8.            callback(new Error('请输入4-10位用户名'))
  9.        }else{
  10.            callback()
  11.        }
  12. }
  13. // 用户密码匹配
  14. export function passRule(rule,value,callback){
  15.      // 请输入6-12位的密码，需要包含大小写字母和数字以及特殊符号
  16.      let pass = /^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/;
  17.      if(value === ''){
  18.          callback(new Error('请输入密码'))
  19.      }else if(!pass.test(value)){ // 校验没有通过
  20.          callback(new Error('6-12位密码需要包含大小写字母和数字及符号'))
  21.      }else{
  22.          callback()
  23.      }
  24. }

使用，login.vue全代码

  1. <template>
  2.     <div class="login">
  3.     <el-card class="box-card">
  4.       <div slot="header" class="clearfix">
  5.         <span>通用后台管理系统</span>
  6.       </div>
  7.       <el-form label-width="80px" :model="form" ref="form" :rules="rules">
  8.         <el-form-item label="用户名" prop="username">
  9.           <el-input v-model="form.username"></el-input>
  10.         </el-form-item>
  11.         <el-form-item label="密码" prop="password">
  12.           <el-input type="password" v-model="form.password"></el-input>
  13.         </el-form-item>
  14.         <el-form-item>
  15.           <el-button type="primary" @click="login('form')">登录</el-button>
  16.         </el-form-item>
  17.       </el-form>
  18.     </el-card>
  19.     </div>
  20.   </template>
  21.   
  22.   <script>
  23.   import {nameRule,passRule } from '../utils/validate.js'
  24.   export default {
  25.     name: 'HelloWorld',
  26.     data(){
  27.       return {
  28.         form:{
  29.           username:'',
  30.           password:''
  31.         },
  32.         rules:{
  33.             username:[{validator:nameRule,trigger: 'blur'}],
  34.             password:[{validator:passRule,trigger: 'blur'}]
  35.         }
  36.       }
  37.     },
  38.     methods:{
  39.       login(form){
  40.           this.$refs[form].validate((valid)=>{
  41.             if(valid){
  42.               console.log(this.form)
  43.             //   this.axios.post('http://localhost:8080/bike/login',this.form)
  44.             //   .then(res =>{
  45.             //     console.log(res)
  46.             //   })
  47.             localStorage.setItem('username',this.form.username)
  48.             this.$message({message:'登陆成功',type:'success'})
  49.             this.$router.push('/home')
  50.             }else{
  51.               console.error(this.form)
  52.             }
  53.           })
  54.       }
  55.     }
  56.   }
  57.   </script>
  58.   
  59.   <!-- Add "scoped" attribute to limit CSS to this component only -->
  60.   <style scoped>
  61.   .login{
  62.     width: 100%;
  63.     height: 100%;
  64.     position: absolute;
  65.     background: #409EFF;
  66.   }
  67.   .box-card{
  68.     width: 450px;
  69.     margin:200px auto;
  70.   }
  71.   </style>

在src->utils文件夹下，增加setToken.js，用来封装Token

0e0f2248430a4760958c44be95e15735.png

 

  1. // 设置
  2. export function setToken(tokenKey,token){
  3.     return localStorage.setItem(tokenKey,token)
  4. }
  5. // 获取
  6. export function getToken(tokenKey){
  7.     return localStorage.getItem(tokenKey)
  8. }
  9. // 删除
  10. export function removeToken(tokenKey){
  11.     return localStorage.removeItem(tokenKey)
  12. }

使用，在login.js中使用

4ee3089b7025406ea075f327f677a136.png

 

封装axios

1.在src目录下新建service.js

  1. import axios from 'axios'
  2. import {getToken} from '@/utils/setToken.js'
  3. import { Message } from 'element-ui'
  4. const service = axios.create({
  5.     baseURL:'/api', //baseURL会自动加在请求地址上
  6.     timeout:5000
  7. })
  8. // 添加请求拦截器
  9. service.interceptors.request.use((config)=>{
  10.     // 在请求之前做些什么（获取并设置token）
  11.     config.headers['token'] = getToken('token')
  12.     return config
  13. },(error)=>{
  14.     return Promise.reject(error)
  15. })
  16.  
  17. // 添加响应拦截器
  18. service.interceptors.response.use((response)=>{
  19.     // 在响应数据做些什么（获取并设置token）
  20.     let {code, msg} = response.data
  21.     if(code !== 200){
  22.         Message({message: msg || 'error',type:'warning'})
  23.     }
  24.      return response
  25. },(error)=>{
  26.     return Promise.reject(error)
  27. })
  28. export default service

2.去vue.config.js配置代理

  1. const { defineConfig } = require('@vue/cli-service')
  2. module.exports = defineConfig({
  3.   transpileDependencies: true,
  4.   devServer:{
  5.     open:true,  // 自动打开
  6.     host: 'localhost',
  7.     proxy:{ // 配置代理
  8.       '/api':{
  9.         target:'http://localhost:8080/bike',
  10.         changeOrigin:true, //允许跨域
  11.         pathRewrite:{
  12.           '^/api':''
  13.         }
  14.       }
  15.     }
  16.   }
  17. })
  18.  
  19.

3.去main.js，替换原来的axios为自己的service

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3.  
  4. import ElementUI from 'element-ui'            //引入ElementUI
  5. import 'element-ui/lib/theme-chalk/index.css' //导入样式
  6. // import axios from 'axios'                     //引入axios
  7. import router from './router'                 //引入router
  8. import service from './service'
  9.  
  10. Vue.prototype.service = service                   // 挂载到原型上，可以全局使用
  11. Vue.use(ElementUI)                            //使用
  12.  
  13. Vue.config.productionTip = false
  14.  
  15. new Vue({
  16.   router,                                     // 渲染之前挂载一下
  17.   render: h => h(App),
  18. }).$mount('#app')

4.使用，这里是后端自己定义的接口

  1.  @PostMapping("login")
  2.     public Map<String,Object> login(@RequestBody LoginParam param){
  3.         Map<String,Object> res = new HashMap<>();
  4.         if (param.getUsername()!= null && param.getPassword() != null){
  5.             res.put("code",200);
  6.             res.put("msg","登录成功");
  7.             res.put("username",param.getUsername());
  8.             res.put("token","123456");
  9.             return res;
  10.         }
  11.         else {
  12.             res.put("code",201);
  13.             res.put("msg","登录失败");
  14.             return res;
  15.         }
  16.     }

LoginParam.java

  1. package com.zsp.bike.entity.param;
  2.  
  3. import lombok.Data;
  4.  
  5. import java.io.Serializable;
  6.  
  7. @Data
  8. public class LoginParam implements Serializable {
  9.     private String username;
  10.     private String password;
  11. }

在login.vue写请求方法，并存储token

  1. login(form){
  2.           this.$refs[form].validate((valid)=>{
  3.             if(valid){
  4.                 console.log(this.form)
  5.                 let LoginParam = this.form
  6.                 this.service.post('/login',LoginParam)
  7.                 .then(res=>{
  8.                   console.log(res)
  9.                   if(res.data.code === 200){
  10.                     setToken('username',res.data.username)
  11.                     setToken('token',res.data.token)
  12.                     this.$message({message:res.data.msg, type:'success'})
  13.                     this.$router.push('/home')
  14.                   }        
  15.                 })     
  16.             }else{
  17.               console.error(this.form)
  18.             }
  19.           })
  20.       }

api请求封装，在src目录下新建api文件夹，创建api.js

d2ba8fd18b3d4c88b6f53ded3bfdaaea.png

  1. // 项目中我们大多数时候都会把对应的接口请求都封装成api来调用
  2. import service from '../service.js'
  3.  
  4. // 登录接口封装
  5. export function login(data){
  6.     return service({
  7.         method: 'post',
  8.         url:'/login',
  9.         data
  10.     })
  11. }

 使用，在login.vue中首先导入这个api中定义的login,然后使用

  1.   import { login } from '@/api/api.js'
  2.   export default {
  3.     name: 'HelloWorld',
  4.     data(){
  5.       return {
  6.         form:{
  7.           username:'',
  8.           password:''
  9.         },
  10.         rules:{
  11.             username:[{validator:nameRule,trigger: 'blur'}],
  12.             password:[{validator:passRule,trigger: 'blur'}]
  13.         }
  14.       }
  15.     },
  16.     methods:{
  17.       login(form){
  18.           this.$refs[form].validate((valid)=>{
  19.             if(valid){
  20.                 console.log(this.form)
  21.                 let LoginParam = this.form  
  22.                 login(LoginParam).then(res=>{
  23.                     if(res.data.code === 200){
  24.                       setToken('username',res.data.username)
  25.                       setToken('token',res.data.token)
  26.                       this.$message({message:res.data.msg, type:'success'})
  27.                       this.$router.push('/home')
  28.                   }  
  29.                 })   
  30.             }else{
  31.               console.error(this.form)
  32.             }
  33.           })
  34.       }

登录成功

2ade3ac06cce4381a82d53a5b2dbcc79.png

 

创建404页面,在src->components文件夹下新建NotFound.vue

  1. <template>
  2.     <div class="notfound">
  3.         <div class="wrapper">
  4.             <div class="big">页面不见了</div>
  5.             <div>去首页瞧瞧,点击<router-link to="/">这里</router-link>进入首页</div>
  6.         </div>
  7.     </div>
  8. </template>
  9. <script>
  10. export default {
  11.     data(){
  12.         return {};
  13.     }
  14. }
  15. </script>
  16. <style>
  17. .notfpund{
  18.     height: 100%;
  19.     background-image: url('../assets/404.jpg');
  20.     background-position: right top, center center;
  21.     background-repeat:  no-repeat repeat;
  22. }
  23. .notfound .wrapper .big{
  24.     font-size: 74px;
  25.     font-weight: 700;
  26.     line-height: 68px;
  27.     margin-bottom: 48px;
  28. }
  29. </style>

需要在app.vue中设置body和html宽高，否则不生效

d043c04ed1564c04bee09f1e63ad8ee6.png

1729165c7035404da99f23f74a6c4dc4.png

 3.5 后台页面

3.5.1 后台页面布局

在src->components文件夹下创建common文件夹。

813fff729a45473f88dd2f862ee8e9a4.png

头部、底部、菜单最终实在Home.vue中写的

afb246c76d0d4e04bb7a946251b266c0.png

在Home.vue中导入三个组件

  1. <template>
  2.   <div class="home">
  3.     <!-- 头部 -->
  4.     <Header>Header</Header> 
  5.     <el-container class="content">
  6.       <!-- 左侧菜单栏 -->
  7.         <Menu/>
  8.         <!-- 内容 -->
  9.       <el-container>
  10.         <el-main>Main</el-main>
  11.         <!-- 底部 -->
  12.         <el-footer><Footer/></el-footer>
  13.       </el-container>
  14.     </el-container>
  15.   </div>
  16. </template>
  17.  
  18. <script>
  19. import Header from './common/Header.vue'
  20. import Footer from './common/Footer.vue'
  21. import Menu from './common/Menu.vue'
  22. export default {
  23.   name: 'HelloWorld',
  24.   components:{ //注册
  25.     Header,
  26.     Footer,
  27.     Menu
  28.   },
  29.   data(){
  30.     return {}
  31.   }
  32. }
  33. </script>
  34.  
  35. <!-- Add "scoped" attribute to limit CSS to this component only -->
  36. <style scoped>
  37.   .home{
  38.     width:100%;
  39.     height:100%;
  40.   }
  41.   .content{
  42.     position: absolute;
  43.     width: 100%;
  44.     top:60px;
  45.     bottom: 0;
  46.   }
  47. </style>

 5374dd4379c947cd96267204352952b2.png

header的书写，左侧展示标题，右侧展示用户名

  1. <template>
  2.     <div class="header">
  3.         <el-header>
  4.             <div class="title">管理系统</div>
  5.             <div>{{name}}</div>
  6.         </el-header>
  7.     </div>
  8. </template>
  9. <script>
  10. import { getToken } from '@/utils/setToken';
  11. export default{
  12.     name:"Header_",
  13.     data(){
  14.         return{
  15.             name:''
  16.         }
  17.     },
  18.     created(){
  19.        this.name = getToken('username')
  20.     }
  21. }
  22. </script>
  23. <style scoped>
  24. .el-header{
  25.     background: #2578b5;
  26.     color:#fff;
  27.     line-height: 60px;
  28.     display: flex;
  29.     justify-content: space-between;
  30. }
  31. .title{
  32.     width: 200px;
  33.     font-size: 24px;
  34. }
  35. </style>

footer的书写

  1. <template>
  2.     <div class="footer">
  3.        <el-card>
  4.         China 2023 Casey
  5.        </el-card>
  6.     </div>
  7. </template>
  8. <script>
  9. export default{
  10.     name:"footer_",
  11.     data(){
  12.         return{}
  13.     }
  14. }
  15. </script>

Menu.vue的书写

  1. <template>
  2.     <div class="menu">
  3.         <el-aside width="200px">
  4.             <el-menu
  5.             default-active="2"
  6.             class="el-menu-vertical-demo"
  7.             background-color="#2578b5"
  8.             text-color="#fff"
  9.             active-text-color="#ffd04b">
  10.             <el-submenu index="1">
  11.               <template slot="title">
  12.                 <i class="el-icon-location"></i>
  13.                 <span>导航一</span>
  14.               </template>
  15.               <el-menu-item-group>
  16.                 <el-menu-item index="1-1">选项1</el-menu-item>
  17.                 <el-menu-item index="1-2">选项2</el-menu-item>
  18.               </el-menu-item-group>
  19.               </el-submenu>
  20.           </el-menu>
  21.         </el-aside>
  22.     </div>
  23. </template>
  24. <script>
  25. export default{
  26.     name:"menu_",
  27.     data(){
  28.         return{}
  29.     }
  30. }
  31. </script>
  32. <style scoped>
  33. .el-aside{
  34.     height: 100%;
  35. }
  36. .el-menu{
  37.     height: 100%;
  38. }
  39. .el-submenu-item{
  40.     min-width: 0;
  41. }
  42. </style>

最终效果

13cd6b45abbb48c498f59042c77b174f.png

 

3.5.2 路由的渲染，将路由渲染到菜单Menu中

在components文件夹下创建bike和bikeupdate文件夹。

c1b0846b93794bf5a1a9a4ffa736cf42.png

修改路由，进入router.js

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. // import Home from '../components/Home.vue'
  4. Vue.use(Router)
  5. export default new Router({
  6.     routes:[
  7.         {
  8.             path:'/',
  9.             redirect:'/login',
  10.             hidden:true,
  11.             component:()=> import('@/components/Login') //路由懒加载
  12.         },
  13.         {
  14.             path:'/login',
  15.             name:'/Login',
  16.             hidden:true,
  17.             component:()=> import('@/components/Login') //路由懒加载
  18.         },
  19.         {
  20.             path:'*',
  21.             name:'NotFound',
  22.             hidden:true,
  23.             component:()=> import('@/components/NotFound') //路由懒加载
  24.         },
  25.         // {
  26.         //     path:'/home',
  27.         //     // component:()=> import('@/components/Home') //路由懒加载
  28.         //     component:resolve => require(['@/components/Home'],resolve) // 异步组件
  29.         // },
  30.  
  31.         // 第一个
  32.         {
  33.             path:'/home',
  34.             name:'车辆管理',
  35.             redirect:'/home/bike',  //默认重定向
  36.             component:()=> import('@/components/Home'),
  37.             children:[
  38.                 {
  39.                     path:'/home/bike',  
  40.                     name:'车辆列表',
  41.                     component:()=> import('@/components/bike/BikeList'),//这里对应文件的名字，我创建的是BikeList
  42.                 },
  43.                 {
  44.                     path:'/home/ment',  
  45.                     name:'车辆管理',
  46.                     component:()=> import('@/components/bike/BikeMent'),//这里对应文件的名字，我创建的是BikeList
  47.                 },
  48.                 {
  49.                     path:'/home/info',  
  50.                     name:'信息列表',
  51.                     component:()=> import('@/components/bike/InfoList'),//这里对应文件的名字，我创建的是BikeList
  52.                 }
  53.             ]
  54.         },
  55.  
  56.         // 第二个
  57.         {
  58.             path:'/home',
  59.             name:'数据渲染',
  60.             component:()=> import('@/components/Home'),
  61.             children:[
  62.                 {
  63.                     path:'/home/dataview',  
  64.                     name:'数据概览',
  65.                     component:()=> import('@/components/bikeUpdate/DataView'),//这里对应文件的名字，我创建的是BikeList
  66.                 }
  67.             ]
  68.         }
  69.     ],
  70.     mode:'history'
  71. })

 完成上部分后，去Menu.vue 菜单页完成渲染

  1. <template>
  2.     <div class="menu">
  3.         <el-aside width="200px">
  4.             <el-menu
  5.             router
  6.             default-active="2"
  7.             class="el-menu-vertical-demo"
  8.             background-color="#2578b5"
  9.             text-color="#fff"
  10.             active-text-color="#ffd04b">
  11.  
  12.             <!-- 在这里遍历,进行绑定 -->
  13.             <template v-for="(item,index) in menus">
  14.                 <el-submenu :index="index+''" :key="index" v-if="!item.hidden">
  15.                     <template slot="title">
  16.                       <i class="el-icon-location"></i>
  17.                       <span>{{item.name}}</span>
  18.                     </template>
  19.                     <el-menu-item-group v-for="(child,index) in item.children" :key="index">
  20.                       <el-menu-item :index="child.path">{{child.name}}</el-menu-item>
  21.                     </el-menu-item-group>
  22.                     </el-submenu>
  23.             </template>
  24.           </el-menu>
  25.         </el-aside>
  26.     </div>
  27. </template>
  28. <script>
  29. export default{
  30.     name:"menu_",
  31.     data(){
  32.         return{
  33.             menus:[]
  34.         }
  35.     },
  36.     created(){
  37.         console.log(this.$router.options.routes)
  38.         this.menus = [...this.$router.options.routes]
  39.     }
  40. }
  41. </script>
  42. <style scoped>
  43. .el-aside{
  44.     height: 100%;
  45. }
  46. .el-menu{
  47.     height: 100%;
  48. }
  49. .el-submenu-item{
  50.     min-width: 0;
  51. }
  52. </style>

 92c5aa901b76417e870c9e462bd036e1.png

 设置路由出口，让Main区域跟着路由变化而显示不同的内容。在Home.vue中修改，把原始的Main改为router-view

1350333870ae4e81b29101fbb2aa841f.png

 3b252365f3f04f3c8eba3f4649faaaeb.png

接下来创建面包屑 ,在component文件夹下创建Breadcrumb.vue

  1. <template>
  2.     <div>
  3.         <el-card>
  4.             <el-breadcrumb separator-class="el-icon-arrow-right">
  5.                 <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  6.                 <el-breadcrumb-item
  7.                 v-for="(item,index) in $route.matched"
  8.                 :key="index"
  9.                 >{{item.name}}</el-breadcrumb-item>
  10.               </el-breadcrumb>
  11.         </el-card>
  12.     </div>
  13. </template>
  14. <script>
  15. export default{
  16.     name:"Breadcrumb_",
  17.     data(){
  18.         return{}
  19.     }
  20. }
  21. </script>
  22. <style scoped>
  23. </style>

在Home.vue中注册

  1. <template>
  2.   <div class="home">
  3.     <!-- 头部 -->
  4.     <Header>Header</Header> 
  5.     <el-container class="content">
  6.       <!-- 左侧菜单栏 -->
  7.         <Menu />
  8.         <!-- 内容 -->
  9.       <el-container>
  10.         <el-main>
  11.           <!-- 面包屑 -->
  12.           <Bread />
  13.           <div class="cont">
  14.             <router-view></router-view>
  15.           </div>     
  16.         </el-main>
  17.         <!-- 底部 -->
  18.         <el-footer><Footer /></el-footer>
  19.       </el-container>
  20.     </el-container>
  21.   </div>
  22. </template>
  23.  
  24. <script>
  25. import Bread from './common/Breadcrumb'
  26. import Header from './common/Header'
  27. import Footer from './common/Footer'
  28. import Menu from './common/Menu.vue'
  29. export default {
  30.   name: 'HelloWorld',
  31.   components:{ //注册
  32.     Header,
  33.     Footer,
  34.     Menu,
  35.     Bread
  36.   },
  37.   data(){
  38.     return {}
  39.   }
  40. }
  41. </script>
  42.  
  43. <!-- Add "scoped" attribute to limit CSS to this component only -->
  44. <style scoped>
  45.   .home{
  46.     width:100%;
  47.     height:100%;
  48.   }
  49.   .content{
  50.     position: absolute;
  51.     width: 100%;
  52.     top:68px;
  53.     bottom: 0;
  54.   }
  55.   .count{
  56.     margin:20px 0;
  57.   }
  58. </style>

 

7b3b7c7e0e0d4fc0a45b9e2eebf20c69.png

 以上就是全部内容。

 

 

 

 

 

 

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/100286
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号