从零撸一个pc端vue的ui组件库( 计数器组件 )

下面详细讲解从零撸一个 PC 端 Vue 的 UI 组件库（计数器组件）的完整攻略，包括如下步骤：

1. 创建项目

首先需要在本地创建一个 Vue 项目，执行以下命令：

vue create my-component-library

项目创建完成后，进入项目目录并运行：

cd my-component-library
npm run serve

浏览器中打开 http://localhost:8080 即可看到项目运行状态。

2. 创建组件

在 src/components 目录下创建一个名为 Counter.vue 的组件文件，代码如下：

<template>
  <div class="counter">
    <button @click="decrease">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" ><path d="M19 13H5v-2h14v2z"/></svg>
    </button>
    <div>{{ count }}</div>
    <button @click="increase">
      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px"><path d="M19 13H5v-2h14v2z"/></svg>
    </button>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increase() {
      this.count++
    },
    decrease() {
      this.count--
    }
  }
}
</script>

<style scoped>
.counter {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 20px;

  button {
    padding: 6px;
    border-radius: 4px;
    background-color: #eee;
    border: none;

    &:focus {
      outline: none;
    }

    svg {
      fill: #333;
    }
  }

  div {
    display: inline-block;
    margin: 0 8px;
    color: #333;
  }
}
</style>

3. 导出组件

在 src/index.js 中导出组件，代码如下：

import Counter from './components/Counter.vue'

export {
  Counter
}

4. 构建打包

在 package.json 文件中添加以下内容：

"scripts": {
    "build": "vue-cli-service build --target lib --name my-component-library src/index.js"
}

终端中运行以下命令进行打包：

npm run build

打包完成后，dist 目录下会生成一个 my-component-library.js 文件，即为打包后的组件库。

5. 使用组件

可以将打包好的组件库通过 npm 发布到 npmjs.com 后，在需要使用此组件库的项目中运行以下命令进行安装：

npm install my-component-library --save

在项目代码中使用 Counter 组件，代码如下：

<template>
  <div>
    <counter></counter>
  </div>
</template>

<script>
import { Counter } from 'my-component-library'

export default {
  name: 'App',
  components: {
    Counter
  }
}
</script>

以上就是从零撸一个 PC 端 Vue 的 UI 组件库（计数器组件）的完整攻略。示例代码中涵盖了组件的创建、导出、打包以及使用等多个环节，可供参考实践。