Vue项目实战-后台管理系统

创作开始时间：2023年10月9日 

基础知识：

• Node_modules 用来存放包管理工具下载安装的包的文件夹
• Public 公共资源
• Src 源文件
• .browerslistr 项目配置工具
• .gitignore git配置
• Babel.config 转码器
• Package.json 项目依赖
• Readme.md 说明文档
• Yarn.lock 文件备件及避免意外修改

实际开发：

element-ui框架引入和目录结构

element-ui框架引入

https://element.eleme.cn/#/zh-CN/component/menu

目录结构：

其中index，stats文件夹都各自包含一个index.vue文件

---

基础文件的配置 

src目录下的main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Home from './view/home/index/index';
import Login from './view/login/login';

Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

router目录下的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/',
      redirect:'/home'
    },
    {
      path:'/login',  //登录页
      name:'login',
      component:()=> import('../view/login/login'),
    },
    {
      path:'/home',     //布局页
      name:'home',
      component:()=> import('../view/home/index'),
      children:[
        {
          path:'/index',     //首页
          name:'index',
          component:()=> import('../view/home/index/index.vue')
        },
        {
          path:'/stats',     //数据管理
          name:'stats',
          component:()=> import('../view/home/stats/index.vue')
        },
        {
          path:'/wms',     //信息管理
          name:'wms',
          component:()=> import('../view/home/wms/index.vue'),
          children:[
            {
              path:'/wms/list',     //信息列表
              name:'wmslist',
              component:()=> import('../view/home/wms/list.vue')
            },
          ]
        },
      ]
    },
   
  ]

})

src目录下的App根文件

<template>
  <div id="app">
    <el-row>
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
    <div id="nav">
      <router-link to="/">Home</router-link>
      <router-link to="/login">Login</router-link>
      <router-view></router-view>     
      <!-- 这一行，我忘记添加router-view 了然后很久很久，我的路由能跳转但是没有内容显示出来。我还试着把router-link放在了router-view里面，然后就只出现了home页面 -->
    </div>
  </div>
  
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

---

开发过程中的问题：

缺少router-view渲染

当我点击“首页”和“信息管理”main部分不能显示出来

 

我发现我的/home/index.vue页面main模块部分忘记添加

<router-view></router-view>

路由路径错误 

 添加了之后“数据管理”以及“列表管理”的main模块内容可以显示，但是“首页部分还是不行”

经过复查发现，是我的router传错了路径

<el-menu-item index="/home">
  <i class="el-icon-menu"></i>
  <span slot="title">首页</span>
</el-menu-item>

 要把"/home"修改为"/index"

      <el-menu-item index="/index">
        <i class="el-icon-menu"></i>
        <span slot="title">首页</span>
      </el-menu-item>

---

侧边导航栏组件出现滚动条

问题效果图如下：

添加代码：
 

  .el-submenu .el-menu-item{
    overflow: hidden;
  }

效果如下:

 Property or method "item" is not defined：

报错信息：

解决方案：

---

 指示器距离走马灯很远

解决方案修改指示器布局：

.el-carousel__indicators {
  /* 调整指示器的布局 */
  display: flex;
  justify-content: center;
  align-items: center;
}

实现效果如下：