【2】使用vue快速创建项目

开启一个终端

pnpm create vue

如下图

集成NaiveUI

按需引入自动引入: https://www.naiveui.com/zh-CN/light/docs/import-on-demand

pnpm add -D naive-ui

pnpm add -D unplugin-auto-import

pnpm add -D unplugin-vue-components

在vite.config.ts文件中添加

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

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        'vue',
        {
          'naive-ui': [
            'useDialog',
            'useMessage',
            'useNotification',
            'useLoadingBar',
          ],
        },
      ],
    }),
    Components({
      resolvers: [NaiveUiResolver()],
    }),
  ]
})

配置tailwindcss

使用官方文档进行安装：https://tailwind.nodejs.cn/docs/guides/vite#vue