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

 更新时间:2018年11月08日 10:44:04   作者:wangfulin  
这篇文章主要介绍了详解如何创建并发布一个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

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

相关文章

  • 使用Vant完成DatetimePicker 日期的选择器操作

    使用Vant完成DatetimePicker 日期的选择器操作

    这篇文章主要介绍了使用Vant完成DatetimePicker 日期的选择器操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue配置请求本地json数据的方法

    vue配置请求本地json数据的方法

    这篇文章主要介绍了vue配置请求本地json数据的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Vue利用watch侦听器模拟实现翻译功能

    Vue利用watch侦听器模拟实现翻译功能

    本期将会介绍 Vue 中的 watch 侦听器,它语法是怎么样的呢?具有怎样的功能呢?最后用模拟实现百度翻译来更进一步练习 watch 侦听器,需要的朋友可以参考下
    2024-11-11
  • 如何巧用Vue缓存函数浅析

    如何巧用Vue缓存函数浅析

    有时候不希望已经请求过的数据,再次请求重复执行刷新操作,我们就需要使用数据缓存,这篇文章主要给大家介绍了关于如何巧用Vue缓存函数的相关资料,需要的朋友可以参考下
    2021-09-09
  • 浅谈VUE-CLI脚手架热更新太慢的原因和解决方法

    浅谈VUE-CLI脚手架热更新太慢的原因和解决方法

    今天小编就为大家分享一篇浅谈VUE-CLI脚手架热更新太慢的原因和解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue select change事件如何传递自定义参数

    vue select change事件如何传递自定义参数

    这篇文章主要介绍了vue select change事件如何传递自定义参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 浅谈vue.js中v-for循环渲染

    浅谈vue.js中v-for循环渲染

    本篇文章主要介绍了浅谈vue.js中v-for循环渲染,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 在vue中使用rules对表单字段进行验证方式

    在vue中使用rules对表单字段进行验证方式

    这篇文章主要介绍了在vue中使用rules对表单字段进行验证方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 一文搞懂Vue中computed和watch的区别

    一文搞懂Vue中computed和watch的区别

    这篇文章主要和大家详细介绍一下Vue中computed和watch的使用与区别,文中通过示例为大家进行了详细讲解,对Vue感兴趣的同学,可以学习一下
    2022-11-11
  • Vue3+Vite项目使用mockjs随机模拟数据

    Vue3+Vite项目使用mockjs随机模拟数据

    这篇文章主要介绍了Vue3+Vite项目使用mockjs随机模拟数据,需要的朋友可以参考下
    2023-01-01

最新评论