@etop/element-market

业务组件库

初始化项目

yarn install

本地开发编写组件，基于 Vue Styleguidist

yarn dev

如何编写组件

• 在 packages 目录下创建组件目录，以 Et 前缀开头，基本的目录结构参考如下：

EtXXX
  - src
    - index.vue
    - Readme.md
  - index.ts

• 如果组件需要添加样式文件，在 packages/theme-default/src 目录下创建对应的 scss 文件，在 packages/theme-default/src/index.scss 导入该 scss 文件

编译压缩生成发布文件，生成 demo 演示部署文件，更新 package 版本（默认更新 patch 版本）并进行 git 提交

yarn release
git push origin master

发布版本到 npm

npm login
输入账号密码
npm run publish

项目内使用

import Vue from 'vue'
import ElementMarket from '@etop/element-market'
import '@etop/element-market/lib/theme-default/index.css'

Vue.use(ElementMarket)

// 支持传入全局axios实例，发送请求的组件默认会使用该axios
Vue.use(ElementMarket, {
  axios: axios.create()
})

如何在项目内调试 element-market

以ebuy-ad-effect-web项目为例

先在vue项目中添加/更改一些配置：

postcss.config.js

module.exports = {
  plugins: [require('autoprefixer')], // 确认安装了autoprefixer
}

vue.config.js

const PostCSSConfig = require('./postcss.config')

module.exports = {
    css: {
    loaderOptions: {
      postcss: {
        ...PostCSSConfig,
        exclude: ['node_modules/@etop/element-market/lib/theme-default/index.css'],
      },
    },
  },
    configureWebpack: smp.wrap({
    resolve: {
      symlinks: false,
    },
  }),
}

然后在本项目(element-market)中：

1. 在 element-market 根目录执行 yarn debug，会创建一个临时调试目录 debug，(debug目录下只需要lib和package.json文件，请删除其他文件，如果有的话)
2. 进入 debug 目录执行 yarn link 将 element-market 项目链接到全局
3. 在 ebuy-ad-effect-web 项目根目录执行 yarn link @etop/element-market
4. 修改 element-market 项目内的代码，就是实时反应到业务项目内
5. 调试完成后，在 element-market 根目录执行 yarn unlink，移除全局链接
6. 在 ebuy-ad-effect-web 项目执行 yarn unlink @etop/element-market 和 yarn add @etop/element-market 恢复使用远程 npm 包