Naive UI开发环境搭建：Vite、Webpack与Vue CLI配置全指南

Naive UI开发环境搭建：Vite、Webpack与Vue CLI配置全指南

🔥【免费下载链接】naive-ui 项目地址: https://gitcode.com/gh_mirrors/nai/naive-ui

引言：为什么选择Naive UI？

你是否正在为Vue 3项目寻找一个功能完备、主题可定制且性能卓越的组件库？Naive UI（朴素UI）作为一个基于Vue 3的高质量组件库，提供了超过80个组件，完全使用TypeScript开发，支持主题定制，并且具有优秀的性能表现。然而，许多开发者在将Naive UI集成到不同构建工具时常常遇到配置难题。本文将系统讲解如何在Vite、Webpack和Vue CLI三种主流构建工具中搭建Naive UI开发环境，帮助你快速上手这个强大的组件库。

读完本文后，你将能够：

• 理解Naive UI的核心依赖和项目结构
• 在Vite、Webpack和Vue CLI中正确配置Naive UI
• 解决常见的构建工具兼容性问题
• 优化Naive UI的打包体积和性能
• 实现主题定制和按需加载

一、Naive UI项目基础分析

1.1 核心依赖与版本要求

Naive UI对环境有特定要求，在开始配置前，请确保你的开发环境满足以下条件：

依赖	最低版本要求	推荐版本
Node.js	14.0.0	16.x 或更高
Vue	3.0.0	3.2.x 或更高
TypeScript	4.1.0	4.5.x 或更高
包管理器	npm 6+/yarn 1.x/pnpm 5+	pnpm 7.x (官方推荐)

从Naive UI的package.json文件中可以看到，它依赖了一系列核心库，包括：

• vue：Vue 3核心库
• async-validator：表单验证
• date-fns：日期处理
• lodash-es：工具函数库
• css-render：CSS-in-JS解决方案
• vooks：Vue 3组合式函数库

1.2 项目结构概览

Naive UI的源码组织结构清晰，主要分为以下几个部分：

src/
├── _internal/        # 内部组件和工具
├── _mixins/          # Vue混入
├── _styles/          # 样式文件
├── _utils/           # 工具函数
├── components.ts     # 组件导出
├── index.ts          # 入口文件
└── [component]/      # 各个组件目录
    ├── index.ts      # 组件导出
    ├── src/          # 组件源码
    ├── styles/       # 组件样式
    ├── demos/        # 示例代码
    └── tests/        # 测试文件

了解项目结构有助于我们理解后续的配置原理，特别是路径别名和样式导入相关的设置。

二、Vite环境配置（推荐）

Vite作为新一代前端构建工具，以其极速的开发启动时间和热模块替换（HMR）性能而闻名。Naive UI官方推荐使用Vite作为开发工具，其自身的开发环境也是基于Vite构建的。

2.1 快速创建Vite项目并集成Naive UI

首先，使用Vite创建一个新的Vue 3项目：

# 创建Vue 3 + TypeScript项目
npm create vite@latest naive-ui-demo -- --template vue-ts
cd naive-ui-demo

# 安装依赖
npm install

# 安装Naive UI和字体图标
npm i -D naive-ui @vicons/ionicons5

2.2 基础Vite配置

Vite的配置文件为vite.config.ts，基础配置如下：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      'vue': 'vue/dist/vue.esm-bundler.js' // Naive UI需要使用Vue的ES模块版本
    }
  },
  server: {
    port: 3000,
    open: true
  }
})

2.3 高级Vite配置（基于Naive UI官方配置）

Naive UI官方的Vite配置文件提供了更多优化设置，我们可以借鉴其关键配置项来增强我们的项目：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: [
      {
        find: 'naive-ui',
        // 开发环境下指向源码，生产环境下使用node_modules中的版本
        replacement: process.env.NODE_ENV !== 'production' 
          ? resolve(__dirname, './node_modules/naive-ui/src')
          : 'naive-ui'
      },
      { find: '@', replacement: resolve(__dirname, 'src') }
    ]
  },
  define: {
    // 必要的环境变量定义
    'process.env.NODE_ENV': `'${process.env.NODE_ENV}'`,
    __DEV__: process.env.NODE_ENV !== 'production'
  },
  optimizeDeps: {
    // 预构建Naive UI相关依赖，提高开发启动速度
    include: [
      'naive-ui',
      '@css-render/plugin-bem',
      'async-validator',
      'css-render',
      'date-fns',
      'evtd',
      'lodash-es',
      'seemly',
      'treemate',
      'vdirs',
      'vooks',
      'vueuc'
    ]
  },
  build: {
    // 生产构建优化
    rollupOptions: {
      output: {
        // 代码分割，将Naive UI单独打包
        manualChunks: {
          'naive-ui': ['naive-ui'],
          'date-fns': ['date-fns']
        }
      }
    }
  }
})

2.4 完整的Vite+TypeScript+Naive UI示例

下面是一个使用Naive UI组件的Vue单文件组件示例：

<template>
  <n-config-provider :theme="theme" :locale="zhCN">
    <n-card>
      <n-space vertical>
        <n-button @click="toggleTheme" type="primary">
          <n-icon :component="SunnyOutline" />
          切换主题
        </n-button>
        
        <n-input v-model:value="message" placeholder="输入一些内容" />
        
        <n-select 
          v-model:value="selectedItem" 
          :options="options" 
          placeholder="选择一个选项"
        />
        
        <n-table :data="tableData" :columns="columns" />
      </n-space>
    </n-card>
  </n-config-provider>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { NConfigProvider, NCard, NButton, NInput, NSelect, NTable, NIcon } from 'naive-ui'
import { SunnyOutline, MoonOutline } from '@vicons/ionicons5'
import { zhCN, dateEnUS } from 'naive-ui'
import { useTheme } from 'naive-ui'

// 主题切换
const theme = useTheme()
const toggleTheme = () => {
  theme.switch(theme.type === 'light' ? 'dark' : 'light')
}

// 数据
const message = ref('Hello Naive UI!')
const selectedItem = ref('')
const options = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3' }
]

// 表格数据
const columns = [
  { title: '姓名', key: 'name' },
  { title: '年龄', key: 'age' },
  { title: '地址', key: 'address' }
]

const tableData = [
  { key: '1', name: '张三', age: 32, address: '北京市' },
  { key: '2', name: '李四', age: 45, address: '上海市' },
  { key: '3', name: '王五', age: 28, address: '广州市' }
]
</script>

2.5 Vite环境下的常见问题解决

问题1：开发环境中出现"Failed to resolve import"错误

解决方案：确保Vite的optimizeDeps.include中包含了所有Naive UI的依赖，或者删除node_modules/.vite目录后重新启动开发服务器。

rm -rf node_modules/.vite
npm run dev

问题2：主题切换不生效

解决方案：确保在应用的入口处正确设置了NConfigProvider，并使用useTheme组合式函数来管理主题。

问题3：生产构建后组件样式丢失

解决方案：检查是否正确导入了Naive UI的样式，或者尝试在入口文件中显式导入：

// main.ts
import 'naive-ui/dist/index.css'

三、Webpack环境配置

虽然Vite是官方推荐的构建工具，但许多现有项目仍在使用Webpack。下面我们将介绍如何在Webpack环境中配置Naive UI。

3.1 使用Vue CLI创建Webpack项目（Vue CLI基于Webpack）

# 安装Vue CLI
npm install -g @vue/cli

# 创建项目
vue create naive-ui-webpack-demo

# 选择Manually select features，确保选中TypeScript、Babel等

# 进入项目目录
cd naive-ui-webpack-demo

# 安装Naive UI
npm install naive-ui @vicons/ionicons5

3.2 Webpack基础配置

Vue CLI生成的项目使用vue.config.js作为配置文件，基础配置如下：

const { defineConfig } = require('@vue/cli-service')
const path = require('path')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
      }
    },
    module: {
      rules: [
        // Naive UI需要处理CSS Modules
        {
          test: /\.css$/,
          use: [
            'vue-style-loader',
            'css-loader'
          ]
        }
      ]
    }
  },
  chainWebpack: config => {
    // 配置别名
    config.resolve.alias
      .set('naive-ui$', 'naive-ui/lib/index.js') // 使用CommonJS版本
    
    // 优化构建
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        naiveui: {
          name: 'chunk-naiveui',
          priority: 20,
          test: /[\\/]node_modules[\\/]naive-ui[\\/]/
        }
      }
    })
  }
})

3.3 处理TypeScript路径别名

在tsconfig.json中添加路径别名配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ],
      "naive-ui": [
        "node_modules/naive-ui/src/index.ts"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

3.4 Webpack环境下的按需加载配置

Naive UI支持按需加载，可以减小打包体积。使用babel-plugin-import插件来实现：

# 安装babel-plugin-import
npm install babel-plugin-import -D

然后在babel.config.js中添加配置：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'import',
      {
        libraryName: 'naive-ui',
        libraryDirectory: 'es',
        camel2DashComponentName: false,
        style: (name) => {
          return `${name}/style/css.js`;
        }
      },
      'naive-ui'
    ]
  ]
}

3.5 Webpack环境常见问题解决

问题1：TypeScript类型错误

解决方案：确保tsconfig.json中正确配置了Naive UI的类型路径，并且TypeScript版本不低于4.1.0。

问题2：构建后体积过大

解决方案：

1. 启用按需加载
2. 配置Webpack的代码分割
3. 使用externals将大型依赖如lodash、date-fns等通过CDN引入

// vue.config.js
module.exports = {
  configureWebpack: {
    externals: {
      'lodash': '_',
      'date-fns': 'dateFns'
    }
  }
}

然后在public/index.html中添加CDN链接：

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@2.29.3/dist/date-fns.min.js"></script>

四、Vue CLI环境配置

Vue CLI是Vue官方提供的脚手架工具，虽然最新的Vue 3推荐使用Vite，但仍有大量项目在使用Vue CLI。下面介绍如何在Vue CLI中配置Naive UI。

4.1 使用Vue CLI创建项目

# 确保已安装Vue CLI
npm install -g @vue/cli

# 创建项目
vue create naive-ui-vuecli-demo

# 选择Vue 3和TypeScript

# 进入项目
cd naive-ui-vuecli-demo

# 安装Naive UI
npm install naive-ui @vicons/ionicons5

4.2 Vue CLI配置文件

Vue CLI使用vue.config.js作为配置文件，以下是一个完整的Naive UI配置示例：

const { defineConfig } = require('@vue/cli-service')
const path = require('path')

module.exports = defineConfig({
  transpileDependencies: true,
  
  // 部署应用包时的基本URL
  publicPath: process.env.NODE_ENV === 'production' ? '/naive-ui-demo/' : '/',
  
  // 输出文件目录
  outputDir: 'dist',
  
  // 放置生成的静态资源
  assetsDir: 'assets',
  
  // 指定生成的index.html的输出路径
  indexPath: 'index.html',
  
  // 文件名哈希
  filenameHashing: true,
  
  // 配置Webpack
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        'naive-ui': path.resolve(__dirname, 'node_modules/naive-ui/lib/index.js')
      }
    },
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          naiveui: {
            test: /[\\/]node_modules[\\/]naive-ui[\\/]/,
            name: 'chunk-naiveui',
            priority: 10,
            reuseExistingChunk: true
          }
        }
      }
    }
  },
  
  // 链式Webpack配置
  chainWebpack: config => {
    // 设置别名
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))
      
    // 处理SVG图标
    config.module
      .rule('svg')
      .exclude.add(path.resolve(__dirname, 'src/icons'))
      .end()
      
    // 配置开发服务器
    config.devServer
      .port(8080)
      .open(true)
      .hot(true)
  },
  
  // CSS相关配置
  css: {
    // 启用CSS Modules
    modules: false,
    // 是否使用css分离插件
    extract: process.env.NODE_ENV === 'production',
    // 开启CSS source maps
    sourceMap: false,
    // 向CSS相关的loader传递选项
    loaderOptions: {
      css: {
        // 这里的选项会传递给css-loader
      }
    }
  }
})

4.3 Vue CLI中使用Naive UI的示例

<template>
  <n-app>
    <n-layout has-sider>
      <n-layout-sider bordered>
        <n-menu :options="menuOptions" mode="inline" />
      </n-layout-sider>
      <n-layout>
        <n-layout-header bordered>
          <n-space>
            <n-button @click="theme.toggleDark()" text>
              <n-icon :component="theme.dark ? Moon : Sun" />
            </n-button>
            <n-dropdown>
              <n-button>用户菜单</n-button>
              <template #dropdown>
                <n-dropdown-menu>
                  <n-dropdown-item>个人资料</n-dropdown-item>
                  <n-dropdown-item>设置</n-dropdown-item>
                  <n-dropdown-item>退出登录</n-dropdown-item>
                </n-dropdown-menu>
              </template>
            </n-dropdown>
          </n-space>
        </n-layout-header>
        <n-layout-content>
          <n-card>
            <h1>Naive UI + Vue CLI示例</h1>
            <n-divider />
            <n-form :model="formData" :rules="rules" ref="formRef">
              <n-form-item label="用户名" path="username">
                <n-input v-model:value="formData.username" />
              </n-form-item>
              <n-form-item label="密码" path="password">
                <n-input v-model:value="formData.password" type="password" />
              </n-form-item>
              <n-form-item>
                <n-button type="primary" @click="submitForm">提交</n-button>
              </n-form-item>
            </n-form>
          </n-card>
        </n-layout-content>
      </n-layout>
    </n-layout>
  </n-app>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { 
  NApp, NLayout, NLayoutSider, NLayoutHeader, NLayoutContent, 
  NMenu, NButton, NIcon, NDropdown, NDropdownMenu, NDropdownItem,
  NCard, NDivider, NForm, NFormItem, NInput
} from 'naive-ui'
import { Sun, Moon, Menu as MenuIcon, User } from '@vicons/ionicons5'
import { useTheme } from 'naive-ui'

// 主题
const theme = useTheme()

// 表单
const formRef = ref()
const formData = ref({
  username: '',
  password: ''
})
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ]
}

const submitForm = () => {
  formRef.value.validate((errors) => {
    if (!errors) {
      // 表单验证通过，提交数据
      alert('表单提交成功')
    }
  })
}

// 菜单选项
const menuOptions = [
  {
    label: '首页',
    key: 'home',
    icon: () => h(NIcon, null, { default: () => h(Home) })
  },
  {
    label: '数据管理',
    key: 'data',
    icon: () => h(NIcon, null, { default: () => h(Database) }),
    children: [
      { label: '用户管理', key: 'user' },
      { label: '角色管理', key: 'role' }
    ]
  }
]
</script>

4.4 Vue CLI环境下的常见问题

问题1：开发环境热更新缓慢

解决方案：

1. 升级Vue CLI到最新版本
2. 配置transpileDependencies只转译必要的依赖
3. 增加内存限制

// vue.config.js
module.exports = {
  transpileDependencies: [
    /[\\/]node_modules[\\/]naive-ui[\\/]/
  ]
}

// package.json
"scripts": {
  "serve": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service serve",
}

问题2：生产环境构建失败

解决方案：检查是否有不兼容的Babel插件，尝试删除babel.config.js中的不必要插件，或升级相关依赖。

五、三种构建工具的对比分析

5.1 性能对比

特性	Vite	Webpack	Vue CLI
开发启动时间	极快 (<3秒)	中等 (5-15秒)	中等 (5-15秒)
热更新速度	极快 (毫秒级)	中等 (数百毫秒)	中等 (数百毫秒)
生产构建速度	快	中等	中等
包体积优化	优秀	良好	良好
配置复杂度	简单	复杂	中等

5.2 适用场景分析

Vite适用场景：

• 新启动的Vue 3项目
• 对开发体验要求高的团队
• 需要快速原型开发的场景
• 中小型应用

Webpack适用场景：

• 大型企业级应用
• 需要高度定制化构建流程的项目
• 多页面应用
• 复杂的资源处理需求

Vue CLI适用场景：

• 现有Vue CLI项目升级
• 需要快速上手的团队
• 中等规模的Vue应用
• 不需要高度定制构建流程的项目

5.3 迁移指南：从Webpack/Vue CLI到Vite

如果你正在考虑从Webpack或Vue CLI迁移到Vite，可以按照以下步骤进行：

1. 创建新的Vite项目

npm create vite@latest my-vite-project -- --template vue-ts

2. 迁移源代码和静态资源

   • 将src/目录复制到新项目
   • 将public/目录内容复制到新项目的public/目录

3. 安装依赖

# 安装生产依赖
npm install vue-router pinia axios # 根据项目需要

# 安装开发依赖
npm install -D sass eslint @vuedx/typescript-plugin-vue

4. 迁移配置

   • 将vue.config.js中的别名、代理等配置迁移到vite.config.ts
   • 迁移ESLint配置
   • 迁移Babel配置（如需要）

5. 测试与修复

   • 运行npm run dev测试开发环境
   • 运行npm run build测试生产构建
   • 修复可能的兼容性问题

六、Naive UI高级配置

6.1 主题定制

Naive UI提供了强大的主题定制功能，可以通过NConfigProvider和useTheme来实现：

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <!-- 应用内容 -->
  </n-config-provider>
</template>

<script setup>
// 自定义主题
const themeOverrides = {
  common: {
    primaryColor: '#722ed1', // 主色调
    primaryColorHover: '#833cf9',
    primaryColorPressed: '#6324c8',
    primaryColorSuppl: '#9754fb',
  },
  Button: {
    borderRadius: '8px',
    textFontSize: '14px',
  },
  Input: {
    borderRadius: '4px',
    heightLarge: '40px',
  }
}
</script>

更复杂的主题定制可以使用Naive UI提供的主题编辑器组件NThemeEditor。

6.2 按需加载优化

为了减小应用体积，Naive UI支持按需加载组件和样式：

// 只导入需要的组件
import { NButton, NInput } from 'naive-ui'

// 只导入需要的样式
import 'naive-ui/es/button/style/css'
import 'naive-ui/es/input/style/css'

对于大型项目，可以使用前面提到的babel-plugin-import来自动实现按需加载。

6.3 国际化配置

Naive UI内置了多种语言支持，可以通过NConfigProvider配置：

<template>
  <n-config-provider :locale="locale">
    <n-date-picker />
    <n-table :columns="columns" :data="data" />
  </n-config-provider>
</template>

<script setup>
import { ref } from 'vue'
import { NConfigProvider, NDatePicker, NTable } from 'naive-ui'
// 导入语言包
import { zhCN, enUS, jaJP } from 'naive-ui'
import { dateZhCN, dateEnUS, dateJaJP } from 'naive-ui'

// 切换语言
const locale = ref(zhCN)
const dateLocale = ref(dateZhCN)

const switchLanguage = (lang) => {
  switch(lang) {
    case 'en':
      locale.value = enUS
      dateLocale.value = dateEnUS
      break
    case 'ja':
      locale.value = jaJP
      dateLocale.value = dateJaJP
      break
    default:
      locale.value = zhCN
      dateLocale.value = dateZhCN
  }
}
</script>

6.4 全局配置

可以通过app.config.globalProperties来全局配置Naive UI组件的默认属性：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { NButton, NInput } from 'naive-ui'

const app = createApp(App)

// 全局配置NButton
app.config.globalProperties.$button = {
  round: true,
  size: 'medium'
}

// 全局配置NInput
app.config.globalProperties.$input = {
  clearable: true,
  size: 'medium'
}

app.mount('#app')

七、性能优化最佳实践

7.1 组件按需加载

前面已经介绍了如何配置按需加载，这里提供一个更完整的优化方案：

// 优化前
import { NButton, NInput, NTable, NModal, NCard } from 'naive-ui'

// 优化后 - 手动按需加载
import NButton from 'naive-ui/es/button'
import NInput from 'naive-ui/es/input'
import 'naive-ui/es/button/style/css'
import 'naive-ui/es/input/style/css'

// 对于大型组件，使用异步导入
const NTable = defineAsyncComponent(() => import('naive-ui/es/table'))
const NModal = defineAsyncComponent(() => import('naive-ui/es/modal'))

7.2 样式优化

Naive UI提供了多种样式导入方式，推荐使用CSS样式以获得更好的性能：

// 推荐：只导入需要的CSS样式
import 'naive-ui/es/button/style/css'
import 'naive-ui/es/input/style/css'

// 不推荐：导入Sass样式（构建速度较慢）
import 'naive-ui/es/button/style'

7.3 虚拟滚动优化大数据渲染

对于大数据列表，使用Naive UI的虚拟滚动组件可以显著提升性能：

<template>
  <n-virtual-list
    :item-size="50"
    :items="bigDataList"
    :height="500"
  >
    <template #default="{ item }">
      <n-list-item>
        {{ item.name }}
      </n-list-item>
    </template>
  </n-virtual-list>
</template>

<script setup>
// 生成大数据列表
const bigDataList = Array.from({ length: 10000 }, (_, i) => ({
  id: i,
  name: `Item ${i}`
}))
</script>

7.4 组件缓存策略

对于不常变化的组件，可以使用keep-alive进行缓存：

<template>
  <keep-alive :include="['UserProfile', 'ProductList']">
    <router-view />
  </keep-alive>
</template>

八、总结与展望

本文详细介绍了如何在Vite、Webpack和Vue CLI三种主流构建工具中配置Naive UI开发环境，包括基础配置、高级优化、常见问题解决等内容。通过对比分析，我们可以看到：

• Vite提供了最佳的开发体验和构建性能，是Naive UI官方推荐的构建工具
• Webpack适合大型项目和需要高度定制化构建流程的场景
• Vue CLI则是现有Vue项目集成Naive UI的便捷选择

随着前端工具链的不断发展，Vite的生态系统正在快速成熟，未来可能会成为主流的前端构建工具。Naive UI团队也在持续优化对Vite的支持，提供更好的开发体验。

附录：国内CDN资源推荐

为了确保国内用户的访问速度和稳定性，推荐使用以下国内CDN加载Naive UI相关资源：

资源	推荐CDN链接
Naive UI	https://cdn.jsdelivr.net/npm/naive-ui@2.38.2/dist/index.js
Vue 3	https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.prod.js
Lodash	https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js
Date-fns	https://cdn.jsdelivr.net/npm/date-fns@2.29.3/dist/date-fns.min.js
Axios	https://cdn.jsdelivr.net/npm/axios@1.3.4/dist/axios.min.js

扩展学习资源

1. Naive UI官方文档：https://www.naiveui.com
2. Vite官方文档：https://vitejs.dev/guide/
3. Webpack官方文档：https://webpack.js.org/concepts/
4. Vue CLI官方文档：https://cli.vuejs.org/guide/
5. Vue 3官方文档：https://vuejs.org/guide/introduction.html

希望本文能帮助你顺利搭建Naive UI开发环境，如果你有任何问题或建议，欢迎在评论区留言讨论！

如果觉得本文对你有帮助，请点赞、收藏并关注作者，获取更多前端技术干货！

🔥【免费下载链接】naive-ui 项目地址: https://gitcode.com/gh_mirrors/nai/naive-ui