欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2021-05-15 09:05:00|栏目: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的安装和配合引入Vue.js项目里的方法步骤

栏    目:vue

下一篇:VUE实现日历组件功能

本文标题:详解如何创建并发布一个 vue 组件

本文地址:http://www.codeinn.net/misctech/121723.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有