Dj-components NPM

dj-components

基于Vue2、ElementUI编写的DJ专用组件

开发

通过 link + watch 的方式支持本地修改代码后自动刷新页面查看修改结果

在 dj-components 项目下运行 yarn link
在业务项目(比如dj-main)目录下运行 yarn link dj-components
在 dj-components 项目下运行 yarn run lib:watch
在业务项目（如dj-main）下运行 yarn run serve 启动开发

注：如果出现bug，尝试将 package.json 的 lib:watch 命令中的--inline-vue 替换成 --mode production，但构建过程会更慢

发布新版本

执行 npm run lib 构建代码
在本地测试，无问题后提交所有相关代码（提交的代码包括lib目录中构建后的文件）
提交后执行 npm version patch，会自动升级版本号和创建提交记录，随后手动 push 代码到远端
执行 npm publish 进行发布
升级引用到 dj-components 的项目中的依赖版本号

发布时可能遇到的异常情况及排查办法

npm publish 失败：检查网络连通性，且执行 publish 命令式 registry 应该是 https://registry.npmjs.org/ ，因为淘宝源是只读的（默认的npmrc文件已经配置好了）
其他项目升级 dj-components 的版本后无法安装依赖：需要手动触发npm => cnpm => taobao npm的同步，
- 从 npm 同步到 cnpm
- 从 cnpm 同步到 taobao npm

安装

NPM

推荐使用 yarn 的方式安装，它能更好地和 webpack 打包工具配合使用。

# npm 或 yarn
yarn add dj-components -S

CDN

目前可以通过 unpkg.com/dj-components 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/dj-components/lib/dj-components.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/dj-components/lib/dj-components.umd.min.js"></script>

快速上手

<template>
  <div>
    <flex-form v-model="form.data" :items="form.items" :layout="form.layout" mode="edit"></flex-form>
  </div>
</template>

<script>
import { FlexForm } from 'dj-components'

export default {
  components: {
    FlexForm
  },
  data() {
    return {
      form: {
        layout: [
          ['name', 'mobile'],
          'address'
        ],
        items: {
          name: { type: 'input', label: '姓名' },
          mobile: { type: 'input', label: '手机号' },
          address: { type: 'input', label: '地址', props: { type: 'textarea' } }
        },
        data: {
          name: '',
          mobile: '',
          address: ''
        }
      }
    }
  }
}
</script>