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.全局引入：
php
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文件
php
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
["@babel/preset-env",{"modules":false}]
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}最后在main.js里面按需引入
php
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示例导出
php
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挂载到根节点上。
php
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里面进行路由和组件的映射：
php
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里面导入使用
php
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文件如下
php
<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这个值。