theme: fancy
highlight: a11y-light
阅读前需要对Vue3,Ts,element-plus有一点了解,如果之前用过antd组件库,使用element-plus简直信手拈来,并熟悉需要Es module,axios
首先创建一个Vue3+ts项目,建议初学不勾选eslint,并且提前下载pnpm,Vue脚手架会让你选择用pnpm还是npm管理依赖,建议使用pnpm,下载速度快且占用空间少
搭建环境
配置element-plus
安装库
- pnpm i element-plus
- 这里使用自动导入,需要使用两个插件,在官网可以找到.这里直接贴出,使用自动导入比全部导入打包后的代码体积更小
pnpm install -D unplugin-vue-components unplugin-auto-import
//在vue.config.js下进行这两个插件的配置
const {
defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
require("unplugin-vue-components/webpack", "unplugin-auto-import")({
}),
],
},
});
安装图标
pnpm install @element-plus/icons-vue
注意不能直接使用element-plus提供的代码,因为没有添加中间件
// main.ts
// 如果您正在使用CDN引入，请删除下面一行。
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.use(store).use(router).mount("#app");
国际化
因为是自动引入,步骤有所不同.直接将下面代码复制到App.ts
这里setup写在script里就不用再return了
<template>
<el-config-provider :locale="zhCn">
<router-view></router-view>
</el-config-provider>
</template>
<script setup lang="ts">
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
</script>
<style lang="scss" scoped></style>
ts对处理js文件会报错,所以我们新建一个声明文件,例如national.d.ts
//national.d.ts
declare module "element-plus/dist/locale/zh-cn.mjs";
配合vscode插件volar
在tsconfig.json中的type数组加上一项"element-plus/global"
配置路由
如果你使用eslint,命名文件名时需要驼峰写法,在eslint rules里设置'vue/multi-word-component-names': 'off'
Vue3使用路由只需要引入useRoute和useRouter
必须使用路由懒加载可以大大优化性能
对路由元信息做ts配置,之后react也要做类似操作
//src/router
declare module "vue-router" {
interface RouteMeta {
auto?: boolean;
}
}
配置Vuex
配置store/index.ts,需要导出额外的key
import {
createStore, useStore as baseUseStore, Store } from "vuex";
import {
InjectionKey } from "vue";
export interface State {
count: number;
}
export const key: InjectionKey<Store<State>> = Symbol();
export default createStore<State>({
state: {
count: 0,
},
getters: {
},
mutations: {
},
actions: {
},
modules: {
},
});
export function useStore() {
return baseUseStore(key);
}
在main.ts要导入key,将其替换成use(store, key)
之后再在组件中使用状态管理
import { useStore } from "../store/index";
const store = useStore();
另外我们还要配置vuex模块
首先我们要对这个模块里的state写ts接口,并且要引入GetterTree, MutationTree, ActionTree来对对应的部分进行类型限制,还要引入主模块里的state作为MutationTree, ActionTree的第二个泛型参数,第一个泛型参数是这个模块对state的ts接口
//模块文件user.ts
import type {
GetterTree, MutationTree, ActionTree } from "vuex";
import type {
State } from "../index";
export interface UserState {
name: string;
age: number;
}
let state = {
name: "zhang",
age: 20,
};
let getters: GetterTree<UserState, State> = {
};
let mutations: MutationTree<UserState> = {
add(state) {
},
};
let action: ActionTree<UserState, State> = {
};
export default {
namespaced: true,
state,
getters,
mutations,
action,
};
并且我们还要对主模块进行配置,首先引入子模块,及其state的ts接口.因为子模块的ts接口要和key也要产生关系.
//先在模块导入
modules: {
user,
},
//扩展接口
interface StateAll extends State {
user: UserState;
}
//使用拓展接口代替原来的key接口
export const key: InjectionKey<Store<StateAll>> = Symbol();
配置axios
首先下载axios,新建utils文件夹,里面新建http.ts
主要是配置接口路径,请求,响应拦截器,统一调用方法
AxiosRequestConfig, AxiosResponse是axios已经定义好的ts类型,因为我们需要配置axios的参数和返回类型,所以我们要将其引入
import type { AxiosRequestConfig, AxiosResponse } from "axios";
//src/utils/http.ts
import axios from "axios";
import type {
AxiosRequestConfig, AxiosResponse } from "axios";
const instance = axios.create({
baseURL: "https://example.com/api", //按照实际接口地址填写
headers: {
"Content-Type": "application/json",
Authorization: "Bearer token", // 假设需要在请求头中添加授权令牌
},
timeout: 5000, // 设置请求超时时间为 5 秒钟
});
// 添加请求拦截器
instance.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
instance.interceptors.response.use(
function (response) {
// 对响应数据做点什么
return response;
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
);
interface Data {
[index: string]: unknown;
}
interface Http {
get: (
url: string,
data?: Data,
config?: AxiosRequestConfig
) => Promise<AxiosResponse>;
post: (
url: string,
data?: Data,
config?: AxiosRequestConfig
) => Promise<AxiosResponse>;
put: (
url: string,
data?: Data,
config?: AxiosRequestConfig
) => Promise<AxiosResponse>;
delete: (
url: string,
data?: Data,
config?: AxiosRequestConfig
) => Promise<AxiosResponse>;
patch: (
url: string,
data?: Data,
config?: AxiosRequestConfig
) => Promise<AxiosResponse>;
}
//封装统一调用的方法
const http: Http = {
get(url, data, config) {
return instance.get(url, {
params: data, ...config });
},
post(url, data, config) {
return instance.post(url, data, config);
},
put(url, data, config) {
return instance.put(url, data, config);
},
delete(url, data, config) {
return instance.delete(url, {
data, ...config });
},
patch(url, data, config) {
return instance.patch(url, data, config);
},
};
export default http;
使用方法我们只需要将文件引入调用对应的方法例如http.get('/info',{id:1}),axios会自动序列化.
