前言
- 听说2021年是vue3.0大爆发的一年 😂
- 话说vue3.0正式版都发布大半年了,你不会对vue3.0还一知半解吧 😭😭
- 长话不短说,完整版本的vite2.x + vue3.x + typescript + element-plus教程送给大家
- 完整版仓库地址请点击
依赖版本
vite@2.1.3 依赖node版本12.x.x以上
element-plus@1.0.2-beta.35
Vue-router@4.0.5
vuex@4.0.0
axios@0.21.1
一、初始化一个vite项目
1. npm init @vitejs/app 或者 yarn create @vitejs/app // 默认vite最新版本2.1.3
2. Select a template: vue-ts
1.1 vite.config.ts 配置
// 下载按需加载的插件 vite-plugin-style-import
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src') //设置别名
}
},
plugins: [
vue(),
styleImport({
libs: [
{
libraryName: 'element-plus',
esModule: true,
resolveStyle: (name) => {
// 由于引入了local语言配置,所以这里会加载local.css文件,但是不存在此文件,故会报错
// if (name === 'locale') {
// return 'element-plus/lib/theme-chalk/el-option.css';
// }
return `element-plus/lib/theme-chalk/${name}.css`;
},
ensureStyleFile: true // 忽略文件是否存在, 导入不存在的CSS文件时防止错误。
}
]
})
],
server: {
port: 3000, //启动端口
hmr: {
host: '127.0.0.1',
port: 3000
}
}
});
二、添加eslint和prettier
// 安装eslint和prettier依赖
npm install eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue prettier --save-dev
// 安装typescript依赖
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
- 文章内容限制,请直接进入仓库复制即可, 仓库地址
三、添加vue-router
npm install vue-router@next (下载4.0.5版本)
// 创建router/index.ts文件,配置如下
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
{
path: '/login',
name: 'Login',
meta: {
title: '登录',
keepAlive: true,
requireAuth: false
},
component: () => import('@/views/login/login.vue')
},
{
path: '/',
name: 'Index',
meta: {
title: '首页',
keepAlive: true,
requireAuth: true
},
component: () => import('@/views/home/index.vue')
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
四、添加vuex(可选,不用的可忽略)
// 下载
npm install vuex@next (下载4.0.0版本)
// 创建store/index.ts文件,配置如下
import { createStore } from 'vuex';
export interface State {
userInfo: {
id: number;
username: string;
nickname: string;
};
}
export const store = createStore<State>({
state() {
return {
userInfo: {
id: 0,
username: '',
nickname: ''
}
};
},
mutations: {
setUserInfo(state, userInfo) {
storage.set('userInfo', userInfo);
state.userInfo = userInfo;
}
}
});
需要注意的是,需全局添加d.ts类型定义
// 创建shims-store.d.ts
import { Store } from '@/store';
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$store: Store;
}
}
五、添加axios(不需要可忽略)
// 下载axios
npm install axios
// 创建axios实例文件 axios.ts
import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
const service = axios.create();
// Request interceptors
service.interceptors.request.use(
(config: AxiosRequestConfig) => {
// do something
return config;
},
(error: any) => {
Promise.reject(error);
}
);
// Response interceptors
service.interceptors.response.use(
async (response: AxiosResponse) => {
// do something
},
(error: any) => {
if (error && error.response) {
// do something
} else {
if (error.message == 'Network Error') {
error.message == '网络异常!';
}
error.message = '网络异常';
}
return Promise.reject(error);
}
);
export default service;
需要注意的是,需全局添加d.ts类型定义
// 创建shims-axios.d.ts
import { AxiosInstance, AxiosRequestConfig, AxiosPromise } from 'axios';
declare module 'axios' {
export interface AxiosInstance {
<T = any>(config: AxiosRequestConfig): Promise<T>;
request<T = any>(config: AxiosRequestConfig): Promise<T>;
get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
head<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
}
}
六、修改main.ts配置
import { createApp } from 'vue';
import App from '@/App.vue';
import router from '@/router';
import { store } from '@/store';
// 创建vue实例
const app = createApp(App);
app.use(router);
app.use(store);
// 挂载实例
app.mount('#app');
七、添加element-plus
npm install element-plus
7.1 按需加载element-plus
// 创建一个文件 config/element.ts
import lang from 'element-plus/lib/locale/lang/zh-cn';
import 'dayjs/locale/zh-cn';
import {
locale,
ElButton,
ElCol,
ElForm,
ElFormItem,
ElInput,
ElRow,
ElTable,
ElTableColumn,
ElUpload,
ElPagination,
ElInfiniteScroll,
ElLoading,
ElMessage,
ElMessageBox,
ElNotification
} from 'element-plus';
const components = [
ElButton,
ElCol,
ElForm,
ElFormItem,
ElInput,
ElRow,
ElTable,
ElTableColumn,
ElUpload,
ElPagination
];
const plugins = [ElInfiniteScroll, ElLoading, ElMessage, ElMessageBox, ElNotification];
// 由于vue中没有对应的ts类型,故此处的app as any
export const setupElement = (app: any, options = {}) => {
// 引入语言,不引入默认英语
locale(lang);
// 全局注册组件
components.forEach((component) => {
app.component(component.name, component);
});
// 注册element-plus services
plugins.forEach((plugin) => {
app.use(plugin);
});
// 设置全局option,默认 {}
app.config.globalProperties.$ELEMENT = options;
};
7.2 在main.ts中引入即可
...
import { setupElement } from '@/config/element';
// 创建vue实例
const app = createApp(App);
// 按需引入element-plus插件
setupElement(app);
...
// 挂载实例
app.mount('#app');
7.3 使用element-plus注意报错事项:
Failed to resolve import “xx/node_modules/element-plus/lib/theme-chalk/locale.css”
- 只需要 vite.config.ts 中配置即可,详见 1.1 vite.config.ts 配置
Property ‘$confirm’ does not exist on type ‘CreateComponentPublicInstance<{}, { tableData: tableDataProps[]; }, {}, {}, { deleteRow(): void; }, ComponentOptionsMixin, ComponentOptionsMixin, … 10 more …, {}>’.Vetur(2339)
-
此问题是由于全局引入了element-plus中的
$confirm
或$message
,而没有被ts识别 -
解决:
-
// 在文件src/types/shims-store.d.ts 下添加对应的类型定义 import { Store } from '@/store'; import { ElMessage, ElMessageBox } from 'element-plus'; declare module '@vue/runtime-core' { interface ComponentCustomProperties { $store: Store; $message: typeof ElMessage; $confirm: typeof ElMessageBox.confirm; } }
-