从零开始搭建Layout框架 --- vue3 + webpack + element-plus

本文涵盖axios封装 环境变量 动态路由表 登陆鉴权 

1. 使用vue-cli创建项目

确保电脑已安装node.js

在命令窗口 使用 node -v查看是否已安装

使用 vue creare <项目名称> 创建项目

....

2.创建环境变量 

在根目录下创建.env.development .env.production连个文件分别用来保存开发环境和测试环境的环境变量

3.配置跨域代理

在vue.config.js中写入

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
	//开发服务,build后的生产模式还需nginx代理
	devServer: {
		open: false, //运行后自动打开浏览器
		port: process.env.VUE_APP_PORT, //挂载端口
		proxy: {
            //匹配的接口前缀地址
			'/api': {
				target: process.env.VUE_APP_API_BASEURL,
				ws: true,
				pathRewrite: {   
					'^/api': '/' //将前缀替换为/
				}
			}
		},
		headers: {
			'Access-Control-Allow-Origin': '*',
		}
	}
})

4. 路由配置

在src下创建 router文件夹

创建 router/index.js router/systemRouter.js文件 

systemRouter.js用于保存公共路由 即无需登录也能直接访问的路由

router/index.js

import {createRouter, createWebHashHistory} from 'vue-router';
import systemRouter from './systemRouter';

//系统路由
const routes = systemRouter

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

export default router

router/systemRouter.js

//系统路由
const routes = [
	{
		path: "/login",
		component: () => import('@/views/login'),
		meta: {
			title: "登录"
		}
	},
    ....
]

export default routes;

之后在main.js中注册完成路由基础配置

import router from './router'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);

app.use(router);

//挂载app
app.mount('#app');

5.axios封装

在src下创建 utils/request.js文件

import axios from 'axios';
import router from '@/router';

axios.defaults.baseURL = ''

axios.defaults.timeout = 5000

// HTTP request 拦截器 在请求发送之前进行必要操作处理 例如添加统一cookie 请求体加验证设置请求头等等
axios.interceptors.request.use(
	(config) => {
        let token = "*******"
		config.headers.token =  token
		return config; //必须要在最后return config
	},
	(error) => {
		return Promise.reject(error);
	}
);

// HTTP response 拦截器 响应拦截器 在请求得到响应之后对响应体的一些处理通常是数据统一处理 判断登陆失效 错误判断等等
axios.interceptors.response.use(
	(response) => {
		return response;  //在此不做处理可根据自己需要自行配置
	},
	(error) => {
        //错误处理 根据项目自行配置

		return Promise.reject(error);
	}
);

var http = {

	/** get 请求
	 * @param  {接口地址} url
	 * @param  {请求参数} params
	 * @param  {参数} config
	 */
	get: function(url, params={}, config={}) {
		return new Promise((resolve, reject) => {
			axios({
				method: 'get',
				url: url,
				params: params,
				...config
			}).then((response) => {
				resolve(response.data);
			}).catch((error) => {
				reject(error);
			})
		})
	},

	/** post 请求
	 * @param  {接口地址} url
	 * @param  {请求参数} data
	 * @param  {参数} config
	 */
	post: function(url, data={}, config={}) {
		return new Promise((resolve, reject) => {
			axios({
				method: 'post',
				url: url,
				data: data,
				...config
			}).then((response) => {
				resolve(response.data);
			}).catch((error) => {
				reject(error);
			})
		})
	},

	/** put 请求
	 * @param  {接口地址} url
	 * @param  {请求参数} data
	 * @param  {参数} config
	 */
	put: function(url, data={}, config={}) {
		return new Promise((resolve, reject) => {
			axios({
				method: 'put',
				url: url,
				data: data,
				...config
			}).then((response) => {
				resolve(response.data);
			}).catch((error) => {
				reject(error);
			})
		})
	},

	/** patch 请求
	 * @param  {接口地址} url
	 * @param  {请求参数} data
	 * @param  {参数} config
	 */
	patch: function(url, data={}, config={}) {
		return new Promise((resolve, reject) => {
			axios({
				method: 'patch',
				url: url,
				data: data,
				...config
			}).then((response) => {
				resolve(response.data);
			}).catch((error) => {
				reject(error);
			})
		})
	},

	/** delete 请求
	 * @param  {接口地址} url
	 * @param  {请求参数} data
	 * @param  {参数} config
	 */
	delete: function(url, data={}, config={}) {
		return new Promise((resolve, reject) => {
			axios({
				method: 'delete',
				url: url,
				data: data,
				...config
			}).then((response) => {
				resolve(response.data);
			}).catch((error) => {
				reject(error);
			})
		})
	},

	/** jsonp 请求
	 * @param  {接口地址} url
	 * @param  {JSONP回调函数名称} name
	 */
	jsonp: function(url, name='jsonp'){
		return new Promise((resolve) => {
			var script = document.createElement('script')
			var _id = `jsonp${Math.ceil(Math.random() * 1000000)}`
			script.id = _id
			script.type = 'text/javascript'
			script.src = url
			window[name] =(response) => {
				resolve(response)
				document.getElementsByTagName('head')[0].removeChild(script)
				try {
					delete window[name];
				}catch(e){
					window[name] = undefined;
				}
			}
			document.getElementsByTagName('head')[0].appendChild(script)
		})
	}
}

export default http;

在src下创建 api文件夹

创建 api/***.js 用于存储接口数据

示例

import http from "@/utils/request"

export default {
    login:{
        // /api为跨域代理匹配字段 此处无需再写完整地址
		url: '/api/login',
		name: "",
		get: async function(data={}){
			return await http.get(this.url, data);
		}
	}
}

6.引入vuex  vuex模块化

npm install vuex

在src下创建 store文件夹

创建 store/modules文件夹 用于存储各个模块

创建 store/index.js文件 

创建store/modules/user.js 模块 存储用户信息等内容

export default {
	state: {
		
	},
    getters:{
    
    },
	mutations: {
		
	},
	actions: {
		
	}
}

在store/index.js中引入

import { createStore } from 'vuex';
import user from './modules/user.js'


export default createStore({
	modules:{
        user
    }
});

自动导入所有模块代码

import { createStore } from 'vuex';

const files = require.context('./modules', false, /\.js$/);
const modules = {}
files.keys().forEach((key) => {
	modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})

export default createStore({
	modules
});

7. 封装localStorage 工具并全局注册

创建 utils/tool.js 用来存储各种工具函数

const tool = {}

/* localStorage */
tool.data = {
	set(key, data, datetime = 0) {
        let cacheValue = {
            content: data,
            datetime: parseInt(datetime) === 0 ? 0 : new Date().getTime() + parseInt(datetime) * 1000
        }
        return localStorage.setItem(key, JSON.stringify(cacheValue))
	},
	get(key) {
        try {
            const value = JSON.parse(localStorage.getItem(key))
            if (value) {
                let nowTime = new Date().getTime()
                if (nowTime > value.datetime && value.datetime != 0) {
                    localStorage.removeItem(key)
                    return null;
                }
                return value.content
            }
            return null
        } catch (err) {
            return null
        }
	},
	remove(key) {
		return localStorage.removeItem(key)
	},
	clear() {
		return localStorage.clear()
	}
}


export default tool

此处为localStorage 增加了超时功能可自行选择

8.引入 element-plus

npm install element-plus --save

 element-plus/icons-vue需要单独引入并注册

 npm install @element-plus/icons-vue

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "element-plus/theme-chalk/display.css";
import * as elIcons from '@element-plus/icons-vue'
import router from "./router";
import store from "./store";
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.use(store);
app.use(router);
app.use(ElementPlus);
for(let icon in elIcons){
	app.component(`ElIcon${icon}`, elIcons[icon])
}

//挂载app
app.mount("#app");

至此准备工作结束