Naive Ui Admin 项目教程

Naive Ui Admin 项目教程

naive-ui-adminNaive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你，持续更新中。项目地址:https://gitcode.com/gh_mirrors/na/naive-ui-admin

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

Naive Ui Admin 项目的目录结构如下：

naive-ui-admin/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── layouts/
│   ├── router/
│   ├── store/
│   ├── views/
│   ├── App.vue
│   ├── main.ts
│   ├── shims-vue.d.ts
├── .gitignore
├── .prettierrc.js
├── .stylelintrc.js
├── index.html
├── package.json
├── pnpm-lock.yaml
├── README.md
├── tsconfig.json
├── vite.config.ts

目录结构介绍

• public/: 存放静态资源文件。
• src/: 项目源代码目录。
  • assets/: 存放图片、样式等资源文件。
  • components/: 存放项目中使用的组件。
  • layouts/: 存放页面布局组件。
  • router/: 存放路由配置文件。
  • store/: 存放状态管理文件。
  • views/: 存放页面视图组件。
  • App.vue: 项目的主组件。
  • main.ts: 项目的入口文件。
  • shims-vue.d.ts: 用于 TypeScript 识别 .vue 文件。
• .gitignore: Git 忽略文件配置。
• .prettierrc.js: Prettier 代码格式化配置。
• .stylelintrc.js: Stylelint 样式格式化配置。
• index.html: 项目的主 HTML 文件。
• package.json: 项目依赖和脚本配置。
• pnpm-lock.yaml: pnpm 依赖锁定文件。
• README.md: 项目说明文档。
• tsconfig.json: TypeScript 配置文件。
• vite.config.ts: Vite 构建配置文件。

2. 项目的启动文件介绍

入口文件 main.ts

main.ts 是项目的入口文件，负责初始化 Vue 应用并挂载到 DOM 中。以下是 main.ts 的主要内容：

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');

主组件 App.vue

App.vue 是项目的主组件，包含了应用的根布局和路由出口。以下是 App.vue 的主要内容：

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

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

3. 项目的配置文件介绍

Vite 配置文件 vite.config.ts

vite.config.ts 是 Vite 的配置文件，用于配置项目的构建和开发服务器。以下是 vite.config.ts 的主要内容：

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

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

TypeScript 配置文件 tsconfig.json

tsconfig.json 是 TypeScript 的配置文件，用于配置 TypeScript 编译选项。以下是 tsconfig.json 的主要内容：

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

naive-ui-adminNaive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你，持续更新中。项目地址:https://gitcode.com/gh_mirrors/na/naive-ui-admin