自定义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 => 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' ? './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 发布
可能出现问题:
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及使用教程,希望对大家有所帮助