DDR爱好者之家

自定义Vue组件打包、发布到npm及使用教程
站长资源 2024/11/25 佚名
63 1538
DDR爱好者之家 Design By 杰米

本文将帮助：将自己写的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 => Vue.component(ldcPagination.name, 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 => {
  Vue.component(component.name, 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' "main": "dist/ldc-ui.js", 其他的自定义 -> 新建.npmignore文件忽略不需要上传的文件如.* *.md *.yml build/ node_modules/ src/ test/


　　7. 发布


　　npm run build 打包 -> 注册npm账号 -> npm login 登录 -> npm publish 发布


　　可能出现问题：


1. 登录源错误， npm config get registry 可查看当前登录源，npm config set registry=http://registry.npmjs.org 可切换到正确的登录源


2. 版本号不能重复


3. 图片资源打包后无法使用，所以自己的组件中不要使用


　　使用组件方式：


1. npm i xxx -D


2. import XXX from 'xxx'


3. const { A, B } = XXX


4. 在Vue中注册 components: { A, B }




总结


以上所述是小编给大家介绍的自定义Vue组件打包、发布到npm及使用教程,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米