Naive UI 项目教程
naive-ui项目地址:https://gitcode.com/gh_mirrors/nai/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,