详解如何创建并发布一个 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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家分享一篇vue 实现复制内容到粘贴板clipboard的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
elementUI使用el-upload上传文件写法及避坑总结(上传图片/视频到本地/服务器及回显+删除)
upload上传是前端开发很常用的一个功能,下面这篇文章主要给大家介绍了关于elementUI使用el-upload上传文件写法及避坑的相关资料,包括上传图片/视频到本地/服务器及回显+删除,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vue+Canvas绘图的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue中子组件调用兄弟组件方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
本篇文章主要介绍了浅谈webpack编译vue项目生成的代码探索，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
Vue3+vantUI3时间组件封装过程支持选择年以及年月日时分秒
这篇文章主要介绍了Vue3+vantUI3时间组件封装过程支持选择年以及年月日时分秒,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要介绍了vue3之声明式和编程式导航,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
今天小编就为大家分享一篇vue动态设置img的src路径实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue3.0运行npm run dev报错Cannot find module&
本文主要介绍了vue3.0运行npm run dev报错Cannot find module node:url,因为使用的node版本是14.15.1低于15.0.0导致,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了vue全局组件和局部组件的写法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论