Vue开发组件库

1、创建项目

npm install -g @vue/cli
vue create 项目名

针对于vue脚手架生成的项目需要做出一些调整

• 将src重命名为examples（防止第三方开发者产生的歧义）

• 添加examples同级目录packages（用来存放我们的自定义组件）

• 修改vue.config.js配置（修改入口文件为examples下的main.js，并将packages加入打包编译任务中）

  module.exports = {
    pages: {
      index: {
        entry: 'examples/main.js',
        template: 'public/index.html',
        filename: 'index.html'
      }
    },
    // 扩展 webpack 配置，使 packages 加入编译
    chainWebpack: config => {
      config.module
        .rule('js')
        .include
          .add('/packages')
          .end()
        .use('babel')
          .loader('babel-loader')
    }
  }
  

项目目录结构如下

2、创建&编写组件

• 在packages下创建组件，这里创建Button

• Button文件夹下创建src（组件放置位置）

• Button文件夹下创建index.js（组件的注册）

  import Button from './src'
  
  // 为组件提供 install 安装方法，供按需引入
  Button.install = function (Vue) {
    Vue.component(Button.name, Button)
  }
  
  // 导出组件
  export default Button
  

• src下创建index.vue

  <template>
    <div class="button">
      <slot></slot>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Button',
    props: {
      type: String
    }
  }
  </script>
  
  <style scoped>
  .button {
    width: 100px;
    border: 1px solid #000;
    padding: .5rem;
    margin: 0 auto;
  }
  
  .button:hover {
    color: aliceblue;
    background-color: #000000;
  }
  </style>
  
  

组件目录结构如下

3、组件统一注册

examples下新建index.js

// 导入button组件
import Button from './Button'

// 组件列表
const components = [
  Button
]

// 定义 install 方法，接收 Vue 作为参数（使用 use 注册插件，那么所有的组件都会被注册）
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  Button
}

4、测试组件

在main.js中添加组件库并使用

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 导入组件库
import myui from '../packages'

createApp(App).use(myui).use(store).use(router).mount('#app')

在app.vue中使用

<template>
  <nav>
    <router-link to="/">Home</router-link>
    |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
  <Button>button</Button>
</template>

<script>

</script>
<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

5、发布到npm

添加打包packages脚本

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name xui --dest lib packages/index.js"
}

构建

npm run lib

.npmignore

examples/
node_modules/
packages/
public/

.browserslistrc
.editorconfig
lint-staged.config.js
package-lock.json
plan.md

上传（更多转至https://blog.csdn.net/gyfghh/article/details/129212980）

npm publish