后台管理项目--如何搭建框架

本次后台管理项目的开发，用到技术有：vite,axios,vue3,vue-router@4,vuex4,element-plus,echarts(数据可视化)，nodejs18(推荐18，本人用的14会弹出来警告)

项目架构：

1.安装脚手架

npm init vue@latest

• 进行预设，自定义项目名，对一些工具选择是否安装，这里我只安了路由，后面就不用单独安装

• cd 跳转到我们新建立的项目里面 

•  在我们新建立的项目里面下载依赖包

npm i 

•  启动我们的文件

npm run dev

• 到这一步我们的脚手架就弄好了 

 

分析目录样式，把不需要的文件删掉，就可以啦！！

2.下载重置样式工具

npm i normalize.css

3.集成vuex

• src下创建store
• 安装vuex

npm i vuex@next -S

• 安装持久化存储插件

npm i vuex-persistedstate -S

4.在store中新建立一个index.js文件，这里为我们的存储做一些准备工作。

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import user from './modules/user'
import menu from './modules/menu'
 
const store = createStore({
	modules: {
		user,
		menu
	},
	plugins: [
		createPersistedState({
			storage: window.localStorage, //默认 修改存储的状态
			key: 'key',
		}),
	],
})
export default store

在store新建立一个modules,在modules里面建一个user.js，用于存储我们的模块信息

const user = {
    namespaced: true, // 命令空间
	// 内存
	state: {
		user: {}, //用户信息
	},
	/**
	 * 只能定义同步任务
	 */
	mutations: {
		//state:状态,后面的参数是传入的参数
		SAVE_USER(state, user) {
			state.user = user
		},
		CLEAR_USER(state) {
			state.user = {}
		},
	},
	/**
	 * actions可以定义异步任务
	 */
	actions: {
		//commit 执行mutations中方法, 后面的参数为传的参数
		saveUser({ commit }, user) {
			commit('SAVE_USER', user)
		},
		clearUser({ commit }) {
			commit('CLEAR_USER')
		},
	},
	getters: {
		user: state => state.user,
	},
	
}
 
export default user

此时不要忘了在入口文件main.js中引入Store，并将其集成。 

下一步我们进行网络封装

• 在src下面新建立一个untils（工具包）文件夹，在untils里面建立request.js文件，进行axios的二次封装。
• 首先安装axios

npm install axios -S

request.js：我们在用的时候对里面内容进行修改完善即可。 

import axios from 'axios'
 
const axiosServer = axios.create({
	baseURL: 'https://api.yuguoxy.com',
	// baseURL: 'http://10.7.162.150:8089',
	timeout: 5000,
})
 
//请求拦截器
axiosServer.interceptors.request.use(
	config => {
		// console.log('请求拦截器 config ', config)
		return config
	},
	error => {
		// 对请求错误做些什么
		return Promise.reject(error)
	}
)
 
//响应拦截器
axiosServer.interceptors.response.use(
	function (response) {
		return response.data
	},
	function (error) {
		// 对响应错误做点什么
		return Promise.reject(error)
	}
)
export default axiosServer

src下新建立一个文件夹：api,用于存放接口。例如index.js里面存储登录注册的接口。

import axiosServer from '../utils/request'
/**
 * 登录接口
 * @param {*} username 
 * @param {*} password 
 * @returns 
 */
export const RequestLogin = (username,password)=>{
    return axiosServer({
        method:'post',
        // 这里要改
        url:'/api/member/login',
        data:{
            username,
            password
        }
    })
}

安装UI组件库，按需导入

npm install element-plus --save

自动按需导入：

npm install -D unplugin-vue-components unplugin-auto-import

 在 vite.config.js中配置文件

import { defineConfig } from 'vite'
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: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

 安装css样式

npm i sass -D

对于每个文件夹下存储的文件是做什么的要清楚！ 

*在views下放的是不需要注册的单文件组件，在components下放的是可能复用的组件。

modules里面建一个user.js，用于存储我们的模块信息

untils（工具包）文件夹，在untils里面建立request.js文件，进行axios的二次封装。

api,用于存放接口。例如index.js里面存储登录注册的接口。

小编建议大家可以把自己搭建的环境，上传到git远程仓库，下次要用的时候可以直接克隆下来，不需要二次搭建，耗费时间哦！

关于后台项目的开发， 会在下一篇继续记录的。