最近对开发Vue组件库的流程很好奇,网上步骤一搜也是一堆,总是少点漏点的步骤,就会导致整段垮掉,下边自己弄完整理了一下。
跟着步骤走:
一,创建一个vue项目,为了简洁方便,推荐使用webpack-simple构建一个项目
vue init webpack-simple my-project
二,就是按照提示,cd my-project------->npm i---------->npm run dev,到这里就简单构建了vue简洁版的脚手架
三,开始写自己的组件。
为了方便管理更多的组件,我们这里在src目录下面新建了一个myPlugin的目录,在这里面存放我们开发的组件,
我这里是写了两个组件,一个是cropper,一个是Pagination,scss用来存放样式,有封装的js方法就建个js目录,没有就没必要。然后再建一个你写的vue文件,和一个index.js(为什么每个组件会建立一个index.js,后边会提到,按步骤继续走)。
四,编写你的组件,内容随意,主要注意export default出去的name值我们可以定义一下,后期可以作为组件的自定义name名。
五,在app.vue里面引入观察组件是否能正确使用,下图是app.vue的详情代码。
<template>
<div id="app">
<pagination :totalPage=15 :totalSize=300 @onChange='tap'></pagination>
<cropper></cropper>
</div>
</template>
<script>
import pagination from './myPlugin/pagination/index.vue'
import cropper from './myPlugin/cropper/index.vue'
export default {
name: 'app',
data () {
return {
}
},
methods:{
tap(s){
console.log(s,'出来了哈哈哈')
}
},
components:{
pagination,
cropper
}
}
</script>
<style lang="scss">
</style>
六,确定没问题了,就开始配置准备发布的东西,上面提到了为什么每个组件的文件夹都要建立一个index.js文件,在myPlugin单个封装的组件目录下的index.js中注册一次,(注意是单个组件的index.js)写入如下代码:
import ldcPagination from './index.vue';
ldcPagination.install = Vue => Vue.component(ldcPagination.name, ldcPagination);//.name就是开始说的vue文件暴露出来的name名,ldcPagination整个组件
export default ldcPagination;
七,在myPlugin根目录下的index.js里面对组件进行配置,(注意是myPlugin根目录下的index.js,不是单个组件下的)这里简单列举了一个组件,多个可直接引入放到components数组里面并在暴露出去的时候写入。
分析下代码(再不懂得去看下vue构造器),
第一步引入了ldcPagination组件
第二步定义了一个数组,可用来存放引入的组件,其目的是为了下方的insatll函数循环注册了一次引入ldc-ui组件后,vue.use(ldc-ui)就可以使用全部的组件,无需单个引入,install别忘了default出去。
ps:如果你是单个的组件可以直接省略 中间所有步骤,直接在这里import引入,export default出去就行
import ldcPagination from './Pagination/index.js';
const components = [
ldcPagination
]
const install = function(Vue, opts = {}) {
components.forEach(component => {
Vue.component(component.name, component);
});
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
install,
ldcPagination
}
八,开始配置webpack.config.js,这里把之前的entry(输入)和output(输出)注释掉并进行替换,主要是考虑想观察组件是否配置成功了就引入到app.vue里面运行观察使用main.js的入口文件,没问题就注释掉,使用如下的配置引入的index.js入口文件路径并更换output进行打包,准备发布的工作
var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV;
module.exports = {
//entry: './src/main.js',
//output: {
// path: path.resolve(__dirname, './dist'),
// publicPath: '/dist/',
// filename: 'build.js'
// },
entry: NODE_ENV == 'development' ? './src/main.js' : './src/myPlugin/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',//路径
filename: 'ldc-ui.js',//打包之后的名称
library: 'ldc-ui', // 指定的就是你使用require时的模块名
libraryTarget: 'umd', // 指定输出格式
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
...
}
九,开始进行配置pack.json。
version是版本号,发布一次之后,再次发布的时候必须更改此字段,否则会报错
可自行对比个人的json文件,就多了俩行代码,分别是private和main
private是否为私人的,这里选择false
main代表打包之后的文件路径
"name": "ldc-ui",
"description": "A Vue.js UI",
"version": "1.0.2",
"author": "",
"license": "MIT",
"private": false,
"main": "dist/ldc-ui.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.5.11"
},
在准备的最后最好是,建立一个.npmignore文件在里面屏蔽掉不需要上传的累赘,像我就屏蔽了如下内容(类似于git上传仓库中的.gitignore,直接建立文件重名名是不行的,最好用命令行去创建,不会建的百度一下)
.*
*.md
*.yml
build/
node_modules/
src/
test/
十,到这里,准备发布npm的东西。
1,去npm官网注册一个npm账号,按照步骤。
2,注册成功之后,在项目目录下的cmd命令行中输出
npm login 登陆你的用户,密码
npm publish 进行发布
成功之后就可以去npm官网serach中直接搜索,
ps:在vue组件中有时本地测试没问题,发布会有一个错误document is not defined,不影响正常使用,这是runKit测试引入的问题,具体以下载引用使用为主。