# cli-template-source

**Repository Path**: soulkey3/cli-template-source

## Basic Information

- **Project Name**: cli-template-source
- **Description**: 脚手架模板源代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-09-14
- **Last Updated**: 2025-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 开发文档

请严格遵守DDD 领域驱动 开发

## 页面模板代码

页面模板代码直接复制使用

views/basic-config/

## 开发环境

**Node20.11.1、pnpm@latest**

## 技术栈

**Vite@5、Vue@3+、Typescript@5、tailwind.css、pina@2、vue-router@4、element-plus@2.8+**

## ！开始开发

开发前请先在项目中添加文件 <span style="color:red">.env.development.local</span>
且不可传入gitlab（.local优先级最高，会覆盖CICD各环境的配置文件），已配置gitignore，知晓即可。各个项目

```plain
VITE_BASE_API='/regionadm/api'
VITE_PROXY_TARGET = "http://tcwireless.qa.17usoft.com"
VITE_CLIENT_ID = 'tc-union-store-webui.test'
VITE_REDIRECT_URL = 'http://localhost:5173/regionadm/#/login'
VITE_OA_API = 'http://tccommon.qas.17usoft.com/oauth/authorize'
```

0. <font size="4">复制下方代码执行 新建.env.development.local</font>

```sh
echo ` VITE_BASE_API='/regionadm/api'
VITE_PROXY_TARGET = "http://tcwireless.qa.17usoft.com"
VITE_CLIENT_ID = 'tc-union-store-webui.test'
VITE_REDIRECT_URL = 'http://localhost:5173/regionadm/#/login'
VITE_OA_API = 'http://tccommon.qas.17usoft.com/oauth/authorize' ` > .env.development.local
```

1. <font size="4">检查Node是不是20.11.1和全局安装了pnpm</font>
2. <font size="4">已安装pnpm忽略该步骤。全局安装 **npm i pnpm -g**</font>
3. <font size="4">pnpm i</font>
4. <font size="4">pnpm dev</font>
5. <font size="4">项目启动</font>
6. <font size="4">修改项目的key</font>

- 修改config.global.ts 项目公共配置
- 修改统一权限的clientId和回调地址，在.env.xxx相关文件修改
- 修改base路径 在vite.config.ts修改
- 修改package.json的name字段，防止打包冲突
- 修改nginx配置文件，location /xxx
- 修改开发服务器代理，即可调通接口 server.proxy

## 指令说明

- **pnpm dev** 启动项目 --host 参数可以暴露内网ip供外机访问
- **pnpm build:qa** QA环境打包
- **pnpm build:stage** 预发环境打包
- **pnpm build:prod** 生产环境打包
- **pnpm preview** 本地预览打包产物 占用4173端口
- **pnpm type-check** 运行ts类型检查
- **pnpm lint** 运行eslint检查
- **pnpm format** 全局格式化文件样式，会按照prettier配置来，保证了多人开发的代码风格统一

## 权限配置

roles字段为[*]，表示该路由对所有用户开放。
按照需求，填入【统一权限】的表示。

### 1.页面路由权限：

```plain
{
  path: '/dashboard/workplace',
  name: 'Workplace',
  component: () => import('@/views/dashboard/views/workplace/index.vue'),
  meta: {
    title: '工作台',
    needLogin: true,
    alive: true,
    menu: true,
    roles: ['*']
  }
}
```

### 2.按钮、页面元素权限

在组件中使用v-permission指令，传入权限标识数组。
例如：运营、管理员等。
例如：

```html
<el-button v-permission="['运营']">新增</el-button>
```

极端动态，如for循环出来的页面元素
例如：

```html
<el-select v-model="queryParams.bizTag" placeholder="请输入修改类型" clearable @change="query">
  <el-option
    v-for="item in Object.entries(RegionMappingType)"
    v-permission="
              item[0] === 'UPDATE_REGION' || item[0] === 'ADD_REGION'
                ? ['admin', '运营']
                : ['admin']
            "
    :key="item[0]"
    :value="item[0]"
    :label="item[1]"
  ></el-option>
</el-select>
```

## 工程文件

- src 工程入口
  - assets 静态资源
  - components 项目组件
  - directive 自定义指令
  - filters 自定义过滤器
  - hooks 自定义hook
  - layout 页面整体布局
  - model 接口数据层——全局
  - router 路由入口
  - stores 全局缓存
  - styles 样式文件
  - types 类型声明
  - utils 工具包
  - views 业务代码入口
  - App.vue Vue入口文件
  - config.global.ts 全局配置
  - main.ts js入口，优先级大于App.vue
  - permission.ts 路由权限拦截器
- public 对外可访问静态资源 最终一起打包到dist，一般不动
- .env.development Qa环境配置文件
- .env.development.local 本地开发环境变量
- .env.production 上产环境变量
- .env.stage 语法环境变量
- .eslintcache eslint缓存 不用看
- .eslintrc.cjs eslint配置文件，**看不懂就别乱配置**
- .npmrc rc配置了npm i包的源，让源跟着项目走，保证统一性
- .prettierrc.json prettier插件配置，**看不懂就别乱配置**
- auto-imports.d.ts、components.d.ts Vue组件自动引入配置，自动生成，**别乱动**
- env.d.ts ts环境变量配置文件
- index.html <span style="color:red">Vite工程入口</span>
- nginx.conf nginx配置 **千万别乱动！**
- package.json <span style="color:red">Node 项目配置文件</span>
- postcss.config.js postcss配置文件
- tailwind.config.js tailwind配置文件
- tsconfig.app.json tsconfig.json tsconfig.node.json ts配置文件
- vite.config.ts <span style="color:red">Vite工程配置文件</span>

## 项目能力

1. [x] 公共请求库，且做了重复提交的拦截。
2. [x] 代码样式统一。乱写的也会在提交时候rewrite，保证了远程仓库的代码风格一致
3. [x] 暗黑模式
4. [x] 全局功能检索
5. [x] 网页全屏
6. [x] OA登录
7. [x] 主题色，皮肤配置
8. [x] Element 组件自动引入，不需要手动import
9. [x] npmrc 包源统一阿里源
10. [ ] IE8，不支持

## DDD实践思想

在业务开发中，按照领域创建模块（参照views中的文件划分），各个领域自建**index.routes.ts（路由表）**，**view（页面文件）**，**model（接口数据层）**，**components（领域组件）**，**utils（方法）**...

思想：肯定存在代码冗余，但是保证了的项目的领域划分更加的清晰，保证了健壮性和后续迭代维护的清晰性，舍弃一定的代码精简度，保证项目后期多人开发等情况下的稳定迭代和维护。