Vue后台管理系统

最新推荐文章于 2025-07-02 11:31:24 发布

原创

最新推荐文章于 2025-07-02 11:31:24 发布 · 7.6k 阅读

76 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #npm #javascript

本文详述了使用Vue.js、npm和element-ui搭建后台管理系统的全过程，从vue-cli安装到路由设置、element-ui的按需引入、 vuex状态管理、axios请求封装，以及用户管理、权限验证等关键功能的实现。还涵盖了组件如header、菜单栏、面包屑、tag等的构建和交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请添加图片描述
npm 是node的包管理工具 yarn是为了弥补npm的缺陷而出现
yarn的速度快并行安装离线模式
安装版本的统一 .lock文件
更简洁的输出
更好的语义化

npm	yarn
npm install	yarn
npm install react --save	yarn add react
npm uninstall react --save	yarn remove react
npm install react --save-dev	yarn add react --dev
npm update --save	yarn upgrade

vue-cli搭建的详细过程

使用之前必须有node环境，确保电脑上安装了node.js
node -v可以查看安装node版本
npm -v可以查看npm是否存在了
可以选择安装cnpm和yarn

安装cnpm

http://npmmirror.com/
npm install -g cnpm --registry=https://registry.npmmirror.com安装cnpm
cnpm -v查看是否安装成功

有人说cnpm可能会引起一些奇怪的bug，稳妥起见还是把npm的源改成taobao镜像就好这里我是安装好了yarn

可以使用cnpm install -g @vue/cli安装脚手架
vue -V可以查看脚手架是否安装成功显示安装的版本

创建项目

使用 vue create projectname
在这里插入图片描述

element-ui在网页中使用

CDN
https://www.bootcdn.cn/
elementUI官网

vue官网

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true" type="success">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.9/index.js"></script>
  <script>
    new Vue({
     
     
      el: '#app',
      data: function() {
     
     
        return {
     
      visible: false }
      }
    })
  </script>
</html>

element-ui结合脚手架使用之全部引入

npm i element-ui --save-dev
在这里插入图片描述
main.js中添加

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

页面中使用个组件即可
打包时内容过大

按需引入

为了更好的看出完整引入和按需引入的差别可以先对项目进行打包
npm run build
相关步骤看官网即可

vue路由的使用

npm i [email protected]
在这里插入图片描述
main.js引入router

import router from './router'
new Vue({
   
   
  router,
  render: h => h(App),
}).$mount('#app')

src下创建router文件夹下面有index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
  {
   
   
    path: '/',
    name: "Home",
    component: () => import('../views/Home')
  }
]

const router = new VueRouter({
   
   
  routes,
  mode: 'history'
})

export default router

views文件夹放置对应的路由页面Home.vue

想要显示的页面上要写<router-view></router-view>

首页整ui的搭建

使用Container布局容器
想要使用less npm i less npm i [email protected]
views/Main.vue

左侧菜单栏的引入

navmenu
commponet/CommonAside.vue

一级菜单的实现

导航栏的文本以及数据可以存储在一个数组中，每一个在里面又是一个对象

menu: [
        {
   
   
          path: '/',
          name: 'home',
          label: '首页',
          icon: 's-home',
          url: 'Home/Home'
        },
        {
   
   
          path: '/mail',
          name: 'mail',
          label: '商品管理',
          icon: 'video-play',
          url: 'MallManage/MallManage'
        },
        {
   
   
          path: '/user',
          name: 'user',
          label: '用户管理',
          icon: 'user',
          url: 'UserManage/UserManage'
        },
        {
   
   
          label: '其他',
          icon: 'location',
          children: [
            {
   
   
              path: '/page1',
              name: 'page1',
              label: '页面1',
              icon: 'setting',
              url: 'Other/PageOne'
            }, 
            {
   
   
              path: 'page2',
              name: 'page2',
              label: '页面2',
              icon: 'setting',
              ulr: 'Other/PageTwo'
            }
          ]
        }
      ]

处理数据使用计算属性computed

 computed: {
   
   
    noChildren() {
   
   
      return this.menu.filter(item => !item.children)
    },
    hasChildren() {
   
   
      return this.menu.filter(item => item.children)
    }
  }
  //判断是否有子项 没有的话就是一级菜单