开始使用 Naive UI

从零开始使用 Naive UI 的步骤。

• 1. Naive UI
• 2. 项目准备
• 3. 配置自动导入

1. Naive UI

Naive UI 是 Vue3 官方推荐的一款 UI 库，其功能覆盖全面、界面统一简洁，适合不同需求的开发者使用。

2. 项目准备

文本使用的项目模板是 创建 Vite 应用 一文中的模板，使用 Vue3 + Vite3 + TypeScript。

现在可以开始安装 Naive UI 了，输入下面的命令开始安装：

pnpm add -D naive-ui

可选 如果需要配套的字体，安装 vfonts：

pnpm add -D vfonts

可选 推荐 如果需要配套的图标，安装 @vicons/ionicons5：

pnpm add -D @vicons/ionicons5

要选用图标，可以查看 xicons 网站上的示例，可以搜索哦！

3. 配置自动导入

安装 Vite 自动导入插件：

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()]
    })
  ],
  server: {
    host: '0.0.0.0',
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

在 .gitignore 最后加入：

# auto import plugin
components.d.ts