IT学习网是免费的终身在线学习平台,现在主要提供IT(互联网)方面的教程,博客等方面的内容
主页 > 前端 > > 正文

如何学习电脑编程创建一个自己的Vue UI组件库,并将它发布在npm上

来源:IT学习网整理 发布时间:2020-02-14 18:53 标签:一个创建发布自己的组件将它
浏览:
本文仅限于入门级,没有成规模制作,希望能对你有所帮助如何学习电脑编程。因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新如何学习电脑编程。"/>创建一个自己的Vue UI组件库,并将它发布在npm上

前端开发前端导航工具/手册更多栏目

折扣返利

网站投稿

书籍/周边

站内搜索

fly63前端网

提交

我要投稿

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

时间: 2019-08-08阅读: 144标签: npm

本文仅限于入门级,没有成规模制作,希望能对你有所帮助。因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新。


前期准备初始化project

这里我们使用vue-cli来初始化一个vue项目。

npm install -g @vue/cli or yarn global add @vue/cli

vue create personal-component-set

首先我们来开发一个可复用的顶栏控件,这里是用vuetifyUI库进行第二次开发。

npm install vuetify or yarn add vuetify

顶栏控件代码:

src/components/TopBar.vue

<template> <v-toolbar> <!-- 这里v开头的使用的是第三方ui组件库 --> <v-toolbar-side-icon @click="toMainPage()"></v-toolbar-side-icon> <v-toolbar-title>{{title}}</v-toolbar-title> <v-spacer></v-spacer> <v-toolbar-items> <v-btn flat @click="openMyGithub()"> <v-avatar size=42> <img src="http://avatars3.githubusercontent.com/u/10973821?s=460&v=4"> </v-avatar> <span>About me: ssthouse</span> </v-btn> <v-tooltip bottom> <v-btn slot="activator" flat :href="sourceCodeLink"> <v-avatar size=42> <img src="http://www.fly63.com/article/detial/assets/logo.png"> </v-avatar> Source Code </v-btn> <span>Welcome to fork & star <br/> ; )</span> </v-tooltip> </v-toolbar-items> </v-toolbar> </template> <script> export default { // 接受被组件化后传递的自定义属性 // 源代码连接 props: ['sourceCodeLink', 'title'], methods: { openMyGithub() { // 自定义头像被点击的时候创建a标签并且跳转 const a = document.createElement('a') a.target = '_blank' a.href = 'https://github.com/mufengsm' a.click() }, toMainPage() { this.$emit('to-main-page') } } } </script> <style scoped> .top-bar-tooltip { font-size: 18px; } a { color: black; } </style>


配置project

下面我们配置当前项目,让它可以发布在npm上

首先我们编辑入口文件 src/components/index.js, 使其被作为 UI 库导入时能自动在Vue中注册我们的 Component:

import Vue from 'vue' import TopBar from './TopBar.vue' const Components = { TopBar } Object.keys(Components).forEach(name => { Vue.component(name, Components[name]) }) export default Components

接下来我们添加 build 项目的脚本到 package.json 的 scripts 中:

"scripts": { "build-bundle": "vue-cli-service build --target lib --name personal-component-set ./src/components/index.js", },

命令解释:--target打包为lib仓库构建,--name项目名称为personal-component-set,入口文件为./src/components/index.js

运行命令后就可以在dist文件夹中看到打包后的文件了,这里我们选择默认发布我们的 **.common.js* 文件, 所以我们在 package.json中添加main属性。

指定该属性后, 当我们引用该组件库时, 会默认加载 main 中指定的文件。

"main": "./dist/personal-component-set.common.js",

最后, 我们再配置 package.json中的 files属性, 来配置我们想要发布到 npm 上的文件有哪些。

"files": [ "dist/*", "src/*", "public/*", "*.json", "*.js" ],


npm 发布

首先去npm官网注册一个账号记得去查看邮箱邮件来认证邮箱,要不然会上传会不成功。

然后在项目中打开命令行工具npm adduser or npm login输入你注册的用户名密码和邮箱,可以使用npm whoami查看登录状态。

在发布之前, 我们修改一下项目的名称(注意不要和npm已有项目名称冲突,可以先去npm搜索一下), 推荐使用 @你注册npm的用户名/项目名称 的命名方式。

接下来我们就可以发布我们的 UI 组件库了, 在发布之前我们再编译一次, 让build出的文件为我们最新的修改:

npm run build-bundle

我们使用下面的命令发布我们的项目:

npm publish --access public

热门文章

  • C++构造函数初始化列表
    C++构造函数初始化列表

    C++构造函数初始化列表

    构造函数的一项重要功能是对成员变量进行初始化,为了达到这个目的,可以在构造函数的函数体中对成员变量一一赋值,还可以采用 初始化列表 。 C +...

  • 抢占超声医学影像产业学习it的网站C位
    抢占超声医学影像产业学习it的网站C位

    抢占超声医学影像产业学习it的网站C位

    随着全球AI人工智能技术的快速发展与应用 全球医疗领域的智能化 科技化成为大势所趋 据相关资料数据统计 2016年全...

  • “编程从娃娃抓起”:逃得过“奥数” 又
    “编程从娃娃抓起”:逃得过“奥数” 又

    “编程从娃娃抓起”:逃得过“奥数” 又

    您所在的位置: 杭州网 > 新闻中心 > 国内新闻 “编程从娃娃抓起”:逃得过“奥数” 又要被编程套住 2019-03-22 09:18:07;杭州网 新华网 少儿编程火了,打开手机...

  • coreldraw教程网Photoshop iPad完整版本正式上
    coreldraw教程网Photoshop iPad完整版本正式上

    coreldraw教程网Photoshop iPad完整版本正式上

    Photoshop iPad完整版本正式上架苹果App Store...

  • 51自学网ps视频教程走在时尚前端的猎豹
    51自学网ps视频教程走在时尚前端的猎豹

    51自学网ps视频教程走在时尚前端的猎豹

    当消费者发现汽车一味的“大”并不能完全解决出行需求,反而影响了在城市中穿梭的便捷性之后,更加贴合年轻人...

后端

更多 >
后端趣味编程unzip命令 传zip到linux并解压
后端计算机程序设计设置FTP传输软件xftp默认打
后端计算机编程语言有哪些Java实现Linux grep命
后端趣味编程linux安装mysql5.7
后端儿童编程学习linux入门系列8--shell编程入门

工具资源

更多 >