1.0.0 • Published 2 years ago
vuecomponentdi v1.0.0
1、新建文件夹在终端打开执行 npm init -y
生成package.json如下,注意如果要发布到npm,name不能有下划线,大写字母等
{
"name": "vuecomponentdi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
2、建立目录结构
目录结构如下
-- vueComponentDi -- packages -- button -- index.js -- index.vue -- toast -- index.js -- index.vue -- index.js -- package.json
## 本地调试
* vueComponentDi/index.js
export default function(){ console.log('本地调试') }
* 新建一个vue项目
vue create testvue
> 在testvue下的package.json下的测试依赖devDependencies添加vueComponentDi/index.js绝对地址
"devDependencies": { ... "vuecomponentdi": "F:/vueComponent@Di/vueComponentDi",//根据自己实际项目地址填写 ... }
* 执行npm link
> 在testvue执行npm link将vuecomponentdi软链接到node_modules中
* vuecomponentdi安装Eslint
> 由于testvue引入组件会进行Eslint检测,不安装会报错(testvue关闭Eslint可省略这一步)
安装方法:
npm install eslint@6.7.2 --save-dev ./node_modules/.bin/eslint --init
* 在testvue使用vuecomponentdi
> import test from "vuecomponentdi"
控制台打印>本地调试
## 开发一个button组件
* button模块:进入vueComponentDi/packages/button/index.vue
> type只支持传入primary属性,v-on="$listeners"表示包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
import button from "./index.vue"
button.install=(Vue)=>{
Vue.component(button.name,button)
}
export default button
- 聚合导出button:进入vueComponentDi/index.js
因为开发的组件不止一个,所以需要在入口文件统一导出
import diButton from "./packages/button"
export {
diButton
}
- 在testvue使用
<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>
开发一个toast弹窗
- toast模块:vueComponentDi/packages/toast/index.vue
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模块导出:vueComponentDi/packages/toast/index.js
因为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 toast
- 聚合导出:vueComponentDi/index.js
import diButton from "./packages/button"
import toast from "./packages/toast"
export {
diButton,
toast
}
- vuetest中使用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>
发布到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官网 注册
1.0.0
2 years ago