vue 创建项目

方便自己日后查阅

vue-cli

1.

vue create [项目名]

 2.

选择版本 vue2  or  vue3

 3.

出现 npm run serve 即成功

vite

 1.

npm create vite@latest

 2.

[项目名]

 3.

npm i 

4.安装axios并配置

npm i axios

request.js

import axios, { type AxiosInstance, type InternalAxiosRequestConfig, type AxiosResponse, AxiosError, AxiosRequestConfig } from 'axios';
import { useUsersStore } from '@/store/modules/user';
const userStore = useUsersStore();
export interface Result<T = any> {
	code: number;
	message: string;
	data: T;
	success: boolean;
}
export const service: AxiosInstance = axios.create({
	// baseURL: import.meta.env.VITE_GLOB_API_URL,
	baseURL: '/api',
});
/* 请求拦截 */
service.interceptors.request.use(
	(config: InternalAxiosRequestConfig) => {
		const token: string | null = userStore.token;
		const dataId: string | null = userStore.dataId;
		config.headers.Authorization = token;
		config.headers['dataId'] = dataId;
		return config;
	},
	(error) => {
		return Promise.reject(error.response);
	},
);

/* 响应拦截 */
service.interceptors.response.use(
	(response: AxiosResponse) => {
		const { code, message, msg, data } = response.data;
		// 根据自定义错误码判断请求是否成功
		// return response.data;
		const isBlob = response?.config?.responseType === 'blob' ?? false;
		if (code === 200 || isBlob) {
			// 将组件用的数据返回
			return isBlob ? response.data : data;
		} else {
			// 处理业务错误。
			return Promise.reject(new Error(message || msg));
		}
	},
	(error: AxiosError) => {
		// 处理 HTTP 网络错误
		let message = '';
		// HTTP 状态码
		const status = error.response?.status;
		switch (status) {
			case 401:
				message = 'token 失效，请重新登录';
				// 这里可以触发退出的 action
				break;
			case 403:
				message = '拒绝访问';
				break;
			case 404:
				message = '请求地址错误';
				break;
			case 500:
				message = '服务器故障';
				break;
			default:
				message = '网络连接故障';
		}

		return Promise.reject(error);
	},
);

/* 导出封装的请求方法 */
function hRequest(p: any) {
	return p.then((res: any) => [res, undefined]).catch((err: any) => [undefined, err]);
}
export const request = {
	get<T = any>(url: string, data?: any, timeout: number = 3000): Promise<T> {
		return hRequest(
			service.request({
				method: 'get',
				url: url,
				params: data,
				timeout: timeout,
			}),
		);
	},

	post<T = any>(url: string, data?: object, config?: AxiosRequestConfig): Promise<T> {
		return hRequest(service.post(url, data, config));
	},

	put<T = any>(url: string, data?: object, config?: AxiosRequestConfig): Promise<T> {
		return service.put(url, data, config);
	},

	delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
		return service.delete(url, config);
	},
};

5.安装element plus 并配置自动引入

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: [
		vue(),
		AutoImport({
			resolvers: [ElementPlusResolver()],
		}),
		Components({
			resolvers: [ElementPlusResolver()],
		}),
	],

6.安装router+pinia

npm install pinia  vue-router@4

7.配置host+跨域

vite.config.ts

server: {
		host: '0.0.0.0',
		open: true,
		proxy: {
			'/api': {
				target: 'http://xxx.xxx.x.xx:xxxx/',
				changeOrigin: true,
				rewrite: (path) => path.replace(/^\/api/, ''),
			},
		},
	},

8.配置路径别名

npm i @types/node --save

vite.config.ts

import path from 'path';
import { resolve } from 'path';

resolve: {
		alias: {
			'@': path.resolve(__dirname, './src'),
		},
	},

tsconfig.ts

"baseUrl": "./",
		"paths": {
			"@/*": [
				"src/*"
			],
		},