使用vue3+element-plus+pinia+axios搭建一个基本的后台管理项目

---

前言

作为一个开发人员，从零开始搭建一个项目是我们必须掌握的技能，本文介绍了使用vue3+element-plus+pinia+axios搭建一个后台管理系统项目的步骤。

---

安装

1.使用vue脚手架搭建项目

确保你安装了最新版本的 Node.js，使用你喜欢的包管理工具搭建项目，本文使用包管理工具pnpm搭建vue项目

npm create vue
yarn create vue
pnpm create vue

执行以上某一条命令之后，你就会看到一些可选功能的提示，选择你需要的功能即可完成搭建，下图是完成搭建示例图。

项目安装完成后，进入项目根目录，安装依赖，启动项目服务器，启动成功即项目搭建成功

cd vue-project
pnpm install
pnpm dev

2.项目中添加element-plus并使用按需引入方式

安装element-plus

//添加element-plus
pnpm add element-plus
//按需引入需要安装插件
pnpm install -D unplugin-vue-components unplugin-auto-import

vite.config.js中配置

代码如下：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//1.element-plus按需引入 导入插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


export default defineConfig({
  plugins: [
    vue(),
    //2.element-plus按需引入 注册插件
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
 
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

测试安装以及按需引入是否成功

项目中删除多余的代码或文件，在App.vue下添加代码之后刷新页面，成功显示按钮即可代表已成功引入。

//测试代码 App.vue
<template>
	//...
	<el-button type="success">成功</el-button>
	//...
</template>

3.安装less(css的一种预处理语言)

pnpm install less less-loader --save-dev

测试安装less是否成功 测试代码如下

样式能正常显示，说明安装成功。

//App.vue
<template>
	<el-button type="success">成功</el-button>
	<div class="box">
	  我是测试代码
	</div>
  	<RouterView />
</template>

//使用less
<style lang="less">
*{
  padding:0;
  margin:0;
}
.box{
  color: red;
  font-size: 18px;
  font-weight: 700;
}

</style>

4.pinia持久化

安装持久化插件

pnpm add pinia-plugin-persistedstate

main.js导入注册pinia持久化插件

//main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
// 1.导入pinia持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const app = createApp(App)
const pinia = createPinia()
// 2.注册pinia持久化
app.use(pinia.use(piniaPluginPersistedstate))
app.use(router)

app.mount('#app')

开启持久化 persist:true

//src/stores/couter.js
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
},{
  persist:true //开启持久化
})

测试持久化是否开启成功

App.vue中调用useCounterStore 仓库进行测试，测试代码如下

<script setup>
import { useCounterStore } from '@/stores/counter'
const useCounter = useCounterStore()
</script>

<template>
<el-button type="success" @click="useCounter.increment">点击自增</el-button>
<div class="box">
  {{useCounter.count}}------{{useCounter.doubleCount}}
</div>
  <RouterView />
</template>

<style lang="less">
*{
  padding:0;
  margin:0;
}
.box{
  color: red;
  font-size: 18px;
  font-weight: 700;
}

</style>

添加以上代码之后，打开刷新页面，点击自增按钮，数据自增，打开开发者工具，数据已经保存在本地存储中了，再次刷新页面，数据也不会丢失，持久化完成。

5.pinia模块化

项目中已经安装pinia以及pinia持久化插件的基础上，对项目中的pinia进行模块化管理，方便项目的后续维护工作。
1.在项目目录/scr/stores下新建文件夹modules用于管理仓库模块，以及文件index.js，将counter.js迁移到文件夹modules中。index.js文件中代码如下

// /scr/stores/index.js
//此文件整合pinia相关

import { createPinia } from 'pinia'
// 导入pinia持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
// 注册pinia持久化插件
pinia.use(piniaPluginPersistedstate)

export default pinia
export * from './modules/counter' //导出counter模块

main.js文件更改为：

import { createApp } from 'vue'

import App from './App.vue'
import router from './router'
// 导入pinia
import pinia from '@/stores'

const app = createApp(App)

app.use(router)
// 注册pinia
app.use(pinia)

app.mount('#app')

App.vue测试pinia模块化是否能正常使用，代码如下：

<script setup>
// 导入counter仓库模块
import { useCounterStore } from '@/stores'
const useCounter = useCounterStore()
</script>

<template>
<el-button type="success" @click="useCounter.increment">点击自增</el-button>
<div class="box">
  {{useCounter.count}}------{{useCounter.doubleCount}}
</div>
  <RouterView />
</template>

<style lang="less">
*{
  padding:0;
  margin:0;
}
.box{
  color: red;
  font-size: 18px;
  font-weight: 700;
}

</style>

点击自增按钮，数据变化，并且数据能正常存储到本地存储中，到此，模块化配置完成。

6.数据交互axios

安装axios

pnpm install axios

封装请求拦截器和响应拦截器

在项目目录src 新建文件夹utils，再新建文件request.js

// src/utils/request.js
 //导入axios
 import axios from 'axios'
 const baseURL = '你的项目服务器接口地址'

// 创建实例时配置默认值
const instance = axios.create({
    // 基础地址 超时时间
    baseURL:baseURL, 
    timeout:5000
  });

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么...
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么...

   return response;

  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么...
 
    return Promise.reject(error);
  });
  
  export default instance
  export { baseURL }

---

axios请求数据

src目录下新建文件夹apis，用于存放请求后台接口的api模块，例如： /src/apis/user.js 请求与用户相关的接口，示例代码如下：

//导入拦截器
import request from '@/utils/request'

// 获取用户信息
export const apiGetUserInfoService = ()=>{
    return request.get('/xxx/xxx')
}

总结

以上步骤就搭建好了一个基本的后台管理项目开发环境，下面就可以按照业务需求写业务逻辑代码了。