创建一个vue3+vite+ts项目

目录

创建项目

​编辑 下载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 @types/node

在根目录在新建.env

VITE_APP_NAME = my-project

配置vue.config.js

import { defineConfig, loadEnv } 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 }) => {
  const env = loadEnv(mode, process.cwd());
  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,
        },
      },
},