Naive UI 项目教程

1. 项目的目录结构及介绍

Naive UI 项目的目录结构如下：

naive-ui/
├── .github/
├── .vscode/
├── docs/
├── examples/
├── scripts/
├── src/
│   ├── components/
│   ├── directives/
│   ├── locales/
│   ├── styles/
│   ├── utils/
│   ├── App.vue
│   ├── main.ts
│   ├── shims-vue.d.ts
│   └── ...
├── tests/
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── .stylelintrc
├── babel.config.js
├── jest.config.js
├── package.json
├── README.md
├── tsconfig.json
├── vite.config.ts
└── ...

目录结构介绍

• .github/: GitHub 配置文件，如 issue 模板、PR 模板等。
• .vscode/: VSCode 配置文件，如推荐扩展、设置等。
• docs/: 项目文档。
• examples/: 示例代码。
• scripts/: 脚本文件，如构建脚本、发布脚本等。
• src/: 源代码目录。
  • components/: 组件目录。
  • directives/: 指令目录。
  • locales/: 国际化文件目录。
  • styles/: 样式文件目录。
  • utils/: 工具函数目录。
  • App.vue: 主应用组件。
  • main.ts: 项目入口文件。
  • shims-vue.d.ts: Vue 类型定义文件。
• tests/: 测试文件目录。
• .editorconfig: 编辑器配置文件。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .prettierrc: Prettier 配置文件。
• .stylelintrc: Stylelint 配置文件。
• babel.config.js: Babel 配置文件。
• jest.config.js: Jest 配置文件。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。
• tsconfig.json: TypeScript 配置文件。
• vite.config.ts: Vite 配置文件。

2. 项目的启动文件介绍

入口文件

项目的入口文件是 src/main.ts，它负责初始化 Vue 应用并挂载到 DOM 上。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './styles/index.scss'

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

主应用组件

主应用组件是 src/App.vue，它是整个应用的根组件。

<template>
  <router-view />
</template>

<script>
export default {
  name: 'App'
}
</script>

3. 项目的配置文件介绍

Vite 配置文件

Vite 配置文件是 vite.config.ts，它包含了项目的构建和开发服务器配置。

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    open: true
  }
})

TypeScript 配置文件

TypeScript 配置文件是 tsconfig.json，它包含了 TypeScript 编译选项。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,