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 相关文章推荐
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
js querySelector() 使用方法
Dec 21 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
JS代码实现页面切换效果
Jan 10 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中调用JAVA
2006/10/09 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
JavaScript模拟push
2016/03/06 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
django之session与分页(实例讲解)
2017/11/13 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
Python列表解析配合if else的方法
2018/06/23 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
python regex库实例用法总结
2021/01/03 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
超市开业庆典策划方案
2014/05/14 职场文书
高中课程设置方案
2014/05/28 职场文书
品质口号大全
2014/06/17 职场文书
经营理念口号
2014/06/21 职场文书
会计岗位说明书
2014/07/29 职场文书
八项规定自查自纠报告及整改措施
2014/10/26 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
工程款催款函
2015/06/24 职场文书
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技