Wie erstelle ich eine Vue-Komponentenbibliothek von Grund auf und veröffentliche sie auf npm? Der folgende Artikel führt Sie Schritt für Schritt durch die Entwicklung einer Vue-Komponentenbibliothek von Grund auf und zeigt, wie Sie sie auf npm veröffentlichen. Ich hoffe, er wird Ihnen hilfreich sein.
1. Öffnen Sie den neuen Ordner im Terminal und führen Sie npm init -y
aus, um package.json wie folgt zu generieren. Beachten Sie, dass der Name keine Unterstreichungen und Großbuchstaben enthalten darf usw.
{
"name": "vuecomponentdi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}2 , Richten Sie die Verzeichnisstruktur ein
Die Verzeichnisstruktur ist wie folgt
-- vueComponentDi
-- packages
-- button
-- index.js
-- index.vue
-- toast
-- index.js
-- index.vue
-- index.js
-- package.json3. Lokales Debuggen
export default function(){
console.log('本地调试')
}vue create testvue
WERT Testvue Die Testabhängigkeiten unter package.json die absolute Adresse von VueComponentdi/Index.js
"devDependencies": {
...
"vuecomponentdi": "F:/vueComponent@Di/vueComponentDi",//根据自己实际项目地址填写
...
}execute NPM Link in Testvue zu Soft Link hinzufügen vuecomponentdi zu node_modules
Da testvue Komponenten einführt, wird die Eslint-Erkennung durchgeführt und ein Fehler gemeldet, wenn sie nicht installiert ist (testvue schließt Eslint, um diesen Schritt auszulassen)
Installationsmethode :
npm install eslint@6.7.2 --save-dev ./node_modules/.bin/eslint --init
Test von „vuecomponentdi“ importieren
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import test from "vuecomponentdi"
export default {
name: 'Home',
components: {
HelloWorld
},
created(){
test()
}
}
</script>Konsolendruck>Lokales Debuggen
4. Entwickeln Sie eine Schaltflächenkomponente
type只支持传入primary属性,v-on="listeners" 传入内部组件
<template>
<div>
<button class="di-button" v-on="$listeners" :class="[type?`di-button--${type}`:'']"><slot></slot></button>
</div>
</template>
<script>
export default {
name:"di-button",
props:{
type:String
}
}
</script>
<style>
.di-button{
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
.di-button:focus, .di-button:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}
.di-button:active {
color: #3a8ee6;
border-color: #3a8ee6;
outline: none;
}
.di-button--primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
.di-button--primary:focus, .di-button--primary:hover {
background: #66b1ff;
border-color: #66b1ff;
color: #fff;
}
.di-button--primary.is-active, .di-button--primary:active {
background: #3a8ee6;
border-color: #3a8ee6;
color: #fff;
}
</style>如果导出一个带有install函数的对象,则在Vue2中可以直接使用Vue.use(xx)调用此函数,既执行 Vue.component(name,option)创建了一个组件
import button from "./index.vue"
button.install=(Vue)=>{
Vue.component(button.name,button)
}
export default button因为开发的组件不止一个,所以需要在入口文件统一导出
import diButton from "./packages/button"
export {
diButton
}<template>
<div class="home">
<di-button type="primary">按钮</di-button>
</div>
</template>
<script>
// @ is an alias to /src
import Vue from 'vue'
import {diButton} from "vuecomponentdi"
Vue.use(diButton)
export default {
name: 'Home'
}
</script>5、开发一个toast弹窗
type只支持warning和success
<template>
<div class="di-toast" :class="`di-toast--${type}`" v-if="show">
{{message}}
</div>
</template>
<script>
export default {
data(){
return {
message:'',
show:false,
type:''
}
}
}
</script>
<style>
.di-toast{
width: 60%;
width: 200px;
background: rgb(15, 15, 15);
padding:3px;
text-align: center;
color: #fff;
border-radius: 10px;
position: fixed;
left: calc(50% - 100px);
top: 200px;
}
.di-toast--warning{
background: #FDF6EC;
color: #E6A28B;
}
.di-toast--success{
background: #F0F9EB;
color: #93C26D;
}
</style>因为toast弹窗需要在vue中支持this.$toast调用,所以用了Vue.extend方法,这个 API 在日常开发中很少使用,一般在开发组件的时候它才能派上用场,官方定义:使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象
import toast from './index.vue'
toast.install = (Vue) => {
const toastConstructor = Vue.extend(toast);//使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
let $vm = new toastConstructor();//将这个子类实例化
let $el = $vm.$mount().$el;//$vm执行$mount()手动挂载会返回一个带有$el的对象,$el就是一个dom对象
document.querySelector("body").appendChild($el);//将这个dom对象添加到body中
//在Vue原型上注入$toast方法
Vue.prototype.$toast = (option) => {
$vm.show = true
if (!(option instanceof Object)) {
//如果传的不是对象直接弹出
$vm.message = option
} else {
$vm.message = option.message
$vm.type = option.type
}
setTimeout(() => {
$vm.show = false
}, 2000)
}
}
export default toastimport diButton from "./packages/button"
import toast from "./packages/toast"
export {
diButton,
toast
}<template>
<div class="home">
<di-button type="primary" @click="toast">按钮</di-button>
</div>
</template>
<script>
// @ is an alias to /src
import Vue from "vue";
import { diButton, toast } from "vuecomponentdi";
Vue.use(diButton);
Vue.use(toast);
export default {
name: "Home",
methods: {
toast() {
// this.toast("这是一个普通弹窗");
// this.$toast({
// message: "这是一个成功弹窗",
// type: "success",
// });
this.$toast({
message: "这是一个警告弹窗",
type: "warning",
});
},
},
};
</script>6、发布到npm
组件开发完成需要发布到npm以便于别人使用;因为发布的是公有包,所以需要在vueComponentDi/package.json中配置
"publishConfig": {
"access": "public"
},完整package.json:
{
"name": "vuecomponentdi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^6.7.2",
"eslint-plugin-vue": "^8.2.0"
},
"publishConfig": {
"access": "public"
}
}npm发布很简单,只需要两个命令:
npm login npm publish
执行npm login需要你有npm账号，可以到 npm官网 注册
npm官网地址：https://www.npmjs.com/
发布完成之后就可以在任何一个vue2项目中安装使用了:
npm install vuecomponentdi
git地址: vue组件开发（https://gitee.com/geeksdidi/vue-component-di）
【相关推荐：vue.js教程】
Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Vue-Komponentenbibliothek von Grund auf und veröffentlichen sie auf npm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
