# @weitutech/by-components

### npm 安装

```
安装时切换淘宝源比较快
npm config set registry https://registry.npmmirror.com/

npm install @weitutech/by-components
```

### 引入

由于对 vxeTable 进行了再次处理，所以需要复制 plugin 文件夹到项目中
并手动引入 vxeTable  
plugin 目录可从组件库中复制到项目

```
import '@/plugin/vxeTable.js';
import '@weitutech/by-components/lib/index.css'
import BYComponents from '@weitutech/by-components'
Vue.use(BYComponents)
```

### npm 发布

```
第一次发布
npm login

发布时需要确保npm的源是官方 npm
npm config set registry https://registry.npmjs.org/


出现功能修改后，需更新package的版本号
清除缓存
npm cache clean --force
发布
npm publish --access public
```

### 注意事项

1. 组件开发中 css 样式单独放在 style 目录下, 整体打包成一个 css 样式引入
2. 打包后会在 lib 目录下生成 js 和 css 文件
3. 本地开发时可采用 npm link 方式关联依赖，package 入口配置为 src/index.js

### npm link

```
组件库中运行 npm link
项目中运行 npm link @weitutech/by-components
```

> **💡 提示**  
> 本地link调试时，需要把组件库的package.json中的main字段改为src/index.js（"main": "src/index.js"）  
> 如需link调试样式， 宿主工程main.js中要 import '@weitutech/by-components/src/style/index.scss' //TODO:注意：调试样式link , 调试完需注释
> 调试完成后，切记改回 "main": "lib/by-components.umd.js",
> 如果组件库更新，宿主项目没有同步更新， 尝试重新编译组件库npm run build, 且清除宿主项目缓存rm -rf node_modules/.cache

### 组件文档构建

```
npm run docs:dev
npm run docs:build
文档部署到Github Pages: npm run docs:deploy
```

[组件文档·Github Pages](https://weitutech.github.io/by-frontend-components-docs/)

### 关于新组件开发

1. 采用 by 为前缀命名方式
2. 避免过度耦合，考虑不同项目的复用性，尽量避免组件内调取接口
