# xilu-lunwen-admin

**Repository Path**: zmzmCoder/xilu-lunwen-admin

## Basic Information

- **Project Name**: xilu-lunwen-admin
- **Description**: 企业后台管理系统demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-18
- **Last Updated**: 2022-12-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 基于 Vue 3 + Vite + pinia + antd 2.x + scss 版本搭建的 pc 后台模板

目前还是不够完善 后续补充维护

## 准备

[vue3](https://v3.cn.vuejs.org/) 熟悉 Vue setup 组合式 语法

[vite](https://vitejs.cn/) 熟悉 vite 特性

[Vue-Router-Next](https://router.vuejs.org/zh/installation.html) 熟悉 vue-router 基本使用

[pinna](https://pinia.vuejs.org/) Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案

[antd](https://2x.antdv.com/docs/vue/introduce-cn/) ui 基本使用

[pnpm](https://www.pnpm.cn/)

## 运行

node 版本要大于 14.0.0

本项目采用 pnpm 来管理包
如果没有安装 请先安装

```
npm install -g pnpm
```

- 如果是从 cli 来取代码的话 记得先 git init 然后再安装依赖

- 安装依赖

```
pnpm install
```

- 运行

```
pnpm dev
```

- 打包

```
pnpm build (生产环境)
pnpm build:test （测试环境）
pnpm build:pre （预发环境）
```

- 打包后本地预览

```
pnpm preview
```

## 组件说明文档

### 1. [基础组件](./README_basic_components.md)

### 2. [业务组件](./README_operation_components.md)

### 3. 关于组件引入问题，已经配置了自动引入 组件只要新建在 [src/components](./src/components) 就不在需要 import XX from '..vue' 规范看下面

有兴趣的可以看这个(https://www.npmjs.com/package/unplugin-vue-components)

### 4. [项目目录](./README_directory.md)

## 开发前注意事项

- 为保证因为 Node 版本导致的依赖问题，Node.js 版本推荐使用 `v14.x.x`。
- 为保证代码规范，项目中集成了 ESLint 校验，具体配置请看下方配置说明。

### 1. 页面文件路径及命名规范

- 页面文件路径采用 `/页面名称（文件夹）/index.vue`。
- **页面文件夹** 使用 **小驼峰命名法（camelCase）**。
- 文件中需写上 `name` 属性，且与路由`name`同名（如果是组件文件，`name`需要与文件名称对应，且为**大驼峰命名法**）

例：下面是一个二级页面的文件分布，这两个页面 **命名** 分别是：一级页面 `examplePage`， 二级页面 `textPage`。

```js
// 一级页面文件
src/views/table/index.vue
·
// 二级页面文件
src/views/table/table1/index.vue
```

关于路由 参照[menu](./src/router/routes/module/menu.js)
按照模块划分在 src/router/routes/module 新建路由文件，会自动导入

```js
// router 配置
export default [
  {
    path: '/table',
    component: mainLayout,
    redirect: '/table/index',
    name: 'table',
    meta: {
      title: 'table', //标题
      icon: 'MailTwoTone', // icon
      hidden: true // hidden true 不显示菜单左侧
    },
    children: [
      {
        name: 'table',
        path: '/table/index',
        meta: {
          title: 'table2'
        },
        component: () => import('views/about/index.vue')
      },
      {
        name: 'table1',
        path: '/table/index1',
        meta: {
          title: 'table1'
        },
        component: () => import('views/about/index1.vue')
      }
    ]
  }
]
```

### 2. 组件文件路径及命名规范

- 组件文件路径采用 `/组件名称（文件夹）/组件名称（文件夹）.vue`。
- 组件文件夹名称命名使用 **大驼峰命名法（PascalCase）**。

### 3. 代码规范

- 项目集成了 Eslint + stylelint + prettier + husky

-

## Git 提交规范

- 参考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 规范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))

  - `feat` 增加新功能
  - `fix` 修复问题/BUG
  - `style` 代码风格相关无影响运行结果的
  - `perf` 优化/性能提升
  - `refactor` 重构
  - `revert` 撤销修改
  - `test` 测试相关
  - `docs` 文档/注释
  - `chore` 依赖更新/脚手架配置修改等
  - `workflow` 工作流改进
  - `ci` 持续集成
  - `types` 类型定义文件更改
  - `wip` 开发中

- 关于提交代码(如果不想自己输入上面命令 可以按照下面的来)
  1. pnpm run commit
  2. 按照类型选择
  3. 最后 git push

## VSCode 代码格式化与 ESLint 配置

### VSCode 安装 ESLint 插件：

[下载地址](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

### VSCode 添加配置

![](https://hbrand.oss-cn-hangzhou.aliyuncs.com/Estore_2.0/vms/CDN/222.png)

> ⚠️ 注：检查新加的配置与原有配置是否有冲突，有冲突以新配置为准。检查 VSCode 右下角 ESLint 是否开启。

```json
{
  "eslint.workingDirectories": [{ "mode": "auto" }],
  "files.trimTrailingWhitespace": true,
  "editor.formatOnSave": true,
  "eslint.enable": true,
  "eslint.alwaysShowStatus": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "git.ignoreLimitWarning": true,
  "eslint.options": {
    "extensions": [".js", ".vue"]
  }
}
```