1、首先新建一个组件，下面以封装的基础input为例子：
BaseInput.vue组件
代码如下
<el-input
v-model="value"
:size="size"
:type="type"
:rows="rows"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"
:maxlength="length" >
</el-input>
<script>
export default {
name: 'BaseInput' //每个组件需要写明“name”属性
props:{
size: String, // 输入框大小设置
rows: null,
type: String,
placeholder: String,
disabled: Boolean,
readonly: Boolean,
length: [Number, String],
}
}
</script>
注意：组件内部一定要写明“name”属性
2、在组件同级目录下新建一个index.js文件
目录结构如下：
index.js代码如下：
组件的注册，目的是为组件提供 install 安装方法，供按需引入。
// 导入组件，组件必须声明 name
import BaseInput from './baseInput.vue'
// 为组件提供 install 安装方法，供按需引入
BaseInput.install = function (Vue) {
Vue.component(BaseInput.name, BaseInput)
}
// 默认导出组件
export default BaseInput
3、导出组件
整合所有的组件，对外导出，即一个完整的组件库
在components文件在新建一个index.js文件：
目录结构如下：
index.js代码如下：
// 导入下拉按钮组件
import BaseInput from './baseInput/BaseInput.vue'
// 存储组件列表
const components = [
BaseInput
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
// 判断是否安装
if (install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
BaseInput
}
4、配置项目
vue.config.js 配置文件，如果这个文件存在则他会被自动加载，所有的对项目和webpack的配置，都在这个文件中。
目录结构：
vue.config.js代码：
module.exports = {
pages: {
index: {
entry: 'src/components/index.js', // 入口文件
template: 'public/index.html', // 模板来源
filename: 'index.html' //输出文件
}
},
css: { extract: false },
}
5、编译命令
根目录下 package.json 中新增一条编译为库的命令 --target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式。 --dest : 输出目录，默认 dist。这里我们改成 lib [entry]: 最后一个参数为入口文件，默认为 src/admin/manage/App.vue。这里我们指定编译 src/components/index.js
目录结构：
package.json代码如下：新增一条
"scripts": {
"lib": "vue-cli-service build --target lib --name baseInput --dest lib src/components/index.js",
}
6、执行编译库命令
npm run lib
7、配置发布包的字段
打包完之后，修改package.json文件
根目录下 package.json中配置
description: 描述
keyword：关键字，以空格分离希望用户最终搜索的词
author：作者
license： 开源协议
代码如下：
{
"name": "BaseInput",//上传到npm私服中的包名，也是发布要引用import的名字
"version": "0.1.0",//版本号，每次npm publish发布时，需要修改不同的版本号
"private": false,//是否私有，设置为false才可以发布到npm
"main": "lib/BaseInput.umd.min.js",//入口文件，该字段需要指向最终编译后的包文件
"scripts": {
"lib": "vue-cli-service build --target lib --name BaseInput--dest lib src/components/index.js",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"beta": "vue-cli-service build --mode beta",
"lint": "vue-cli-service lint",
"analyze": "ANALYZE=true vue-cli-service build",
"test:e2e": "vue-cli-service test:e2e",
"test:unit": "vue-cli-service test:unit"
}
}
8、设置忽略发布文件
减小包的体积。
发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。
需要设置忽略目录和文件。
和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。
9、在本地测试并使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>rollup.js + vue</title>
</head>
<body>
<div id="app">
<base-input
placeholder="请输入"
type="text"
v-model="valueOne">
</base-input>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./lib/BaseInput.umd.js"></script>
<script>
Vue.use(hero)
Vue.use(BaseInput)
var app = new Vue({
el: '#app',
data(){
return {
valueOne:'你好'
}
}
})
</script>
</body>
</html>
10、发布包
把打包好的lib文件发布到自己的私服或者git上
11、下载并使用
npm install BaseInput
在 main.js 引入并注册
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;//使用element组件需要引入对应的样式文件
import BaseInput from ‘BaseInput’
Vue.use(ElementUI)
Vue.use(BaseInput)
2729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
