vite + Vue3 + TS 前端

1.开始项目

yarn create @vitejs/app

修改 vite.config.ts

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // 如果编辑器提示 path 模块找不到，则可以安装一下 @types/node -> npm i @types/node -D import { resolve } from 'path'// https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录 } }, base: './', // 设置打包路径 server: { port: 4000, // 设置服务启动端口号 open: true, // 设置服务启动时是否自动打开浏览器 cors: true, // 允许跨域// 设置代理，根据我们项目实际情况配置 proxy: { '/api': { target: 'http://127.0.0.1:8000', changeOrigin: true, secure: false, rewrite: (path) => path.replace('/api/', '/') } } } })

2. 生成路由
【vite + Vue3 + TS】安装路由
npm install vue-router@4
配置路由文件

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' import Home from '@/views/Home.vue' import Table from '@/views/Table.vue'const routes: Array = [ { path: '/', name: 'Home', component: Home }, { path: '/table', name: 'Table', component: Table } ]const router = createRouter({ // hash 模式 history: createWebHashHistory(), routes })export default router

在 main.ts 中注册

import { createApp } from 'vue' import App from './App.vue' import router from './router/index' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import { createPinia } from 'pinia'const app = createApp(App) app.use(router) app.use(ElementPlus) app.use(createPinia()) app.mount('#app')

3. 集成 elementPlus
参考官网
4.继承 scss