前言

听说是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.32. Select a template: vue-ts

1.1 vite.config.ts 配置

// 下载按需加载的插件 vite-plugin-style-importimport {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.tsimport {Store } from '@/store';declare module '@vue/runtime-core' {interface ComponentCustomProperties {$store: Store;}}

五、添加axios（不需要可忽略）

// 下载axiosnpm install axios// 创建axios实例文件 axios.tsimport axios, {AxiosResponse, AxiosRequestConfig } from 'axios';const service = axios.create();// Request interceptorsservice.interceptors.request.use((config: AxiosRequestConfig) => {// do somethingreturn config;},(error: any) => {Promise.reject(error);});// Response interceptorsservice.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.tsimport {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.tsimport 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 anyexport const setupElement = (app: any, options = {}) => {// 引入语言，不引入默认英语locale(lang);// 全局注册组件components.forEach((component) => {ponent(component.name, component);});// 注册element-plus servicesplugins.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;}}