0.0.25 • Published 10 months ago

@hhy5277/matrix_ui v0.0.25

Weekly downloads
-
License
-
Repository
-
Last release
10 months ago

南水水库矩阵组件库

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
element-plusts封装组件库二次封装Vue-Components
0.0.25

10 months ago