译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包?

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

尽管我已经在工作上用了Vue.js一段时间,但我从不需要在npm上发布组件。但最近发现在不同的项目重写组件是件非常蛋疼的事,所以当我第三次使用Vue.js开发项目时,我觉得我们是时候需要一些高度可配置并且可重用的组件了。

首先,你需要安装vue-cli才能开始。

npm install -g @vue/cli
# 或者
yarn global add @vue/cli vue create my-vue-library

我们正在使用vue-cli 3.0 beta版本。 你可能会Github的README.md看到一条警告:“除非您有冒险精神,否则不要在生产中使用”,很显然我很有冒险精神,哈哈。

你现在的控制面应该看起来如下图:

现在你只需开始做以下事情:

npm run serve

现在开始创建一个简单的组件,来看一个Banner组件的例子。

<template>
<div class="banner" :style="bannerStyles" :class="`banner__${position}`">
<slot></slot>
</div>
</template> <script>
const defaultStyles = {
left: 0,
right: 0,
};
export default {
props: {
position: {
type: String,
default: 'top',
validator(position) {
return ['top', 'bottom'].indexOf(position) > -1;
},
},
styles: {
type: Object,
default: () => ({}),
},
},
data() {
return {
bannerStyles: {
...defaultStyles,
...this.styles,
},
};
},
};
</script> <style lang="scss" scoped>
.banner {
padding: 12px; color: #f6a623;
text-align: left;
position: fixed;
z-index: 2;
}
.banner__top {
top: 0;
}
.banner__bottom {
bottom: 0;
}
</style>

将组件注册为名为Banner的组件后,可以在模板中简单使用该组件:

<Banner>Fundebug:最专业的应用错误监控平台!</Banner>

你可以在CodeSandbox查看这个组件的demo

Fundebug错误实时监控为您的Vue项目保驾护航!

现在,如果你想通过npm使用这个组件,你必须做一些事情。

第1步 - 设置库构建

你需要利用vue-cli将你的组件构建为库。 将vue-cli-service build --target lib --name myLib [entry]添加到你的package.json脚本中。

默认情况下,[entry]是你的App.vue,但你可以将其更改为你导入这些组件的任何文件的相对路径。 你可能会也可能不会选择全局注册这些组件,但如果我是你,我会将它们与我的库名称一起注册为前缀。 程序员用组件的时候,代码越少越好。

我已经为我的脚本添加了build-bundle,以便我可以运行npm run build-bundle来创建我的库包。

这会产生类似于以下的输出:

对于CodeSandbox示例,输入文件应该如下所示:

第2步 - 指向package.json中的输出文件

为了确保package.json中的main属性正确指向输出文件。 我更喜欢使用commonjs包。

第3步 - 以用户身份在npm上添加/登录

确保你在npm上注册。 npm adduser注册一个新用户和npm login作为一个现有用户登录。

第4步 - 验证npm用户凭证

输入npm whoami来验证你的用户名。

第5步 - 命名你的组件库

为你的包选择一个名字,你必须确保它尚未被使用。 确保把它放在你的package.json中。

第6步 - 构建

通过执行在第1步中添加的程序包脚本来构建捆绑软件。

npm run build-bundle

第7步 - 在npm上发布组件库

运行npm publish –access public来发布该库供公众访问。

就是这样。 你完成了在npm上发布你的Vue组件库!

第8步 - 如何使用你新发布的库

从npm安装组件库并将组件导入代码中。 安装:

npm install --save [你的库名]

其中[你的库名]是你在第5步中给出的库的名称。

在你的main.js或类似的入口点,只需使用以下命令导入你的库:

import '你的库名';

现在,你可以开始使用你的组件了,因为我们在第一步中全局注册了这些组件。

对于我们的示例组件Banner,当我们注册组件时,组件名称为FlockBanner。 所以,你可以直接在你的模板中使用它:

<flock-banner>这是你的Banner是示例</flock-banner>

使用上面提到的组件库查看实例:https://codesandbox.io/s/n9n7yy2lwp

整个过程我们就完成了。 在Vue.js团队提出CLI版本3后,构建自己的组件库以便重用变得非常容易。 如果觉得这个流程有点帮助,点个赞呗,同时也支持下Fundebug哦!

如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库的更多相关文章

  1. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  2. VUE CLI 3.0 安装及创建项目

    一.安装 VUE CLI 3.0 官网: https://cli.vuejs.org/   详细资料可以自己先把官网过一遍. 1. 安装(默认你的电脑上已安装node及npm) npm install ...

  3. Django + Vue cli 3.0 访问静态资源问题

    [问题背景] 用Vue clie 3.0的搭建得框架把我坑死了,在打包后,调用不到静态资源js,css,mp3等 [问题原因] vue cli 3.0打包后,dist目录下没有static目录,而Dj ...

  4. vue/cli 3.0脚手架搭建

    在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成 ...

  5. @vue/cli 4.0+express 前后端分离实践

    之前总结过一篇vue-cli 2.x+express+json-server实现前后端分离的帖子,@vue/cli3.0及4.0搭建的项目与vue-cli2.x的项目结构有很大的不同.这里对@vue/ ...

  6. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  7. 专访Vue作者尤雨溪:Vue CLI 3.0重构的原因

    1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...

  8. vue cli 4.0.5 的使用

    vue cli 4.0.5 的使用 现在的 vue 脚手架已经升级到4.0的版本了,前两日vue 刚发布了3.0版本,我看了一下cli 4 和cli 3 没什么区别,既然这样,就只总结一下vue cl ...

  9. Vue CLI安装报错 npm ERR! Exit handler never called!

    安装Vue CLI时报错: npm install –g vue-cli 试了四种办法 1.把全局安装-g放到后面 npm install @vue/cli –g 2.命令行输入 npm 缓存清理命令 ...

随机推荐

  1. Java面试题精选,大型网站系统架构你不得不懂的10个问题

    作者:JavaGuide(公众号) 下面这些问题都是一线大厂的真实面试问题,不论是对你面试还是说拓宽知识面都很有帮助.之前发过一篇8 张图读懂大型网站技术架构 可以作为不太了解大型网站系统技术架构朋友 ...

  2. Javascript高级编程学习笔记(52)—— DOM2和DOM3(4)元素大小

    在日常实践中,我们在使用JS的时候难免会需要获取元素的大小及位置 首先要声明的是,这一部分的内容并不属于DOM2样式规范,因为DOM中并没有对我们如何获取元素大小的相关信息做出规范 偏移量 偏移量及元 ...

  3. 微博第三方登录使用social_django实现显示登陆的用户名

    首先修改social_soce源码,将用户信息添加进cookie 将其修改为:  response =  backend.strategy.redirect(url)    payload = jwt ...

  4. 查看windows到期时间

        查看windows到期时间    Slmgr.vbs  -xpr

  5. 吴恩达机器学习笔记33-评估一个假设输出(Evaluating a Hypothesis Outpute)

    当我们确定学习算法的参数的时候,我们考虑的是选择参量来使训练误差最小化,有人认为得到一个非常小的训练误差一定是一件好事,但我们已经知道,仅仅是因为这个假设具有很小的训练误差,并不能说明它就一定是一个好 ...

  6. Redis 配置内容总结

    命令 Redis 的配置文件位于 Redis 安装目录下,文件名为 redis.conf. 你可以通过 CONFIG 命令查看或设置配置项. (1)config get config_setting_ ...

  7. SVM算法简单应用

    第一部分:线性可分 通俗解释:可以用一条直线将两类分隔开来 一个简单的例子,直角坐标系中有三个点,A,B点为0类,C点为1类: from sklearn import svm # 三个点 x = [[ ...

  8. [JavaScript]catch(ex)语句中的ex

    try/catch语句是JavaScript语句提供的异常处理机制,一旦try语句块内部的语句抛出异常,在catch语句块即可捕获到Error类型的异常信息.我们知道JavaScript里是没有块作用 ...

  9. 性能瓶颈之Source

    数据源的瓶颈通常发生从数据库读取数据的时候,原因通常如下: 1) 脚本的查询效率低下 2) 数据库网络包太小 如何判定源瓶颈 通过在session log中读取thread statistics判定源 ...

  10. 发福利了!!超过100本的linux免费书籍

    New Books Kindle Fire App Development Essentials iPhone iOS 6 Development Essentials CentOS 6 Essent ...