工程说明

本工程为基于 vue-cli 的组件库构建、打包、发布及相关示例的前端工程。

本地开发环境

# 使用 npm 包管理器的

# 安装依赖
npm install

# 本地启动
npm run dev # 即可自动在浏览器中打开

# 使用 yarn 包管理器的

# 安装依赖
yarn install

# 本地启动，
yarn dev  # 即可自动在浏览器中打开

组件库构建与打包

组件开发完后，即可运行构建命令。

相关构建命令、发布命令在 package.json 中已配置，构建时，请确定好要构建的组件库版本号 "version": "xx.xx.xx",

{
  "version": "xx.xx.xx",
  "scripts": {
    "lib": "vue-cli-service build --target lib --name zcui-mobile --dest lib packages/index.js",
    "npm-l": "npm login",
    "npm-p": "npm publish --access=public"
  }
}

组件库构建

# 使用 npm 包管理器的
npm run lib

# 使用 yarn 包管理器的
yarn lib

构建成功后，确定各组件功能完好无误后，即可发布至 npm。

登录 npm

yarn npm-l

npm 发布包

yarn npm-p

发布成功后即可，安装使用该 npm 包了。

工程目录主要文件

│
├── examples                       // 组件库示例页面
├── lib                            // 组件库构建产物
├── package                        // 组件库源码
│
└── style                          // 样式文件
   └── reset.scss              // 样式变量

组件库的使用

安装

# 使用 npm 包管理器的
npm install zc-ui-mobile -S

# 使用 yarn 包管理器的
yarn add zc-ui-mobile

卸载

# 使用 npm 包管理器的
npm uninstall zc-ui-mobile

# 使用 yarn 包管理器的
yarn  remove zc-ui-mobile

更新 ，再次安装即可更新至最新版本

# 使用 npm 包管理器的
npm install zc-ui-mobile -S

# 使用 yarn 包管理器的
yarn add zc-ui-mobile

工程中的使用

// 全局引用
import zcUI from 'zc-ui-mobile';
import 'zc-ui-mobile/lib/zcui.css';
Vue.use(zcUI);

<!-- 按需引入 -->
<script>
  import { List, Table, xxxxx } from 'zc-ui-mobile';
  import 'zc-ui-mobile/lib/zcui.css';

  export default {
    components: {
      ThemeList: List,
      ThemeTable: Table,
      xxxxx,
    },
  };
</script>

版本更新记录

0.0.1

| 新特性 | 描述 | Bug 修复 | 作者 | 更新时间 | | ------ | :--------------: | :-----------: | :--: | :--------: | | 初始化 | 增加移动端组件库 | wmw、wgx、gxj | -- | 2022/09/22 |