目录

创建项目

​编辑 下载jsx 插件

在根目录在新建.env

vue.config.js

tsconfig.json

tsconfig.node.json 

 下载ui组件库和路由（组件库根据自己的项目需要选择）

在根目录下新建views/index.tsx

在根目录下新建router/index.ts

修改App.vue 

---

创建项目

create-vite my-project

 下载jsx 插件

yarn add @vitejs/plugin-vue-jsx 
yarn add --save-dev @types/node

在根目录在新建.env

VITE_APP_NAME = my-project

配置vue.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import { resolve } from "path";
export const pathResolve = (dir: string) => resolve(process.cwd(), ".", dir);export default defineConfig(({ mode }) => {return {base: mode == "production" ? `/${env.VITE_APP_NAME}/` : "",// 配置基础路径plugins: [vue(), vueJsx()], // 配置jsx语法server: {host: "0.0.0.0",  // 配置本地服务运行端口port: 1000,},resolve: { alias: {"@": pathResolve("src"),  // 配置src路径引入方式},},};
});

配置tsconfig.json

{"compilerOptions": {"target": "ES2020","useDefineForClassFields": true,"module": "ESNext","lib": ["ES2020", "DOM", "DOM.Iterable"],"skipLibCheck": true,/* Bundler mode */"moduleResolution": "bundler","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": false,"noEmit": true,"jsx": "preserve",/* Linting */"strict": false,"noUnusedLocals": false,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true,"baseUrl": ".","paths": {"@/*": ["./src/*"],"-/*": ["./*"]}},"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],"references": [{ "path": "./tsconfig.node.json" }]
}

配置tsconfig.node.json 

{"compilerOptions": {"composite": true,"skipLibCheck": true,"module": "ESNext","moduleResolution": "bundler","allowSyntheticDefaultImports": true},"include": ["vite.config.ts"]
}

 下载ui组件库和路由（组件库根据自己的项目需要选择）

yarn add ant-design-vue
yarn add vue-router

在根目录下新建views/index.tsx

import { defineComponent } from "vue";export default defineComponent({setup() {return () => <div>hello World</div>;},
});

在根目录下新建router/index.ts

import { createRouter, createWebHashHistory } from "vue-router";
import Index from "@/views/index";
const router = createRouter({history: createWebHashHistory(),routes: [{path: "/",component: Index,routes:[]},],
});export default router;

修改App.vue 

<template><router-view></router-view>
</template>

下载less

yarn add less -D

在vue.config.js 进行配置

css: {preprocessorOptions: {less: {javascriptEnabled: true,},},
},