自定义Vue组件打包、发布到npm及使用教程

⾃定义Vue组件打包、发布到npm及使⽤教程
本⽂将帮助：将⾃⼰写的Vue组件打包到npm进⾏代码托管，以及正常发布之后如何使⽤⾃⼰的组件。

本⽂讲述的仅仅是最基础的实现，其他复杂的操作需要⾮常熟悉webpack的相关知识，作者将继续学习。

按照⼤佬⽂中写的⼀步步操作，够细⼼的话基本可以⼀步到位。

下⾯总结⼀下发布步骤：
1. 利⽤Vue的脚⼿架新建⼀个简易版的Vue项⽬my-project：
vue init webpack-simple my-project -> cd my-project -> npm i -> npm run dev
2. 编写组件：
src下新建myPlugin⽂件夹⽤于存放所以开发的组件 -> 为每⼀个组件创建⼀个⽂件夹，其中存放⼀个vue组件⽂件和⼀个index.js配置⽂件 -> 在myPlugin下的最外层创建⼀个⼊⼝配置⽂件 -> 为每个⼈vue组件⽂件中加上⼀个name属性
3. 测试组件：
在app.vue中测试⼀下⾃⼰的组件可不可以⽤
4. 编写配置⽂件
为刚刚加⼊的每个组件⽂件夹中的index.js放⼊如下代码：（其中ldcPagination为组件名）
import ldcPagination from './index.vue';
ldcPagination.install = Vue => ponent(, ldcPagination);//.name就是开始说的vue⽂件暴露出来的name名，ldcPagination整个组件export default ldcPagination;
为myPlugin下index.js放⼊如下代码：（其中ldcPagination为组件名，多个组件直接在components数组中加⼊并在最后输
出出来就⾏）（引⼊的公共样式⽂件等都可以放这个⽂件中）
import ldcPagination from './Pagination/index.js';
const components = [
ldcPagination
]
const install = function(Vue, opts = {}) {
components.forEach(component => {
ponent(, component);
});
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
install,
ldcPagination
}
5. 改写webpack.config.js配置⽂件
将其中的输⼊输出换成如下代码：
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
},
...
}
6. 发布前准备
改写package.json中的private为false，加⼊"main": "dist/ldc-ui.js", 其他的⾃定义 -> 新建.npmignore⽂件忽略不需要上传的⽂件如.* *.md *.yml build/ node_modules/ src/ test/
7. 发布
npm run build 打包 -> 注册npm账号 -> npm login 登录 -> npm publish 发布
可能出现问题：
2. 版本号不能重复
3. 图⽚资源打包后⽆法使⽤，所以⾃⼰的组件中不要使⽤
使⽤组件⽅式：
1. npm i xxx -D
2. import XXX from 'xxx'
3. const { A, B } = XXX
4. 在Vue中注册 components: { A, B }
总结
以上所述是⼩编给⼤家介绍的⾃定义Vue组件打包、发布到npm及使⽤教程,希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！。