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')
1
2
3
4
5
6
7

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"
      }
    ]
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

最后在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')
1
2
3
4
5
6
7
8

因为之后使用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示例
1
2
3
4
5
6
7
8
9
10
11
12

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')
1
2
3
4
5
6

7.在App.vue里面写路由出口，将路由匹配到的组件渲染在此位置：
8.嵌套路由：
创建main组件，然后在index.js里面进行路由和组件的映射：

const routes=[
    {
        path:"/",//主路由
        component:Main,
        children:[
            {path:"/home",component:Home},//子路由
            {path:"/user",component:User},
        ]
    }
];
1
2
3
4
5
6
7
8
9
10

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

后台

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')
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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