详解如何创建并发布一个 vue 组件

步骤

创建 vue 的脚手架

npm install -g @vue/cli
vue init webpack

绑定 git 项目

cd existing_folder
git init
git remote add origin http://gitlab.alipay-inc.com/ampg/my-projec.git
git add .
git commit
git push -u origin master

写组件

创建组件 src/components/xxx.vue

例如：

<template>
 <div class="hello">
  <h1>{{ msg }}</h1>
  <h2>Essential Links</h2>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
</style>

发布

npm publish

展示

代码参考
vue-component-popup

参考文档
Packaging Vue Components for npm
Vue CLI 3
vue-sfc-rollup

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue组件库发布到npm详解

    制作了一套自己的组件库,并发布到npm上,项目代码见https://github.com/hamger/hg-vcomponents 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd hg-vcomponents cnpm install 目录结构 - vue-flag-list + build + dist // 存放发布到npm的代码 - src - components // 存放组件源代码 和 README.

  • vue组件发布到npm简单步骤

    vue组件发布到npm简单步骤

    1.0 新建项目 1.1 初始化项目 输入npm init,之后需要填什么就写什么 新建src目录,并在src目录下新建alert.vue $ npm init $ mkdir src $ cd src $ touch alert.vue 最后的目录结构 1.2 修改入口文件 打开package.json,并修改 1.3 写组件内容 这个组件内容可以随便写,我们就先测试一下,我是这样写的 <template> <div class="alert"> <di

  • 自定义vue组件发布到npm的方法

    自定义vue组件发布到npm的方法

    本文介绍了自定义vue组件发布到npm的方法,分享给大家,具体如下: 为什么会有这个想法呢,主要是vue项目中自定义的组件在多个项目中使用.导致修改bug的时候,总是要在项目分支中修改,然后同步到主线上,这样容易导致分支修改后没有同步到主线,慢慢的就会导致组件版本不统一,而导致升级组件很繁琐,最后可能都要去维护多个组件的不同版本,这样不是我们想要的. 所以就打算将组件打包发布到npm上,每个项目中只需要在package.json中修改组件版本即可同步最新版本. 组件发布历程 1.开始对打包不是很

  • 详解如何创建并发布一个 vue 组件

    详解如何创建并发布一个 vue 组件

    步骤 创建 vue 的脚手架 npm install -g @vue/cli vue init webpack 绑定 git 项目 cd existing_folder git init git remote add origin http://gitlab.alipay-inc.com/ampg/my-projec.git git add . git commit git push -u origin master 写组件 创建组件 src/components/xxx.vue 例如: <te

  • 详解如何制作并发布一个vue的组件的npm包

    前提:1.会vue基础,以及vue的组件(官网:https://cn.vuejs.org/v2/guide/components.html)相关的基础. 因为本文主要是讲如何把一个vue组件做成npm包并发布. 分为2大步骤: 一.按照相应格式写我们的vue代码(就如同写一个jquery插件时.有其固定的格式一样). 二.发布到npm上的流程 一.书写一个vue组件 不用脚手架,我们自己从头开始做起,因为脚手架会附带很多没用的东西. 就做一个最简单的vue组件:就是传入用户名字,页面打印出'he

  • 详解基于vue-cli3快速发布一个fullpage组件

    详解基于vue-cli3快速发布一个fullpage组件

    前言 想必大家都看过fullpage.js--这是一款非常好用的翻页插件. 现在vue非常流行,大家想不想发布一个组件给别人使用呢? 这里我们基于vue-cli3快速搭建一个简单的fullpage组件给别人使用,当然你也可以做你感兴趣的组件发布给别人用~ GITHUB 链接 开始 准备 $ npm i -g @vue/cli #全局vue-cli3 通过查看vue-cli3官网了解,创建一个新的普通项目. 思考 一开始要想别人如何调用我们写的组件,通过挂载vue实例方法(this.$alert)

  • 从零开始在NPM上发布一个Vue组件的方法步骤

    从零开始在NPM上发布一个Vue组件的方法步骤

    TL;DR 本文细致讲解了在NPM上发布一个Vue组件的全过程,包括创建项目.编写组件.打包和发布四个环节. 创建项目 这里我们直接利用@vue/cli来生成项目.如果没有安装@vue/cli的话,可以使用以下方法进行安装: # 如果喜欢npm npm i -g @vue/cli # 如果喜欢yarn yarn global add @vue/cli 此外,如果安装了npx(高版本的nodejs发行版会自带这一工具)的话,还可以很方便地通过npx vue这一方式实现免安装使用. 接下来就可以创建

  • 详解几十行代码实现一个vue的状态管理

    详解几十行代码实现一个vue的状态管理

    介绍 采用集中式存储管理应用的所有组件的状态, 就能实现组件间数据共享 实现 逻辑图 从图上有两条线: Vue.use(vuec), 与 new Vuec.center(options) 第一条线Vue.use(vuec)安装插件 使用Vue.use(vuec)时, 会执行vuec的install方法,会注入参数Vue 所以vuec是这样的, // index.js import {Center, install} from './center' export default {Center,

  • 详解如何创建一个.NET Core工程

    详解如何创建一个.NET Core工程

    1.打开VS2019,点击“创建新项目”,选择“ASP.NET Core Web应用”,设置路径和文件名,选择目标框架(.net core3.1长期支持),配置HTTPS(选勾),点击“创建”,自此就创建了一个.net core工程. 2.工程目录和文件介绍 Properties—>launchSettings.json :项目配置文件 appsettings.json:应用配置文件,类似web.config wwwroot:内容目录,存放静态文件 Program.cs:控制台应用 Startu

  • 详解ftp创建文件权限问题

    详解ftp创建文件权限问题

    详解ftp创建文件权限问题 一.问题 有一个这样的需求,admin为一个Linux为其FTP应用创建的一个有权限限制的用户,通过admin用户可以进行登录FTP服务,登录FTP服务后,创建文件夹,该文件夹的用户和用户组都是admin,属性为755,即只有admin用户才有写的权限,但是,FTP后台是通过b用户登录linux系统执行程序上传文件到FTP服务器,由于FTP服务器的文件夹都是由admin用户创建的,且属性为755,b用户根本没有写的权限,导致程序上传文件失败. 二.分析 那么解决问题的

  • 详解使用webpack打包编写一个vue-toast插件

    本文介绍了使用webpack打包编写一个vue插件,分享给大家.具体如下: 一.说明: 需求:创建一个toast插件 思路:利用vue组件创建模板,使用webpack打包生成插件再全局使用. # 项目目录: |_ package.json |_ webpack.config.js |_ .babelrc |_ dist |_ src |_ index.html |_ lib |_ index.js |_ vue-toast.vue 1.1 webpack基础 1.基础插件 - html-webp

  • 详解Go 创建命令行工具的方法

    详解Go 创建命令行工具的方法

    前言 最近因为项目需要写了一段时间的 Go ,相对于 Java 来说语法简单同时又有着一些 Python 之类的语法糖,让人大呼"真香". 但现阶段相对来说还是 Python 写的多一些,偶尔还得回炉写点 Java :自然对 Go 也谈不上多熟悉. 于是便利用周末时间自己做个小项目来加深一些使用经验.于是我便想到了之前利用 Java 写的一个博客小工具. 那段时间正值微博图床大量图片禁止外链,导致许多个人博客中的图片都不能查看.这个工具可以将文章中的图片备份到本地,还能将图片直接替换到

  • 详解如何创建Python元类

    详解如何创建Python元类

    什么是Python元类? Python元类是与Python的面向对象编程概念相关的高级功能之一.它确定类的行为,并进一步帮助其修改. 用Python创建的每个类都有一个基础的Metaclass.因此,在创建类时,您将间接使用元类.它隐式发生,您无需指定任何内容. 与元编程相关联的元类决定了程序对其自身进行操作的能力. 学习元类可能看起来很复杂,但是让我们先从一些类和对象的概念入手,以便于理解. Python中的类和对象 类是一个蓝图,是具有对象的逻辑实体. 一个简单的类在声明时没有分配任何内存,

随机推荐