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

译者按: 你可能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哦!

原文地址:https://www.cnblogs.com/fundebug/p/9154751.html

时间: 2024-10-27 11:49:04

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

Configuration Reference In Vue CLI 3.0

Configuration Reference This project is sponsored by  #Global CLI Config Some global configurations for @vue/cli, such as your preferred package manager and your locally saved presets, are stored in a JSON file named .vuerc in your home directory. Yo

vue/cli 3.0 脚手架【进阶】

安装vue-cli3   npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目 基于vue-cli配置移动端自适应 转自:http://hjingren.cn/2017/06/16/%E5%9F%BA%E4%BA%8Evue-cli%E9%85%8D%E7%BD%AE%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%87%AA%E9%80%82%E5%BA%94/ 配置 flexible 安装 lib-flexible  

VUE CLI 3.0 移除严格模式

在vue 项目使用严格开发时,引用一些不规范的js时会报 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them 方案一:如果需要全部移除则使用 npm i babel-plugin-transform-remove-strict-mode -D

vue cli 解决跨域 线上 nginx 反向代理配置

前后分离 axios 接 api 跨域问题如图: 解决办法: 1. npm start 本地开发环境解决: 在webpack配置文件 /config/index.js 里找到 proxyTable 开启代理 changeOrigin:true, proxyTable: { '/api':{ target:'http://xx.xx.xx.xx:5568', changeOrigin:true, pathRewrite:{ '^/api':'/api' } } }, 2. npm run buil

vue不是内部命令、安装@vue/cli失败、找不到vue.cmd文件等问题的解决方法

最近打算用vue-cli写项目,发现用官网提供的安装方式npm install @vue/cli -g怎么都安装不上,一直报如下错误 EPERM: operation not permitted, rename 'C:\Users\xxx\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\abbrev\package.json.352729074' -> 'C:\Users\xxx\AppData\Roaming\npm\node_mo

Vue CLI 3搭建vue+vuex 最全分析

一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue serve .vue ui 等命令) CLI 服务:@vue/cli-service是一个开发环境依赖.构建于 webpack 和 webpack-dev-server 之上(提供 如:serve.build 和 inspect 命令) CLI 插件:给Vue 项目提供可选功能的 npm 包 (如

【Vue CLI】从安装到构建项目再到目录结构的说明 &#196968;

目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 原文: http://blog.gqylpy.com/gqy/284 "Vue CLI是一个基于Vue.js进行快速开发的完整系统. Vue CLI致力于将Vue生态中的工具基础标准化.它确保了各种构建工具只需给予智能的默认配置便可平稳衔接. 这样我们就可以专注在撰写应用上,而不必花好几天去纠结配置的问题.于此同时,它还为每个工具提供了调整配置的灵活性.

创建一个自己的Vue UI组件库,并将它发布在npm上

本文仅限于入门级,没有成规模制作,希望能对你有所帮助. 因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新. 前期准备 初始化project 这里我们使用vue-cli来初始化一个vue项目. npm install -g @vue/cli or yarn global add @vue/cli vue create personal-component-set 首先我们来开发一个可复用的顶栏控件,这里

使用CLI 3 创建发布Web Components

本文翻译自:codementor 翻译不当之处,欢迎指正交流 Web Components是web平台的未来吗?关于这一问题支持和反对的观点有很多.事实上浏览器对Web Components的支持正在逐渐形成,并有越来越多的工具.资源和IT从业人员正在致力于创建发布自己的Web Components. Vue.js是一个创建Web Components的很好的工具,在更新的Vue CLI 3和@vue/web-component-wrapper中甚至更加简单.这篇文章中,我们会讨论为什么你需要创