Vue3 工程创建常用步骤

使用 vite 创建项目

pnpm create vite my-vue-app --template vue

安装 typescript

pnpm add typescript -g
// 创建配置文件
tsc --init 

常用配置

{
  "compilerOptions": {
    "target": "esnext", // 编译后的 js 语法版本 [es5,es6,es7,esnext]
    "module": "esnext", // 编译后的 js 模块版本 [commonjs (服务端), esmodule(客户端)]
    "strict": true,     // 是否严格模式
    "jsx": "preserve",  // 编译后 jsx 模式 [preserve, react, react-native]
    "allowJs": true,    // 是否编译js文件
    "moduleResolution": "node", // 模块解析策略 [node,classic]
    "skipLibCheck": true,  // 是否跳过声明文件类型检查 
    "esModuleInterop": true,  // esm 是否可以引入 符合 esm规范的 commonjs 模块
    "allowSyntheticDefaultImports": true, 是否可以引入没有默认导出的模块
    "forceConsistentCasingInFileNames": true, // 是否强制模块文件名和文件系统名一致
    "experimentalDecorators": true, // 是否可以使用装饰器
    "useDefineForClassFields": true, // class属性是否编译成js文件中
    "noImplicitAny": false, // 有隐含的 any类型时是否报错
    "sourceMap": true,  // 是否生成 sourceMap 文件
    "baseUrl": ".",  // 非
    "types": ["webpack-env", "node"],
    "paths": {  // 别名
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "auto-imports.d.ts"
  ],
  "exclude": ["node_modules"]
}

修改 index.html 入口文件引入

<script type="module" src="/src/main.ts"></script>

添加 vue 声明文件 shim.d.ts

declare module "*.vue" {
  import type { DefineComponent } from "vue";
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

安装 tailwindcss

pnpm install -D tailwindcss postcss autoprefixer

创建 postcss.config.js

module.exports = {
    plugins: {
        autoprefixer: {},
        tailwindcss: {},
    },
}

创建 tailwind.config.js

//tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

创建 tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

vite.config.ts 引入

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  },
});

安装vue-router

pnpm add vue-router@4

创建 routers 文件夹 与 index.ts

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

main.ts 引入

import router from "@/routers/index";
app.use(router);

添加 ant-design-vue

pnpm add --save ant-design-vue@4.

main.ts 添加 antd

import antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

app.use(antd)

解决 tailwind.css 与 antd 样式冲突

//tailwind.config.js
module.exports = {

  ....
  corePlugins: {
    preflight: false,
  },
}

测试效果：

<template>
    <div class="flex justify-center h-screen items-center">
        <a-button type="primary">dasdsa</a-button>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped></style>

自动引入 composition API

pnpm i -D unplugin-auto-import

vite.config.ts 添加 plugin

import AutoImport from "unplugin-auto-import/vite";

plugins: [
  vue(),
   AutoImport({
    imports: ["vue", "vue-router"], // 自动导入vue和vue-router相关函数
    dts: "src/auto-import.d.ts", // 生成 auto-import.d.ts 全局声明   
  }),
],

生成auto-import.ts

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {}
declare global {
  const EffectScope: typeof import('vue')['EffectScope']
  const computed: typeof import('vue')['computed']
  const createApp: typeof import('vue')['createApp']
  const customRef: typeof import('vue')['customRef']
  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
  const defineComponent: typeof import('vue')['defineComponent']
  const effectScope: typeof import('vue')['effectScope']
  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
  const getCurrentScope: typeof import('vue')['getCurrentScope']
  const h: typeof import('vue')['h']
  const inject: typeof import('vue')['inject']
  const isProxy: typeof import('vue')['isProxy']
  const isReactive: typeof import('vue')['isReactive']
  const isReadonly: typeof import('vue')['isReadonly']
  const isRef: typeof import('vue')['isRef']
  const markRaw: typeof import('vue')['markRaw']
  const nextTick: typeof import('vue')['nextTick']
  const onActivated: typeof import('vue')['onActivated']
  const onBeforeMount: typeof import('vue')['onBeforeMount']
  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
  const onDeactivated: typeof import('vue')['onDeactivated']
  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
  const onMounted: typeof import('vue')['onMounted']
  const onRenderTracked: typeof import('vue')['onRenderTracked']
  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
  const onScopeDispose: typeof import('vue')['onScopeDispose']
  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
  const onUnmounted: typeof import('vue')['onUnmounted']
  const onUpdated: typeof import('vue')['onUpdated']
  const provide: typeof import('vue')['provide']
  const reactive: typeof import('vue')['reactive']
  const readonly: typeof import('vue')['readonly']
  const ref: typeof import('vue')['ref']
  const resolveComponent: typeof import('vue')['resolveComponent']
  const shallowReactive: typeof import('vue')['shallowReactive']
  const shallowReadonly: typeof import('vue')['shallowReadonly']
  const shallowRef: typeof import('vue')['shallowRef']
  const toRaw: typeof import('vue')['toRaw']
  const toRef: typeof import('vue')['toRef']
  const toRefs: typeof import('vue')['toRefs']
  const toValue: typeof import('vue')['toValue']
  const triggerRef: typeof import('vue')['triggerRef']
  const unref: typeof import('vue')['unref']
  const useAttrs: typeof import('vue')['useAttrs']
  const useCssModule: typeof import('vue')['useCssModule']
  const useCssVars: typeof import('vue')['useCssVars']
  const useLink: typeof import('vue-router')['useLink']
  const useRoute: typeof import('vue-router')['useRoute']
  const useRouter: typeof import('vue-router')['useRouter']
  const useSlots: typeof import('vue')['useSlots']
  const watch: typeof import('vue')['watch']
  const watchEffect: typeof import('vue')['watchEffect']
  const watchPostEffect: typeof import('vue')['watchPostEffect']
  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
}
// for type re-export
declare global {
  // @ts-ignore
  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
  import('vue')
}