黑客灵魂

这个屌丝很懒，什么也没留下！

热门标签

vue3后台管理系统_vue3 后台管理系统

作者：黑客灵魂 | 2024-08-11 23:40:40

踩

vue3 后台管理系统

vue3后台管理系统

vite构建vue3项目
项目中其他需求的引入
工具类的使用
普通component组价
路由views组件

vite构建vue3项目

npm create vite@latest，再回车
按要求写下项目名；manage-app
选择vue,再回车
选择javascript,在回车
cd manage-app,到该项目目录下,回车
安装依赖：npm install，再回车
启动项目：npm dev
main.js文件的改变：

createApp(App).mount('#app')
//上面那行改为下面这行，一样的，
const app=createApp(App)
app.mount('#app')

1
2
3
4
5

项目中其他需求的引入

1. element-plus引入

1. 全部引入：

在终端安转：npm install element-plus --save
main.js文件引入：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app=createApp(App)
app.use(VueElementPlus)
app.mount('#app')

1
2
3
4
5
6
7

使用：直接在组件里编写element代码即可

2. 按需引入：

在终端安转：npm install element-plus --save
在终端安装插件：npm install -D unplugin-vue-components unplugin-auto-import
在 vite.config.ts文件引入：

//引入部分
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
    ElementPlusResolver } from 'unplugin-vue-components/resolvers'

//plugins数组部分加入
  plugins: [
    AutoImport({
   
      resolvers: [ElementPlusResolver()],
    }),
    Components({
   
      resolvers: [ElementPlusResolver()],
    }),
  ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

使用：直接在组件里编写element代码即可

3. 手动引入：

在终端安转：npm install element-plus --save
终端安装：npm install unplugin-element-plus
在 vite.config.ts文件引入：

//引入部分
import ElementPlus from 'unplugin-element-plus/vite'

//plugins数组部分加入
   plugins: [ElementPlus()],
1
2
3
4
5

使用：在使用element的组件里引入具体需要的插件，比如需要引入按钮插件则需要加这段代码：

<script>
import {
    ElButton } from 'element-plus'

export default defineComponent({
   
    component:{
    ElButton}
})
</script>
1
2
3
4
5
6
7
8
9
10

2. vue3引入路由

终端安装：npm install vue-router -S
新建文件：src / router / index.js：文件配置如下

import {
   createRouter,createWebHashHistory} from 'vue-router' 

const routes=[
    {
   
        path:'/',
        redirect:'/home',
        component:()=>import('../views/MainApp.vue'),
        children:[
            {
   
                path:'/home',
                nsme:'home',
                component:()=>import('../views/home/HomeApp.vue')
            }
        ]
    }
]

const router=createRouter({
   
    history:createWebHashHistory(),
    routes
})

export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

main.js文件引入

import router from './router'

const app=createApp(App)
app.use(router)
app.mount('#app')
1
2
3
4
5

使用：在具体的组件中需要导入

import {
   useRouter} from 'vue-router' //导入1
export default {
   
  setup() {
   
     let router=useRouter()//声明2
//下面可以配置方法进行路由跳转
     }
}
1
2
3
4
5
6
7
8
9
10

需要显示路由组件的地方添加<router-view></router-view>

3. element-plus图标的引入和使用

在终端安转：npm install element-plus --save
终端安转：npm install @element-plus/icons-vue
main.js引入：

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.mount('#app')
1
2
3
4
5
6
7
8
9
10

静态引入图标

直接点击想要的图标图案，就可以复制相关代码

//例如加号图标
<el-icon><Plus /></el-icon>
1
2

动态引入图标

 <!-- 遍历菜单栏-->
    <el-menu-item :index="item.path" v-for="item in noChildren()" :key="item.path">
    
        <!-- 根据遍历得到的item，动态引入图标 -->
       <component class="icons" :is="item.icon"></component>
       
    </el-menu-item>
1
2
3
4
5
6
7

4. 引入less

终端引入less：npm install less-loader less --save-dev

5. 基础样式引入

在src/assets新建文件夹less
在less文件夹新建reset.less文件，这个是全局样式
在less文件夹新建index.less文件，里面只写@import './reset.less';
在main.js中引入index.js文件，import './assets/less/index.less'

6. vuex的引入

1. 终端安装：npm install vuex -S
1. 新建文件：src / store / index.js，文件配置如下

import {
   createStore} from 'vuex'
export default createStore({
   
   //里面配置数据方法等
    state:{
   //数据
    
    } ,
    mutations:{
   //修改数据的方法

    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

1. 在main.js文件引入

import store from './store/index.js'

const app=createApp(App)
app.use(store)
app.mount('#app')
1
2
3
4
5

1. 使用：使用vuex数据和方法的组件需要引入

<script>
import {
    useStore } from "vuex";
export default defineComponent ({
   
  setup() {
   
  //定义store
  let store = useStore();
  
  function handleCollapse(){
   
    //调用vuex中的mutations中的updateIsCollapse方法
     store.commit("updateIsCollapse")
  }
    return {
   
       handleCollapse
    };
  },
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

工具类的使用

一、mock的使用

本地mock 的使用

终端安转：npm install mockjs
新建文件：src / api / mockData / home.js（home.js表示的是home组件的mock数据）---------文件配置如下：

export default{
   
   getHomeData:()=>{
       //导出home 的数据
       return {
   
           code:200,
          data:{
   
           tableData :[
               {
   
                 name: "oppo",
                 todayBuy: 500,
                 monthBuy: 3500,
                 totalBuy: 22000,
               },
               {
   
                 name: "vivo",
                 todayBuy: 300,
                 monthBuy: 2200,
                 totalBuy: 24000,
               },
               {
   
                 name: "苹果",
                 todayBuy: 800,
                 monthBuy: 4500,
                 totalBuy: 65000,
               },
               {
   
                 name: "小米",
                 todayBuy: 1200,
                 monthBuy: 6500,
                 totalBuy: 45000,
               },
               {
   
                 name: "三星",
                 todayBuy: 300,
                 monthBuy: 2000,
                 totalBuy: 34000,
               },
               {
   
                 name: "魅族",
                 todayBuy: 350,
                 monthBuy: 3000,
                 totalBuy: 22000,
               },
             ]
          }
       }
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

再建文件：src / api / mock.js ，这个文件引入所有的mock数据，并且全部导出。----------- 文件配置如下

//导入mockjs
import Mock from 'mockjs'  

//导入home的数据
import homeApi from './mockData/home' 

//拦截请求,两个参数，第一个参数是设置的拦截请求数据的路径，第二个参数是对应数据文件里该数据的方法a
Mock.mock('/home/getData',homeApi.getHomeData)
1
2
3
4
5
6
7
8

引入：在mian.js文件里引入mock--------如下引入

import './api/mock.js'
1

使用：在响应的组件上使用

async function getTableList(){
   
  await axios.get("/home/getData").then((res)=>{
   
          tableData.value=res.data.data.tableData
   })
}
onMounted(()=>{
   
  //调用getTableList()方法
getTableList()
})
1
2
3
4
5
6
7
8
9
10
11
12

线上fastmock 的使用

点击“+”，创建项目，
得到项目的根路径
点击新增接口
编辑接口路径以及返回的数据
最终得到请求拦截地址，与请求得到的数据
在组件里的使用：

//axios请求table列表的数据,并且将请求来的数据赋值给tableData
 async function getTableList(){
   
    await axios
    //该路径为线上mock的接口根路径与对应数据请求的路径的拼接。
    .get("https://www.fastmock.site/mock/d32d92a0e177cd10b103d38a2b74d3ec/api/home/getTableData")
    .then((res)=>{
   
        if (res.data.code == 200){
   
            //请求成功之后在进行渲染
             tableData.value=res.data.data
           }
     })
}
onMounted(()=>{
   
    //调用getTableList()方法
getTableList()
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

二、二次封装axios

二次封装axios的原因：处理接口请求之前或接口请求之后的公共部分
终端安装：npm install axios -S
在新建文件（环境配置文件）：src /config / index.js------文件如下

/**
 * 环境配置文件
 * 一般在企业级项目里面有三个环境
 * 开发环境
 * 测试环境
 * 线上环境
 */
// 当前的环境赋值给变量env
const env = import.meta.env.MODE || 'prod'

const EnvConfig = {
   
  //1、开发环境
  development: {
   
    baseApi: '/api',
    //线上mock的根路径地址
    mockApi: 'https://www.fastmock.site/mock/d32d92a0e177cd10b103d38a2b74d3ec/api',
  },
  //2、测试环境
  test: {
   
    baseApi: '//test.future.com/api',
    mockApi: 'https://www.fastmock.site/mock/d32d92a0e177cd10b103d38a2b74d3ec/api',
  },
  //3、线上环境,企业才会用，
  pro: {
   
    baseApi: '//future.com/api',
    mockApi: 'https://www.fastmock.site/mock/d32d92a0e177cd10b103d38a2b74d3ec/api',
  },
}

export default {
   
  env,
  // mock的总开关,true则项目的所有接口调用的是mock数据
  mock: true,
  ...EnvConfig[env]//结构
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

新建文件：src / api /request.js-------文件如下

import axios from 'axios'
import config from '../config'
//错误提示
import {
    ElMessage } from 'element-plus'
const NETWORK_ERROR = '网络请求异常,请稍后重试.....'


//创建axios实例对象service
const service=axios.create({
   
    //根路径为config里的index.js文件里的开发环境的baseApi
    baseURL:config.baseApi
})


//在请求之前做的一些事情，request
service.interceptors.request.use((req)=>{
   
    //可以自定义header
    //jwt-token认证的时候
    return req//需要return出去，否则会阻塞程序
})
 


//在请求之后做的一些事情，response
service.interceptors.response.use((res)=>{
   
    console.log(res)
    //解构res的数据
    const {
    code, data, msg } = res.data
     // 根据后端协商,视情况而定
    if (code == 200) {
   
    //返回请求的数据
    return data
  } else {
   
    // 网络请求错误
    ElMessage.error(msg || NETWORK_ERROR)
     // 对响应错误做点什么
    return Promise.reject(msg || NETWORK_ERROR)
  }
})



//封装的核心函数
function request(options){
   
    //默认为get请求
    options.methods=options.methods || 'get'
    if (options.method.toLowerCase() == 'get') {
   
        options.params = options.data
      }

            // 对mock的处理
  let isMock = config.mock  //config的mock总开关赋值给isMock
  if (typeof options.mock !== 'undefined') {
    //若组件传来的options.mock 有值，单独对mock定义开关
    isMock = options.mock  //就把options.mock 的值赋给isMock
  }
   // 对线上环境做处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/966685