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 相关文章推荐
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
JS实现图片翻书效果示例代码
Sep 09 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
js实现精确到秒的日期选择器完整实例
Apr 30 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
Openlayers学习之加载鹰眼控件
Sep 28 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
深入array multisort排序原理的详解
2013/06/18 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
浅谈js闭包理解
2019/03/28 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python的净值数据接口调用示例分享
2016/03/15 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
农民工创业典型事迹
2014/01/25 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
食品质检员岗位职责
2015/04/08 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL