# vuecomponentdi

> > 生成package.json如下,注意如果要发布到npm,name不能有下划线,大写字母等

Latest version **1.0.0** (published 2022-01-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install vuecomponentdi
pnpm add vuecomponentdi
yarn add vuecomponentdi
bun add vuecomponentdi
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-01-12 |
| First published | 2022-01-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mrdistore |

## Links

- npm: https://www.npmjs.com/package/vuecomponentdi
- npm.io page: https://npm.io/package/vuecomponentdi

## Recent versions

- 1.0.0 (latest) — 2022-01-12

## README

## 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"
```
<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>
```
控制台打印>本地调试

## 开发一个button组件
* button模块:进入vueComponentDi/packages/button/index.vue
> type只支持传入primary属性,v-on="$listeners"表示包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 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>
```
* button模块导出:进入vueComponentDi/packages/button/index.js
> 如果导出一个带有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
```

* 聚合导出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官网](https://www.npmjs.com/) 注册

---
_Source: https://npm.io/package/vuecomponentdi · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._