vue组件如何被其他项目引用


Posted in Javascript onApril 13, 2017

自己写的vue组件怎么才能让其他人引用呢,或者是共用组件如何让其他项目引用。本文就粗细的介绍下,如有疑问欢迎共同讨论。在这里你能了解下如下知识点:

1. 如何发布一个包到npmjs仓库上

2.如何引用一个npm包,尤其是本地引用

3.vue组件的两种引用方案

一、发布一个包到npm的步骤

在npmjs.org上注册一个账号
然后进入命令提示窗口输入:

  • npm adduser: 进入添加用户
  • Username your name: 设置用户名
  • Password your password: 设置密码
  • Email youremail:设置邮箱

vue组件如何被其他项目引用

登录信息都保存在用户目录下的.npmrc文件中(以token的方式保存)

      npm publish:发布包

执行npm publish这前,请切换到需要发包的项目根目录下。

vue组件如何被其他项目引用

      npm unpublish --force:移除一个发布包(也可以移除指定版本的包)

注意:

  • 发包前必须要在npmjs上注册一个账号
  • 每次发布的时候都需要重新更新版本
  • 也可以用npm logout登出用户,用npm login登录用户

vue组件如何被其他项目引用

二、build方式引用vue组件

示例使用的是本地安装一个npm包。因为把包发布到npmjs,然后再npm到项目中太过麻烦(由于我们要做来回调整和测试)。实现vue组件三步骤:

1. 配置组件(被引用的组件),可以省略

配置package.json,主要是增加main节点

"main": "index.js"

主是main的这个节点,如果不配置,我们在其他项目中就不用import XX from '包名'来引用了,只能以包名作为起点来指定相对的路径。

导出可供外部访问的组件

import VueTree from './components/Hello'
module.exports = {
 VueTree
}

主要是导出可以让外部访问的组件,这里没有直接导出main.js,是因为我们所需要的是一些子组件,而根组件(因为他存在直接挂载到dom上的操作)。

编写打包成为一个组件的脚本

var webpack = require('webpack')
var path = require('path')
var vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
 return path.join(__dirname, '..', dir)
}

var opt = {
 entry: {
 'vue-tree-common': './src/comp.js'
 },
 output: {
 path: resolve('dist'),
 filename: '[name].js',
 library: 'vue-tree-common',
 libraryTarget: 'commonjs2' //注意这里,打包的标准
 },
 resolve: {
 extensions: ['.js', '.vue'],
 modules: [
  resolve('src'),
  resolve('node_modules')
 ]
 },
 module: {
 rules: [
  {
  test: /\.vue$/,
  loader: 'vue-loader',
  options: vueLoaderConfig
  },
  {
  test: /\.js$/,
  loader: 'babel-loader',
  include: [resolve('src'), resolve('node_modules')]
  }
 ]
 }
}

var compiler = webpack(opt)
compiler.run(function(err, state) {
 console.log(err)
})

此种打包方式会将此组件的所有引用打包成一个文件,还是存在不合理的现象。

生成包 通过上述三个步骤的配置,只需要运行打包成组件的脚本就可以生成发布包了。

2、本地如何引用npm包(安装发布好的包)

用命令模式进入开发项目文件夹,用命令安装包。npm install --save 本地路径  即可。

npm install --save D:\MyProject\vue2-tree

3、根据包名直接定位组件

<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组件

  • 我们还需要npm本地安装或者再现安装;
  • 按照如下图所示引用:

vue组件如何被其他项目引用

四、总结

  • vue的版本需要一致,如果不一致需要调整。
  • vue的几种打包方式:UMD、common、esm。
  • vue分为部分和完成打包,区别就是template的支持。
  • vue组件样式存在图片的引用时,请使用单独的样式引入,因为组件的引入是不带图片的。
  • “build方式引用vue组件”此方式可以把组件打成不同的包,方便不同规范引用。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS继承--原型链继承和类式继承
Apr 08 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
React简单介绍
May 24 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 #Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 #jQuery
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 #Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 #Javascript
详解vue的数据binding绑定原理
Apr 12 #Javascript
angular学习之ngRoute路由机制
Apr 12 #Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 #Javascript
You might like
sphinx增量索引的一个问题
2011/06/14 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
js同时按下两个方向键
2007/12/01 Javascript
js replace 与replaceall实例用法详解
2013/08/03 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中str.join()简单用法示例
2018/03/20 Python
Python测试线程应用程序过程解析
2019/12/31 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
开办大学饮食联盟创业计划书
2014/01/29 职场文书
给领导的检讨书
2014/02/16 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL