# cmp-package

**Repository Path**: ereddate2017/cmp-package

## Basic Information

- **Project Name**: cmp-package
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-08-05
- **Last Updated**: 2021-08-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于Vue cli3组件库构建目标脚手架

## 打包命令

### npm run lib
```
打包完成后，会生成以下文件

dist/demo.html
dist/组件库名字.common.js       --> 打包器用的commonJS包
dist/组件库名字.common.js.map
dist/组件库名字.css             --> 组件中分离出的css，组件没有css这个文件不会出现
dist/组件库名字.umd.js          --> 给浏览器或AMD loader使用的umd包
dist/组件库名字.umd.js.map
dist/组件库名字.umd.min.js      --> 压缩后的umd包
dist/组件库名字.umd.min.js.map

```

### 跟随打包上传的文件(选用) 
```
如果用到手动按需引入，你需要上传package中未压缩的原组件到npm
请把根目录下.gitignore文件过滤器中的 package/ 删除，
package文件夹将在npm publish中上传

package/

```

## 上传npm

### npm publish
```
上传npm时，上传的文件有

dist/组件库名字.common.js
dist/组件库名字.css
dist/组件库名字.umd.js
dist/组件库名字.umd.min.js
package.json
README.md
```

不需要上传的文件可以在.gitignore文件过滤器中配置
README.md文件为组件库构建原文档，不需要上传可以删除

## 配置文件

### package.json
```
"name":"组件库名字",
"main": "dist/组件库名字.common.js"
"scripts": {
    "lib": "vue-cli-service build --target lib --name 组件库名字 -dest lib package/组件库的index文件.js",
}
```

### vue.config.js
```
文件中的配置已加上注释，没有特殊需求这个文件不用改动
```

### .gitignore
```
在文件过滤器中加入以下配置，禁止不需要的文件上传到npm组件库中

# Editor directories and files
src/
public/
vue.config.js
babel.config.js

```

## 组件引用

### 全局引入
```
import cmpPackage from 'cmp-package'
import 'cmp-package/dist/cmp-package.css'
Vue.use(cmpPackage)
```

### 按需引入(可用，但未验证是否是按需)
```
未验证这是不是按需，但可以这样用没问题。。

import cmpPackage from 'cmp-package'
import 'cmp-package/dist/cmp-package.css'
Vue.use(cmpPackage.ComponentName1)
Vue.use(cmpPackage.ComponentName2)
```

### 手动按需引入
```
需要把完整的package上传到npm

import Component from 'cmp-package/package/component/component'
components:{ Component }
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).