一、创建项目
在指定目录中使用命令创建一个项目,或者使用vue可视化面板一键生成。
vue create/vue ui(建议使用vue可视化面板生成)
二、 调整目录
1、把src目录更名examples,用做示例展示
2、新增packages 用于编写存放组件
调整后目录结构
三、 重新配置项目以支持新的目录结构
在根目录下新建一个vue.config.js文件,重新配置页面入口、添加webpack对packages目录支持处理,代码示例
module.exports = {
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages')
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
return options
})
}
}
四、编写组件
在packages目录下新建toast目录和index.js文件,toast目录下再建index.js和index.vue
toast目录下的index.js导出当前组件,代码示例
import toast from './index.vue'
toast.install = function (Vue) {
Vue.component(toast.name, toast)
}
export default toast
packages目录的index.js整合所有的组件,对外导出,即一个完整的组件库代码示例
import toast from './toast'
// 存储组件列表
const components = [
toast
]
// 定义 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,
// 以下是具体的组件列表
toast
}
五、 测试用例
修改examples目录下app.vue,修改后的代码示例
<template>
<div id="app">
<toast />
</div>
</template>
<script>
import toast from "./../packages/index";
import Vue from "vue";
Vue.use(toast);
export default {
name: "App",
};
</script>
修改完运行看到效果图说明组件已经没问题可以发布了
六、准备发布到npm
1、package.json
中新增一条编译为库的命令
"lib": "vue-cli-service build --target lib --name zdy-com --dest lib src/lib/index.js"
2、配置 package.json
文件中发布到 npm 的字段
name
: 包名,该名字是唯一的。可在 npm 官网搜索名字,如果存在则需换个名字。version
: 版本号,每次发布至 npm 需要修改版本号,不能和历史版本号相同。description
: 描述。main
: 入口文件,该字段需指向我们最终编译后的包文件。keyword
:关键字,以空格分离希望用户最终搜索的词。author
:作者private
:是否私有,需要修改为 false 才能发布到 npmlicense
: 开源协议
3、添加 .npmignore
文件,设置忽略发布文件
我们发布到 npm 中,只有编译后的 lib
目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。
和 .gitignore
的语法一样,具体需要提交什么文件,看各自的实际情况。
七、发布到npm
申请一个npm账号,cmd进入该项目的目录,npm run lib 后 npm publish