贡献你的力量开发一个Vue组件并发布到npm

melody_lql 发布于2019-08-23 13:48 / 438人阅读

摘要：注意可能会出现重名情况，这时候请使用你账户的命名空间修改你的别人引入的时候也要加命名空间最后还是留点私心，宣传一下最近写的一个滚动组件，主要面向端，如果你有类似的需求不妨看看

最近在工作中写了一个面向 PC 端的 Vue 滚动组件，关于 PC 端的滚动组件以前也用过一些，但是没有找到特别满意的，所以自己想着把这个组件开源发布出去，希望能够帮到和我有类似需求的人吧！

目标

拥有 Dev 模式，能够边测试边开发组件

构建完成后发布到 npm 上

这个组件能够全局注册也能够局部使用

拥有 demo 能力依靠于 github 的 pages 功能直接展现该组件的使用效果

构建基本模版

首先我们需要 vue-cli 来为我们生成一个项目的初始模板。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue init webpack-simple

cd project-name
npm init
git init

npm init 和 git init的过程就略过了

修改目录

接下来在src/目录下创建一个 components 目录，随后在 components 目录下建立你的组件，比如scrollbars.vue

继续在src/下创建index.js 这个 js 将会在 build 模式下作为入口 js 进行打包,如果你要导出多个组件也是可以的，只要导出一个对象即可

import Scrollbars from "./components/scrollbars.vue"

Scrollbars.install = Vue => Vue.component(Scrollbars.name, Scrollbars)

export default Scrollbars

配置打包环境

为了方便我们的开发，需要配置一下 webpack 的打包配置。

首先在 package.json 里增加一条脚本 dmeo 该命令的作用是一键打包出一个用于 demo 页面的主 js 文件

"demo": "cross-env NODE_ENV=demo webpack --progress --hide-modules"

接下来就是比较核心的 webpack 配置

const NODE_ENV = process.env.NODE_ENV

// 为了方便在不同模式下的路径配置，我们配置三个map对象来匹配具体的模式，减少复杂的判断
// 三种基本模式
// 1 build - production 用于打包核心组件代码 别人引入的就是这个文件
// 2 dev - development 开发模式 调试你的组件
// 3 demo - 打包demo资源 打出来的js是包含完整的vue源码的

const enteyMap = {
  production: "./src/index.js",
  development: "./src/main.js",
  demo: "./src/main.js"
}

const pathMap = {
  production: "./dist",
  development: "./demo",
  demo: "./demo"
}

const publicMap = {
  production: "/dist/",
  development: "/demo/",
  demo: "/demo/"
}

module.exports = {
  entry: enteyMap[NODE_ENV], // 引入路径 build模式下直接引入组件自身
  output: {
    path: path.resolve(__dirname, pathMap[NODE_ENV]), // 输出路径
    publicPath: publicMap[NODE_ENV], // 资源引入路径 为了方便我们的demo打包 开发模式和demo模式相同
    filename: "vue-scrollbars.js", // 你的组件名称
    library: "vue-scrollbars", // 填写组件名称即可 人家可以通过这个名称来引入
    libraryTarget: "umd",
    umdNamedDefine: true
  }
}

进行开发

由于我们修改了 publicPath 我们需要修改一下index.html的 js 路径

npm run dev

开始开发吧，尽情的在app.vue中引入你的组件并进行调试开发

创建demo

npm run demo

打包完成后你可以尝试在工程根目录运行http-server来检查demo能否正常运行。

到这一步你可以push到你的github仓库，并把gh-pages设置成master分支，那个地址应该就能展示你的demo了，别忘了放到readme中让大家看看哦！

发布

在最后的发布前记得在package.json里面填写上版本，关键词，描述，license等信息，并且写好README.md,LICENSE等文件. 这样可以更好的让别人了解和使用你的项目哦。

npm login
npm publish

注意可能会出现重名情况，这时候请使用你账户的命名空间

修改你的 package.json "name": "@zhangzhengyi12/vue-scrollbars" 别人引入的时候也要
加命名空间

最后还是留点私心，宣传一下最近写的一个滚动组件，主要面向 PC 端，如果你有类似的需求不妨看看[https://github.com/zhangzheng...]

混合云私有云 vue组件开发 vue组件 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99594.html

Vue 2019开发者图谱

摘要：为了便于您更清晰的理解的体系架构，在这里我将为您展示年开发者知识图谱，它包含了所有开发过程中的关键部分。在数据展示前端导入导出图表面板数据绑定等场景无需大量代码开发和测试，可极大节省企业研发成本并降低交付风险。作为 Vue 的初学者，您或许已经听过很多关于它的专业术语了，例如：单页面应用程序、异步组件、服务器端呈现等，您可能还听过和Vue经常一起被提到的工具和库，如Vuex、Webp...

cgspine 2019-08-23 18:14 评论0 收藏0
网易严选App感受Weex开发（已完结）

摘要：如果你尚不了解，并想简单入门，可以阅读整理快速入门笔记网易严选感受开发什么都不说，先给你感受下的效果。此处对寄有厚望单位中的所有属性值的单位均为，也可省略不写，系统会默认为单位。 showImg(https://segmentfault.com/img/remote/1460000012869672); 自打出生的那一天起，Weex 就免不了被拿来同 React Native「一决高下...

jaysun 2019-06-25 11:33 评论0 收藏0
Vue高效UI组件库—iView开发实践

摘要：它的文档也是相当详细，每个功能都配有详细说明和实例代码，直接复制就可以使用，我们也计划在明年启动英文文档翻译计划。明年会启动英文文档翻译计划，也希望喜欢和支持，同时英语不错的同学可以加入我们，一起参与翻译。前段时间在微软参加活动，分享了 TalkingData 开源的基于 Vue.js 的高效 UI 组件库 iView 的一些开发经验，现整理成文，和大家探讨。 showImg(htt...

wean 2019-08-21 14:43 评论0 收藏0
EggBorn.js：一款顶级Javascript全栈开发框架

摘要：是什么是一款顶级全栈开发框架。渐进式开发由于模块的高度内聚，可以将业务以模块的形式沉淀，在多个项目中重复使用，既可贡献到开源社区，也可部署到公司内部私有仓库。模块发布当项目中的模块代码稳定后，可以将模块公开发布，贡献到开源社区。 EggBorn.js是什么 EggBorn.js是一款顶级Javascript全栈开发框架。 EggBorn.js是采用Javascript进行全栈开发的最佳...

dayday_up 2019-08-21 17:17 评论0 收藏0
vue.js使用vue-cli搭建一个SPA项目

摘要：之所以写这篇如何运用脚手架自动化构建出一个项目的大架构，主要是面向想入门的小伙伴。之前，我第一次接触，一直摸不着头脑，想在网上搜个接地气的教程都找不到。 WHY 之所以写这篇如何运用脚手架自动化构建出一个项目的大架构，主要是面向想入门vue的小伙伴。之前，我第一次接触vue，一直摸不着头脑，想在网上搜个接地气的教程都找不到。SO，我以如何搭建结构为开始，向想入门vue的童鞋们把我仅有的...

CrazyCodes 2019-08-20 17:31 评论0 收藏0