南水水库矩阵组件库

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 组件名
`

手动方式

$3

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




$3


`
import { App } from 'vue'
// 导入组件，组件必须声明 name
import NsButton from './src/index.vue';

// 为组件提供 install 安装方法
export default {
install(app: App) {
app.component('ns-button',NsButton )
}
}
`


$3


`
//示例如下

// 导入组件
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)
`
`
//使用
custom button
`

10.文档说明

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

11.其他

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