# e-components

**Repository Path**: ymcdhr/e-components

## Basic Information

- **Project Name**: e-components
- **Description**: vue组件库开发示例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-14
- **Last Updated**: 2021-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# e-vue-components vue 的组件化开发

#### 组件化的好处

#### 组件的分类
1. 第三方组件
2. 基础组件
3. 业务组件

#### 怎么去做组件化
1. 处理组件的边界情况

2. 预览组件
```
> npm install -g @vue/cli
> npm install -g @vue/cli-service-global
```

vue serve  预览组件
```
> vue serve 组件名（不加组件名，就默认从入口文件寻找）
```

3. 基于elemenui开发组件

4. 

#### 如何管理组件库：Monorepo 
1. Multirepo(Multiple Repository) 一个仓库一个项目
2. Monorepo (Monolithic Repository) 一个仓库多个包（参考vue、react源码目录结构）
3. 写一个工具模块自动生成目录结构，然后安装必要依赖

#### Storybook （Styleguide 也很方便）
1. 可视化的组件展示平台：https://storybook.js.org/docs/react/get-started/introduction
2. 

#### yarn 的 workspaces，npm 不支持
![输入图片说明](https://images.gitee.com/uploads/images/2021/0714/115954_2f79bb7d_9130428.png "屏幕截图.png")

1. 注意：安装时是包的名字，不是目录名称

####  上lerna 统一发布所有包到 npm
![输入图片说明](https://images.gitee.com/uploads/images/2021/0714/121742_c103dc71_9130428.png "屏幕截图.png")

![输入图片说明](https://images.gitee.com/uploads/images/2021/0714/121900_9a1fc8c7_9130428.png "屏幕截图.png")

#### 组件的单元测试
![输入图片说明](https://images.gitee.com/uploads/images/2021/0714/124438_f7652c88_9130428.png "屏幕截图.png")

![输入图片说明](https://images.gitee.com/uploads/images/2021/0714/124446_abe71087_9130428.png "屏幕截图.png")

![输入图片说明](https://images.gitee.com/uploads/images/2021/0714/124608_4737d36e_9130428.png "屏幕截图.png")

![输入图片说明](https://images.gitee.com/uploads/images/2021/0714/124617_e270be0a_9130428.png "屏幕截图.png")


vue-jest 和 story-book 中的babel版本不同，需要安装一个插件
![输入图片说明](https://images.gitee.com/uploads/images/2021/0714/124715_df1aad54_9130428.png "屏幕截图.png")

![输入图片说明](https://images.gitee.com/uploads/images/2021/0714/124819_a544d9c3_9130428.png "屏幕截图.png")

![输入图片说明](https://images.gitee.com/uploads/images/2021/0714/125428_80524e2f_9130428.png "屏幕截图.png")


![输入图片说明](https://images.gitee.com/uploads/images/2021/0714/125608_23ca3b8f_9130428.png "屏幕截图.png")

## 安装测试依赖

```bash
yarn add jest @vue/test-utils vue-jest babel-jest -D -W
```

## Jest 的配置

jest.config.js

```js
module.exports = {
  "testMatch": ["**/__tests__/**/*.[jt]s?(x)"],
  "moduleFileExtensions": [
    "js",
    "json",
    // 告诉 Jest 处理 `*.vue` 文件
    "vue"
  ],
  "transform": {
    // 用 `vue-jest` 处理 `*.vue` 文件
    ".*\\.(vue)$": "vue-jest",
    // 用 `babel-jest` 处理 js
    ".*\\.(js)$": "babel-jest" 
  }
}
```

## Babel 的配置

babel.config.js

```js
module.exports = {
  presets: [
    [
      '@babel/preset-env'
    ]
  ]
}
```

## Babel 的桥接

```bash
yarn add babel-core@bridge -D -W
```

## 安装 Rollup 以及所需的插件

```bash
yarn add rollup rollup-plugin-terser rollup-plugin-vue@5.1.9 vue-template-compiler -D -W
```

## Rollup 配置文件

在 button 目录中创建 rollup.config.js

```js
import { terser } from 'rollup-plugin-terser'
import vue from 'rollup-plugin-vue'

module.exports = [
  {
    input: 'index.js',
    output: [
      {
        file: 'dist/index.js',
        format: 'es'
      }
    ],
    plugins: [
      vue({
        // Dynamically inject css as a <style> tag
        css: true, 
        // Explicitly convert template to render function
        compileTemplate: true
      }),
      terser()
    ]
  }
]
```

## 配置 build 脚本并运行

找到 button 包中的 package.json 的 scripts 配置
```js
"build": "rollup -c"
```

运行打包

```bash
yarn workspace lg-button run build
```

## 打包所有组件

### 安装依赖

```bash
yarn add @rollup/plugin-json rollup-plugin-postcss @rollup/plugin-node-resolve -D -W
```

### 配置文件

项目根目录创建 rollup.config.js

```js
import fs from 'fs'
import path from 'path'
import json from '@rollup/plugin-json'
import vue from 'rollup-plugin-vue'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'
import { nodeResolve } from '@rollup/plugin-node-resolve'

const isDev = process.env.NODE_ENV !== 'production'

// 公共插件配置
const plugins = [
  vue({
    // Dynamically inject css as a <style> tag
    css: true,
    // Explicitly convert template to render function
    compileTemplate: true
  }),
  json(),
  nodeResolve(),
  postcss({
    // 把 css 插入到 style 中
    // inject: true,
    // 把 css 放到和js同一目录
    extract: true
  })
]

// 如果不是开发环境，开启压缩
isDev || plugins.push(terser())

// packages 文件夹路径
const root = path.resolve(__dirname, 'packages')

module.exports = fs.readdirSync(root)
  // 过滤，只保留文件夹
  .filter(item => fs.statSync(path.resolve(root, item)).isDirectory())
  // 为每一个文件夹创建对应的配置
  .map(item => {
    const pkg = require(path.resolve(root, item, 'package.json'))
    return {
      input: path.resolve(root, item, 'index.js'),
      output: [
        {
          exports: 'auto',
          file: path.resolve(root, item, pkg.main),
          format: 'cjs'
        },
        {
          exports: 'auto',
          file: path.join(root, item, pkg.module),
          format: 'es'
        },
      ],
      plugins: plugins
    }
  })
```

### 在每一个包中设置 package.json 中的 main 和 module 字段

```js
"main": "dist/cjs/index.js",
"module": "dist/es/index.js"
```

### 根目录的 package.json 中配置 scripts

```js
"build": "rollup -c"
```









#### input 测试代码示例

```
import input from '../src/input.vue'
import { mount } from '@vue/test-utils'

describe('lg-input', () => {
  test('input-text', () => {
    const wrapper = mount(input)
    expect(wrapper.html()).toContain('input type="text"')
  })
  
  test('input-password', () => {
    const wrapper = mount(input, {
      propsData: {
        type: 'password'
      }
    })
    expect(wrapper.html()).toContain('input type="password"')
  })

  test('input-password', () => {
    const wrapper = mount(input, {
      propsData: {
        type: 'password',
        value: 'admin'
      }
    })
    expect(wrapper.props('value')).toBe('admin')
  })

  test('input-snapshot', () => {
    const wrapper = mount(input, {
      propsData: {
        type: 'text',
        value: 'admin'
      }
    })
    expect(wrapper.vm.$el).toMatchSnapshot()
  })
})

```



#### 使用 Rollup 打包
需要指定版本，因为最新版本是针对vue3.0

![输入图片说明](https://images.gitee.com/uploads/images/2021/0714/132330_7ade2d14_9130428.png "屏幕截图.png")


yarn clean 清理node_modukes
rimraf dist 清理dist目录
yarn workspaces run del 清除所有目录的dist
```
 yarn add rimraf -D -W 
```

![输入图片说明](https://images.gitee.com/uploads/images/2021/0714/133516_178b274e_9130428.png "屏幕截图.png")


#### 基于模板生成组件的基本结构，基于plop

安装
```
> yarn add plop -D -W
```

先定义模板

再使用配置文件

npm scripts脚本
"plop": "plop"

生成组件目录结构
执行npm run plop，根据提示输入；