目录
创建项目
编辑 下载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,
},
},
},