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代码
Oct 19 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 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
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
浅谈python多线程和队列管理shell程序
2015/08/04 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
《藏戏》教学反思
2014/02/11 职场文书
《秋游》教学反思
2014/04/24 职场文书
工作失职检讨书
2015/01/26 职场文书
土地租赁协议书
2015/01/29 职场文书
环卫工作个人总结
2015/03/04 职场文书
诉讼和解协议书
2016/03/23 职场文书