vue2+elementUI 后台管理系统案例

本文参考B站Vue项目实战

一、新建项目，搭建框架

1、下载并安装环境和包管理器,按顺序操作

① Node.js

作用：js的运行环境，加快了运行速度

下载：官网下载，无脑安装一直next就行；npm包管理器，在Node下载好后，自动就有了

检查下载：控制台输入 node -v  ，出现版本号，即安装成功

② cnpm

作用：和npm一样是包管理器，但npm是国外的，cnpm是中国的，所以下载包的速度会更快，

下载：npm install -g cnpm --registry=https://registry.npm.taobao.org

检查下载：cnpm -v

③ yarn
作用：也是包管理器，但他的有点就是能保证下载依赖的版本一致性，速度也很快

下载：npm install -g yarn

检查下载：yarn -v

注：以上三种包管理器，npm、cnpm、yarn可按需使用，cnpm和yarn选你喜欢的下载即可

④vue-cli 

作用：vue脚手架，最主要的功能就是初始化项目，搭建项目

下载：npm install -g vue-cli 

检查下载：vue -V

二、新建项目，引入elementUI和router

1、新建项目

vue create 项目名称

项目名称不能有大写，可以用下划线或者中划线连接，例如：first_demo

2、引入elementUI

elementUI前端组件库，引入方式有两种：全局引入、按需引入

一般采用按需引入，这样可以缩小文件体积，避免冗余。

​​​​​​​elementUI官网也有很详细的介绍

下载：npm i element-ui -S

使用：在main.js中引入，之后就可以在界面上使用了。

3、router

下载：npm install vue-router --save

使用：可参考路由的安装与使用

由此我们就搭建起了一个新项目的框架，大致结构如下：

二、构造界面主体

1、根据elementUI组件，画出界面

可使用elementUI中的组件来搭建

以下是main.js中按需引入的代码(按需引入)：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

2.左侧菜单栏的数据渲染

我们观察菜单分为两类：有下级目录，无下级目录。此时可以定义方法，将两种数据筛选分类

 computed: {
    noChildren() {//没有下级节点
      return this.menu.filter((item) => !item.children);
    },
    hasChildren() {//有下级节点
      return this.menu.filter((item) => item.children);
    }
  },

当我们从后台取得数据后，可以用v-for语法将数据渲染到界面上。

<template>
  <el-menu
    default-active="1-4-1"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <h3>{{ isCollapse ? "后台" : "洋芋穿搭管理系统" }}</h3>
    <el-menu-item
      v-for="item in noChildren"
      :index="item.path"
      :key="item.path"
      @click="changeMenu(item)"
    >
      <i :class="'el-icon-' + item.icon"></i>
      <span slot="title">{{ item.label }}</span>
    </el-menu-item>
    <el-submenu v-for="item in hasChildren" :index="item.path" :key="item.path">
      <template slot="title">
        <i :class="'el-icon-' + item.icon"></i>
        <span slot="title">{{ item.label }}</span>
      </template>
      <el-submenu-group
        v-for="(subItem, subIndex) in item.children"
        :key="subItem.path"
      >
        <el-menu-item :index="subIndex">{{ subItem.label }}</el-menu-item>
      </el-submenu-group>
    </el-submenu>
  </el-menu>
</template>

三、组件的跳转和通信

1、页面跳转

这肯定要用到路由，我们先前已经引入了路由，接下来做的就是 定义路由 + 全局引入 + 使用

定义：可以新建一个router文件夹来存放

import Vue from "vue"
import VueRouter from "vue-router"

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: "Main",
        component: () => import("../views/Main.vue"),
        children: [
            {
                path: '/home',
                name: "home",
                component: () => import('../views/Home/HomeIndex.vue')
            },
            {
                path: '/user',
                name: "user",
                component: () => import('../views/User/UserIndex.vue')
            }

        ]
    }
];

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

export default router

在main.js中全局引入：

import router from './router/index.js'

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

使用：在左侧菜单栏的方法里

  methods: {
    changeMenu(item) {
      this.$router.push({
        name: item.name,
      });
    }
  },

2、vuex的使用

vuex就是状态存储器，也可以理解为用来定义所有组件的公用变量和方法。

组件之间，子传父，父传子，不是很复杂，但是隔得老远的远房亲戚之间通信并不容易

所以需要使用vuex。

安装：npm i vuex      如果不行就用 yarn add vuex

定义：新建一个store文件夹，其中的tab就是自己定义的模块状态

import Vue from "vue";
import Vuex from "vuex"
import Tab from "./tab.js"

Vue.use(Vuex);


export default new Vuex.Store({
    modules:{
        Tab
    }
})

tab.js

export default{
    state:{
        isCollapse:false
    },
    mutations:{
        collapseMenu(state){
            state.isCollapse = ! state.isCollapse;
        }
    }
}

全局引入：方法和上面的router一样

使用：此时就可以在左侧栏的computed中使用控制左侧栏展开收起的变量了

  isCollapse() {
      return this.$store.state.Tab.isCollapse;
    },

 methods:{
    handleMenu(){
      this.$store.commit("collapseMenu");
    }
  }

未完待续。。。。