VUE写后台管理(2)

VUE写后台管理（2）

• 1.环境
• 2.Element界面
• 3.Vue-Router路由
• 后台
• • 1.左导航栏
  • 2.上面导航条

1.环境

1.下载管理node版本的工具nvm（Node Version Manager）

2.安装node(vue工程的环境管理工具)：nvm install 16.13.0

3.安装vue工程的脚手架：npm install -g @vue/cli

4.在合适的路径下创建工程：vue create back-manage

5.项目最终打包：npm run build，生成dist文件夹就是打包文件。

2.Element界面

1.安装：npm install element-plus --save和图标安装：npm install @element-plus/icons-vue

2.全局引入：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

3.按需引入：

首先安装插件：npm install -D unplugin-vue-components unplugin-auto-import
npm install babel-plugin-component --save-dev

然后修改工程的babel.config.js文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env",{"modules":false}]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

最后在main.js里面按需引入

import { createApp } from 'vue'
import { ElButton, ElRow } from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElButton)//按需引入
app.use(ElRow)
app.mount('#app')

因为之后使用element组件，但element很多代码都用到了ts（typescripte）语法，因此需要安装相关依赖并配置：npm install @types/element-ui --save-dev

搞了好久没成功，干脆在最初创建项目时手动选择，然后选择到typescript。

3.Vue-Router路由

1.安装：npm install vue-router

2.在工程的src目录下新建router/index.js作为路由配置文件

3.在工程的src目录下新建views目录作为视图组件，然后在里面创建自己的组件文件（Home.vue和User.vue）

4.在工程的vue.config.js中关闭eslint代码风格规范校验：lintOnSave:false

5.开始在router/index.js里面将路由和组件进行映射，并创建router示例导出

import { createRouter, createWebHistory } from 'vue-router'; 
import Home from '../views/Home.vue';
import User from '../views/User.vue';
const routes=[
    {path:"/home",component:Home},//1.将路由和组件进行关系映射
    {path:"/user",component:User},
];
const router =  createRouter({
    history: createWebHistory(),//2.使用vue-router创建router实例
    routes: routes,//缩写：routes
});
export default router;//3.导出router示例

6.在main.js中将上面导出的router挂载到根节点上。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 导入你的路由配置文件
const app = createApp(App)
app.use(router) // 使用 Vue Router 插件
app.mount('#app')

7.在App.vue里面写路由出口，将路由匹配到的组件渲染在此位置：<router-view></router-view>

8.嵌套路由：

创建main组件，然后在index.js里面进行路由和组件的映射：

const routes=[
    {
        path:"/",//主路由
        component:Main,
        children:[
            {path:"/home",component:Home},//子路由
            {path:"/user",component:User},
        ]
    }
];

而组件的渲染位置除了主路由在App.vue里面渲染，子组件也在主组件的vue里面渲染，所以要在主组件里面添加<router-view></router-view>

后台

1.左导航栏

1.使用element组件搭建Main.vue的主要框架（Container 布局容器，Menu 菜单,Icon 图标）

icon用到了element的icon，需要下载npm install @element-plus/icons-vue并在main.ts里面导入使用

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// createApp(App).use(store).use(ElementPlus).use(router).mount('#app')
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(store).use(ElementPlus).use(router).mount('#app')

2.使用到了less的css解析器，所以要下载npm i less less-loader,然后在style里面加上<style lang="less" scope>

我的CommentLeft.vue文件如下

<template>
  <el-row class="tac">
    <el-col :span="12">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
      <h5 class="mb-2">后台管理</h5>
    <el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :key="item.name" :index="item.name">
      <el-icon ><component :is="item.icon"></component></el-icon>
      <template #title>{{item.label}}</template>
    </el-menu-item>
    <el-sub-menu v-for="item in hasChildren" :key="item.label" :index="item.label">
      <template #title>
        <el-icon ><component :is="item.icon"></component></el-icon>
        <span>{{item.label}}</span>
      </template>
      <el-menu-item-group @click="clickMenu(subitem)" v-for="subitem in item.children" :key="subitem.path">
        <el-menu-item :index="subitem.name">{{subitem.name}}</el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
  </el-menu>
</el-col>
</el-row>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const menuData = [
  {
    path: '/',
    name: 'home',
    label: '首页',
    icon: 'House',
    url: 'Home/Home',
  },
  {
    path: '/mall',
    name: 'mall',
    label: '商品管理',
    icon: 'GoodsFilled',
    url: 'MallManage/MallManage',
  },
  {
    path: '/user',
    name: 'User',
    label: '用户管理',
    icon: 'User',
    url: 'UserManage/UserManage',
  },
  {
    label: '其他',
    icon: 'Location',
    children: [
      {
        path: '/one',
        name: 'page1',
        label: '页面1',
        icon: 'Setting',
        url: 'Other/PageOne',
      },
      {
        path: '/two',
        name: 'page2',
        label: '页面2',
        icon: 'Setting',
        url: 'Other/PageTwo',
      },
    ],
  },
];
const noChildren = computed(() => menuData.filter(item => !item.children));
const hasChildren = computed(() => menuData.filter(item => item.children));
const router = useRouter();
const clickMenu = (item) => {
  if (router.currentRoute.value.path !== item.path && !(router.currentRoute.value.path === "/home" && item.path === "/")) {
    router.push(item.path);
  }
};

</script>


<style lang="less" scope>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu{
  height:100vh;
  h5{
    color:#fff;
    text-align:center;
    line-height: 48px;
    font-size:16px;
    font-weight:400px;
  }
}
</style>

2.上面导航条

1.使用到了icon和Dropdown 下拉菜单。

2.使用到了Vuex进行状态管理模式，就是在一个父组件下面有的好多子组件，然后这些子组件共享某些数据，下载：npm install vuex@next --save在我这里面现在left和header这两个子组件共享了isCollapse这个值。