vue组件库开发上传npm

绝地灬酷狼 2022-09-11 06:15 220阅读 0赞

### 1.先构建vue项目 ###

##### 运行vue-cli #####

> vue create vui

##### 将src重命名为examples, 并添加packages目录,用来存放自定义组件 #####

![请添加图片描述][a5c5a5a0386345fca60f1b8359dc4b55.png]

##### 但是cli默认会启动src下的服务,如果目录名变了,需要手动修改配置,自定义打包配置项目的文件,只需要手动创建vue.config.js即可.具体修改如下: #####

module.exports = { 
      publicPath: "./",
      assetsDir: "static",
      productionSourceMap: false,
      pages: { 
        index: { 
        // 首先修改入口文件地址为examples下的main.js,其次将packages加入打包编译任务中
          entry: "examples/main.js",
          template: "public/index.html",
          filename: "index.html",
        },
      },
      devServer: { 
        open: true,
        port: 8080,
      },
      chainWebpack: (config) => { 
        config.module
          .rule("js")
          .include.add("/packages")
          .end()
          .use("babel")
          .loader("babel-loader");
      },
    };

### 2. 编写组件代码 ###

##### 用一个Button组件来示范，首先在packages目录下新建一个Button目录，Button的组件结构如下： #####

![请添加图片描述][e702ac7bedec4c98b17144ecd1180fb1.png]

#### 然后src/index.vue里存放组件的源代码： ####

<template>
      <div class="x-button">
        <slot></slot>
      </div>
    </template>
    <script>
    export default { 
      name: "x-button",
      props: { 
        type: String,
      },
    };
    </script>
    
    <style scoped>
    .x-button { 
      display: inline-block;
      padding: 3px 6px;
      background: #000;
      color: #fff;
    }
    </style>

##### 在Button的index.js里编写如下代码来作为vue的组件安装： #####

// 导入组件，组件必须声明 name
    import XButton from "./src";
    // 为组件提供 install 安装方法，供按需引入
    XButton.install = function (Vue) { 
      Vue.component(XButton.name, XButton);
    };
    // 导出组件
    export default XButton;

##### 接下来我们在packages的入口文件(index.js)中导入组件并安装导出： #####

// 导入button组件
    import XButton from './Button'
     
    // 组件列表
    const components = [
      XButton
    ]
     
    // 定义 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,
      // 以下是具体的组件列表
      XButton
    }

### 3.测试代码 ###

##### 要想看到自己写的组件效果，可以将组件导入到examples目录下的main.js中，其本质就是一个项目的开发目录，只需要按照如下方式导入即可： #####

// examples/main.js
    import Vue from 'vue'
    import App from './App.vue'
     
    // 导入组件库
    import xui from '../packages'
    // 注册组件库
    Vue.use(xui)
     
    Vue.config.productionTip = false
     
    new Vue({ 
      render: h => h(App),
    }).$mount('#app')

##### 在项目中使用组件: #####

<template>
      <div id="app">
        <x-button type="primary">button</x-button>
      </div>
    </template>
    <script>
    export default { 
      name: 'App',
      components: { }
    }
    </script>
    <style>
    #app { 
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    </style>

### 4.配置package.json文件 ###

##### 作为一个组件库,我们必须按照npm的发包规则来编写我们的package.json, 我们先来解决组件库打包的问题,首先我们需要让脚手架编译我们的组件代码,并输出到指定目录下,我们按照发包规范一般会输出到lib目录下,代码如下: #####

{ 
      "name": "@qq9068149/as-ui",  //包名
      "version": "0.1.02", //版本号
      "description": "测试组件库", //介绍
      "author": "AS", //作者
      "main": "lib/xui.umd.min.js", //入口js
      "license": "ISC", //许可证
      "files": [    "lib",    "packages"  ], //上传的文件
      "scripts": { 
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "lib": "vue-cli-service build --target lib --name xui --dest lib packages/index.js"
      },
    }

##### lib脚本就是用来打包packages的组件代码到lib目录下,文件名为以–name指定的名称前缀开头,我们执行脚本会输出类似如下代码: #####

![请添加图片描述][b6ca531076ff4fe8b4974e0ceeaa7b8c.png]

### 5.发布到npm ###

// 打包lib脚本
    npm run lid
    
    // 登录npm账户
    npm login
    
    // 发布
    npm publish
    
    // 如果发布失败提示权限问题,请执行以下命令
    npm publish --access public

##### 上传成功后可到npm官网查看到 #####

### 6.其他项目使用 ###

##### 通过npm install xxx 安装组件库 #####

##### main.js中引入组件 #####

// xxx 是npm包名
    import ASui from "xxx";
    import 'xxx/lib/xui.css'
    Vue.use(ASui);

##### import ‘xxx/lib/xui.css’ 里的 xui.css是来自上传组件时的lib里的.css #####

![请添加图片描述][83158635263b4de3b67ef31ffd780f8e.png]

##### 页面中直接使用组件标签即可： #####

<x-button type="primary">button</x-button>

[a5c5a5a0386345fca60f1b8359dc4b55.png]: /images/20220828/8166958fea6f4d23b5edbb60fd9babe3.png
[e702ac7bedec4c98b17144ecd1180fb1.png]: /images/20220828/666d36efc6da431f84d3423fe961d701.png
[b6ca531076ff4fe8b4974e0ceeaa7b8c.png]: /images/20220828/07a4f1bf75dd4f32be4dab8110ffb072.png
[83158635263b4de3b67ef31ffd780f8e.png]: /images/20220828/4121b9170f394aa8ae5275452ffdda18.png