VUE写后台管理(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-menuactive-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这个值。