# vue-basic-components

**Repository Path**: wic/vue-basic-components

## Basic Information

- **Project Name**: vue-basic-components
- **Description**: 基于vue的基础组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-12
- **Last Updated**: 2021-11-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 管理后台基础组件库

> 本项目为标准管理后台工作中的前端部分，旨在提供一种组件化的方式，使得能够基于客户需求快速开发后台产品，降低开发及维护成本。

使用 [标准预设模板](https://gitee.com/wic/vue-standard-preset) 初始化项目

```bash
# ssh 方式
vue create --preset direct:ssh://git@gitee.com:wic/vue-standard-preset.git --clone my-project

# http 方式
vue create --preset direct:https://gitee.com/wic/vue-standard-preset.git --clone my-project

```

基础组件库的各子项目发布在 `@vue-basic-components` 命名空间下，其中包含:

- `components` 基础 UI 组件库
- `core` 基础核心库

## 文档

- [API 文档](./docs/README.md)
- [计划列表](./PLAN.md)
- [变更记录](./CHANGELOG.md)

## 依赖库

- `vue`: ^3.0.0,
- `vue-router`: ^4.0.0-0,
- `moment`: ^2.29.1,
- `lodash`: ^4.17.21,
- `axios`: ^0.21.1,
- `echarts`: ^5.0.2,
- `element-plus` : ^1.0.2-beta.36,

## 本项目运行

```bash
# 初始化
yarn bootstrap

# 运行demo
yarn dev

```

## 发版流程

1. 在 [changelog](./CHANGELOG.md) 中编写版本变更内容。

2. `lerna version x.y.z --amend` 设置更新的版本号，手动更新根目录 package.json 中版本号。

3. 在`dev`分支的 changelog 和版本号变更推送到远端，把 dev 合并 master。

4. 在 项目仓库中 [发布新版](https://gitee.com/wic/vue-basic-components/releases/new)，标签名为版本号 _x.y.z_ 。

## 其它项目开发引入

1、package.json 中加入依赖

`"@vue-basic-components": "https://gitee.com/wic/vue-basic-components.git"`

2、package.json 中加入 vetur 配置

```json
  "vetur": {
    "tags": "./node_modules/@vue-basic-components/vetur/tags.json",
    "attributes": "./node_modules/@vue-basic-components/vetur/attributes.json"
  }
```

3、vue.config.js 文件中加入组件库的别名解析(这里主要是因为组件库基于 git 仓库依赖，仓库中包括多个 packages 包)

```javascript
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set(
        "@vue-basic-components/core",
        resolve("./node_modules/@vue-basic-components/packages/core")
      )
      .set(
        "@vue-basic-components/components",
        resolve("./node_modules/@vue-basic-components/packages/components")
      );
  }
};
```

4、tsconfig.json 解析增加别名路径映射

```json
    "paths": {
      "@vue-basic-components/components":["./node_modules/@vue-basic-components/packages/components"],
      "@vue-basic-components/core":["./node_modules/@vue-basic-components/packages/core"],
      "@/*": [
        "src/*"
      ],
```

## 其它项目开发中调试组件库

`git clone` 出组件库代码。

在需要引入的项目 package.json 中以文件的方式引入组件库

例如：`"@vue-basic-components": "file:../vue-basic-components"`