时间:2021-05-26
自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用。本文就粗细的介绍下,如有疑问欢迎共同讨论。在这里你能了解下如下知识点:
1. 如何发布一个包到npmjs仓库上
2.如何引用一个npm包,尤其是本地引用
3.vue组件的两种引用方案
一、发布一个包到npm的步骤
在npmjs.org上注册一个账号
然后进入命令提示窗口输入:
登录信息都保存在用户目录下的.npmrc文件中(以token的方式保存)
npm publish:发布包
执行npm publish这前,请切换到需要发包的项目根目录下。
npm unpublish --force:移除一个发布包(也可以移除指定版本的包)
注意:
二、build方式引用vue组件
示例使用的是本地安装一个npm包。因为把包发布到npmjs,然后再npm到项目中太过麻烦(由于我们要做来回调整和测试)。实现vue组件三步骤:
1. 配置组件(被引用的组件),可以省略
配置package.json,主要是增加main节点
主是main的这个节点,如果不配置,我们在其他项目中就不用import XX from '包名'来引用了,只能以包名作为起点来指定相对的路径。
导出可供外部访问的组件
主要是导出可以让外部访问的组件,这里没有直接导出main.js,是因为我们所需要的是一些子组件,而根组件(因为他存在直接挂载到dom上的操作)。
编写打包成为一个组件的脚本
此种打包方式会将此组件的所有引用打包成一个文件,还是存在不合理的现象。
生成包 通过上述三个步骤的配置,只需要运行打包成组件的脚本就可以生成发布包了。
2、本地如何引用npm包(安装发布好的包)
用命令模式进入开发项目文件夹,用命令安装包。npm install --save 本地路径 即可。
npm install --save D:\MyProject\vue2-tree3、根据包名直接定位组件
<template> <div id="app"> <img src="./assets/logo.png"> <hello></hello> <VueTree></VueTree> </div></template><script>import Hello from './components/Hello'import {VueTree} from 'vue-tree/dist/vue-tree-common' //重点export default { name: 'app', components: { Hello, VueTree }}</script><style>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>此处我用的是import {VueTree} from 'vue-tree/dist/vue-tree-common这种方式引入的包,因为在原到用的package.json中main节点配置的index.js。
三、更为直接的引用vue组件
四、总结
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
如何在Vue中建立全局引用或者全局命令,具体内容如下1一般在vue中,有很多vue组件,这些组件每个都是一个文件。都可能需要引用到相同模块(或者插件)。我们不想
前言Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。首先用vue-cli创建一个项目,其
1、创建vue项目2、使用vant组件npminstallvant--S全局引用时在main.js引入importVantfrom'vant';import'v
1、创建vue项目2、使用vant组件npminstallvant--S全局引用时在main.js引入importVantfrom'vant';import'v
本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用。功能说明多层弹出时,只有一个背景层。弹出层嵌入内部组件