npm package: @hhy5277/matrix_ui
Description: An enterprise-class UI design language and Vue components implementation
Latest version: 0.0.25

# 南水水库矩阵组件库

## install

如果项目中没有安装过element-plus  需要先
```
npm install element-plus -S
```
然后安装matrix_ui
```
npm install matrix_ui@latest -S --registry=http://199.10.9.178:8081/repository/npm-hosted/
```

## usage

如果项目中没有引入过element-ui 需要先
```
import ElementPlus from "element-plus";
import 'element-plus/theme-chalk/index.css'
app.use(ElementPlus);
```
然后全量 或者 按需引入组件库
```
// 全量导入组件库
import MatrixUI from 'matrix_ui'
import 'matrix_ui/lib/style.css'

// 注册组件库
app.use(MatrixUI);

or

//按需引入
import {NsButton} from 'matrix_ui' 

or 

import NsButton from 'matrix_ui/lib/button'
import 'enlinkui/lib/button/style.css'


// 注册单个组件
app.use(NsButton);
```

# 组件开发流程：
```
//拉取代码
首先 git clone  http://199.10.9.178:9090/root/matrix_ui
//安装依赖
npm i
```
## 自动方式
```
//执行以下命令  生成组件的基本结构:组件文件夹、组件模版文件、入口文件、说明文档模版、测试文件模版
node command/new.cjs  组件名
```
## 手动方式

### 1.在packages目录下为组件新建文件夹

```
//执行以下命令、或者手动创建
mkdir [组件名]  //如:mkdir button
```


### 2.为组件增加入口文件index.ts，并增加install方法并导出
```
 import { App } from 'vue'
  // 导入组件，组件必须声明 name
  import NsButton from './src/index.vue';

  // 为组件提供 install 安装方法
  export default {
    install(app: App) {
      app.component('ns-button',NsButton )
    }
  }
```
### 3.在组件库入口文件packages/index.ts中增加组件导入，并添加到components组件列表
```
//示例如下

// 导入组件
import NsButton from './button'
import NsChooseIcon from './chooseIcon'

// 组件列表
const components = [
  NsButton,
  NsChooseIcon
]
```

```
//本地导入测试   main.ts中导入 (已默认引入，可以跳过)

//构建
npm run lib
// 导入组件库
import MatrixUI from '../lib/index.es'
import 'matrix_ui/lib/style.css'

// 注册组件库
app.use(MatrixUI)

// 单组件引入 
import NsButton from '../lib/button/index.es';
import '../lib/button/style.css';
app.use(NsButton)

//配置相应的路由后，根目录下执行

npm run dev
```
> 注意：编写组件代码之前需要先把主题相关样式，提取到为css变量到styles/variable.scss文件中

## 4.命令说明
```
"scripts": {
    "dev": "vite",
    "build:entry": "node command/build-entry.cjs",
    "build:components": "node ./command/build.js",
    "lib": "npm run build:components",
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs",
    "test": "vitest",
    "coverage": "vitest run --coverage"
}

```
  - npm run dev 快速启动组件库项目并查看组件示例
  - node command/new.cjs componentname 自动生成组件目录、组件的入口文件、入口文件的install代码、组件的模板代码、测试模板、文档模板
  - npm run lib 这条命令会生成一个 lib 文件夹，将所有的组件打包。
  - build:entry 命令用来自动生成packages下的入口文件（约定：组件文件夹名首字母小写）。
  - npm run docs:build 使用vitepress自动生成组件文档
  - npm run docs:dev 查看、编辑组件文档
  - docs:preview  文档预览
  - npm run test 执行组件单元测试
  - npm run coverage 查看组件测试覆盖率



## 5.更新版本号

手动修改package.json里面的version或者自动更新。

npm提供了脚本帮我们实现自动更新版本号，如下：
```
npm version patch  //更新补丁版本
npm version minor  //更新次版本
npm version major  //更新主版本
```

## 6.构建组件库
```
npm run lib //打包构建
```

## 7.登录
```
npm login --registry=http://199.10.9.178:8081/repository/npm-hosted/
```
按照提示输入用户名、密码及邮箱：
- 账号：nsgf
- 密码：njwpdi
- 邮箱：yesi330@163.com

 
## 8. 发布
```
npm publish
```

## 9.安装、使用
```
//测试项目根目录下安装
npm i matrix_ui --registry=http://199.10.9.178:8081/repository/npm-hosted/
```
```
//项目入口文件中  导入
import matrix_ui from 'matrix_ui'
import 'matrix_ui/lib/style.css'

//项目入口文件 注册组件库
app.use(matrix_ui)
```
```
//使用 
<Nsbutton type="primary">custom button</Nsbutton>
```

## 10.文档说明

如果需要查看说明文档或示例代码可以运行npm run docs:dev 启动运行本地服务器查看

## 11.其他

涉及element-plus的二次封装的组件，开发测试环境都需要安装
```
npm install element-plus
```