详解如何创建并发布一个 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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
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详解
制作了一套自己的组件库,并发布到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的方法,分享给大家,具体如下: 为什么会有这个想法呢,主要是vue项目中自定义的组件在多个项目中使用.导致修改bug的时候,总是要在项目分支中修改,然后同步到主线上,这样容易导致分支修改后没有同步到主线,慢慢的就会导致组件版本不统一,而导致升级组件很繁琐,最后可能都要去维护多个组件的不同版本,这样不是我们想要的. 所以就打算将组件打包发布到npm上,每个项目中只需要在package.json中修改组件版本即可同步最新版本. 组件发布历程 1.开始对打包不是很
-
详解如何创建并发布一个 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组件
前言 想必大家都看过fullpage.js--这是一款非常好用的翻页插件. 现在vue非常流行,大家想不想发布一个组件给别人使用呢? 这里我们基于vue-cli3快速搭建一个简单的fullpage组件给别人使用,当然你也可以做你感兴趣的组件发布给别人用~ GITHUB 链接 开始 准备 $ npm i -g @vue/cli #全局vue-cli3 通过查看vue-cli3官网了解,创建一个新的普通项目. 思考 一开始要想别人如何调用我们写的组件,通过挂载vue实例方法(this.$alert)
-
从零开始在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.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工程
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创建文件权限问题 一.问题 有一个这样的需求,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 ,相对于 Java 来说语法简单同时又有着一些 Python 之类的语法糖,让人大呼"真香". 但现阶段相对来说还是 Python 写的多一些,偶尔还得回炉写点 Java :自然对 Go 也谈不上多熟悉. 于是便利用周末时间自己做个小项目来加深一些使用经验.于是我便想到了之前利用 Java 写的一个博客小工具. 那段时间正值微博图床大量图片禁止外链,导致许多个人博客中的图片都不能查看.这个工具可以将文章中的图片备份到本地,还能将图片直接替换到
-
详解如何创建Python元类
什么是Python元类? Python元类是与Python的面向对象编程概念相关的高级功能之一.它确定类的行为,并进一步帮助其修改. 用Python创建的每个类都有一个基础的Metaclass.因此,在创建类时,您将间接使用元类.它隐式发生,您无需指定任何内容. 与元编程相关联的元类决定了程序对其自身进行操作的能力. 学习元类可能看起来很复杂,但是让我们先从一些类和对象的概念入手,以便于理解. Python中的类和对象 类是一个蓝图,是具有对象的逻辑实体. 一个简单的类在声明时没有分配任何内存,
随机推荐
- Vue实现数字输入框中分割手机号码的示例
- 简单谈谈ES6的六个小特性
- java多线程编程之使用Synchronized块同步方法
- java代码实现截图功能(屏幕截图)
- 移动适配的几种方案(三种方案)
- PHP 和 MySQL 基础教程(四)
- 一个比较简单的PHP 分页分组类
- Android6.0指纹识别开发实例详解
- 选择器中含有空格在使用示例及注意事项
- 基于jQuery判断两个元素是否有重叠部分的代码
- 40款非常棒的jQuery 插件和制作教程(系列二)
- js获取当前路径的简单示例代码
- IE6下CSS图片缓存问题解决方法
- 浅谈Windows XP的注册表备份
- destoon找回管理员密码的方法
- PHP命名空间namespace的定义方法详解
- Android Studio设置主题与字体大小图文教程
- 谈谈正则表达式中的句号.
- php实现登录页面的简单实例
- vue element 生成无线级左侧菜单的实现代码