使用 Vue cli 3.0 构建自定义组件库的方法

使用 Vue cli 3.0 构建自定义组件库的方法可以通过以下步骤实现:

1. 创建一个新的 Vue 项目

使用 Vue cli 3.0 创建一个新项目:

vue create my-library

2. 配置组件库

在 "src" 目录下创建一个 "components" 目录,所有组件都将存放在这个目录中。为了确保组件可以在其他项目中使用,我们需要将这个项目打包成库。

引入库的方法有多种,其中最便于使用的是 Rollup。安装 Rollup:

npm install --save-dev rollup rollup-plugin-babel rollup-plugin-node-resolve rollup-plugin-terser rollup-plugin-vue

在项目根目录下创建一个 "rollup.config.js" 文件并将以下代码添加到文件中:

import vue from 'rollup-plugin-vue'
import babel from 'rollup-plugin-babel'
import { terser } from 'rollup-plugin-terser'
import resolve from 'rollup-plugin-node-resolve'

const path = require('path')

const name = 'MyLibrary' // 你的库的名称

const plugins = [
  resolve({
    extensions: ['.js', '.vue'],
  }),
  vue({
    css: true, // 当该选项为 true 时,Rollup 会将组件的样式和 CSS 提取到单独的 CSS 文件中
    compileTemplate: true, // 当该选项为 true 时,组件模板将被编译
  }),
  babel({
    exclude: 'node_modules/**',
    runtimeHelpers: true,
  }),
  terser(),
]

export default {
  input: 'src/index.js', // 入口文件
  output: [
    {
      file: './dist/my-library.js', // 输出文件路径
      format: 'esm', // 输出格式
      name,
      exports: 'named',
      sourcemap: true,
    },
  ],
  plugins,
}

创建一个 "src/index.js" 入口文件,在这个文件中导入和导出你的所有组件:

import MyComponent from './components/MyComponent.vue'

export {
  MyComponent,
  // 导出其他组件
}

3. 配置打包命令

添加一个打包命令,将我们的组件打包成库并且输出到 "./dist" 目录下:

{
  "scripts": {
    "build": "rollup -c"
  }
}

添加 "main" 和 "module" 字段到 "package.json" 文件中,以配置库的入口:

{
  "main": "dist/my-library.js",
  "module": "dist/my-library.esm.js"
}

4. 在其他项目中使用

在其他项目中,安装你的组件库:

npm install my-library

在项目中使用你的组件:

import { MyComponent } from 'my-library'

到此使用 Vue cli 3.0 构建自定义组件库的步骤就介绍完了。

示例1

以一个具体的组件 Box.vue 为例,其源文件在 "./src/components/Box.vue" 目录下,代码如下:

<template>
  <div class="box">
    <slot>
      <p>我是默认插槽</p>
    </slot>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: gray;
}
</style>

此时的目录结构是这样的:

.
├── src
│   ├── components
│   │   └── Box.vue
│   ├── App.vue
│   └── main.js
├── public
│   └── index.html
└── rollup.config.js

执行打包命令:

npm run build

生成目录结构:

.
├── dist
│   └── my-library.esm.js
├── src
│   ├── components
│   │   └── Box.vue
│   ├── App.vue
│   └── main.js
├── public
│   └── index.html
├── rollup.config.js
└── package.json

你会发现生成的 my-library.esm.js 里已经包含了你的组件内容。

示例2

如果你需要在项目外引入一些 Vue 框架,可以通过 Vue.config.js 文件,如下:

// Vue.config.js

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
      }
    }
  }
}

然后在 rollup.config.js 文件里添加 plugins 到 inputOptions:

import vue from 'rollup-plugin-vue'
import babel from 'rollup-plugin-babel'
import { terser } from 'rollup-plugin-terser'
import resolve from 'rollup-plugin-node-resolve'

const path = require('path')

const name = 'MyLibrary' // 你的库的名称

const plugins = [
  resolve({
    extensions: ['.js', '.vue'],
  }),
  vue({
    css: true, // 当该选项为 true 时,Rollup 会将组件的样式和 CSS 提取到单独的 CSS 文件中
    compileTemplate: true, // 当该选项为 true 时,组件模板将被编译
  }),
  babel({
    exclude: 'node_modules/**',
    runtimeHelpers: true,
  }),
  terser(),
]

const inputOptions = {
  input: 'src/index.js', // 入口文件
  plugins,
  external: ['vue'],//添加 external 选项
  output: [
    {
      file: './dist/my-library.js', // 输出文件路径
      format: 'umd', // 输出格式,目标是使用 CDN 引入,使用 UMD 格式是比较合适的
      name,
      exports: 'named',
      sourcemap: true,
      globals: {
        vue: 'Vue' // 加入自己的 library 使用的依赖
      }
    },
  ],
}

export default inputOptions;

到此,你已经可以愉快地在任意项目中使用你自己的组件库了!

阅读剩余 79%

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:使用 Vue cli 3.0 构建自定义组件库的方法 - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • vue中的循环遍历对象、数组和字符串

    下面是关于vue中循环遍历对象、数组和字符串的详细攻略。 对象循环遍历 在vue中循环遍历对象可以使用v-for指令,与循环遍历数组类似。下面是一个简单的例子: <ul> <li v-for="(value, key) in obj">{{ key }}: {{ value }}</li> </u…

    Vue 2023年5月27日
    00
  • vue的自定义指令传参方式

    下面是关于Vue自定义指令传参的攻略: 什么是Vue自定义指令 在Vue中,除了内置的指令(v-if、v-for、v-bind等)之外,还可以自定义指令,Vue提供了一个directive方法用于自定义指令,语法如下: Vue.directive(‘指令名称’, { // 指令选项 }) 其中,指令名称为自定义指令的名称,指令选项是一个对象,包含了一些指令相…

    Vue 2023年5月27日
    00
  • Vuex中actions优雅处理接口请求的方法

    下面是对于“Vuex中actions优雅处理接口请求的方法”的完整攻略: 1. 使用async/await处理接口请求 async/await 是一个结合了 Promise 和 Generator 的语法糖,它能让我们以同步的方式编写异步代码。我们可以通过它来简化数据请求的处理。 首先我们需要在 actions 中编写异步请求函数。例如,我们需要获取用户的信…

    Vue 2023年5月28日
    00
  • 2019 金三银四:阿里P9架构的Android大厂面试题总结

    2019 金三银四:阿里P9架构的Android大厂面试题总结 一、前言 这篇文章主要总结了阿里P9架构组在2019年金三银四时的Android岗位面试题,是对于Android面试的一份很好的蓝图。在准备Android面试时,可以使用这篇文章中的内容来检验自己的技术水平,也可以根据这些题目进行有针对性的复习和准备。 二、面试题 1. 说一下你对于Androi…

    Vue 2023年5月28日
    00
  • vue el-switch初始值(默认值)不能正确显示状态问题及解决

    Vue el-switch初始值不能正确显示状态问题及解决攻略 问题描述: vue使用element UI库中的switch组件时,如果设置了默认值,可能会出现初始状态无法正确显示的问题。 问题分析: 这个问题的原因是因为element UI中的switch并没有提供v-model来绑定value值,而是提供了v-model来绑定一个boolean值,也就是…

    Vue 2023年5月27日
    00
  • vue使用Google Recaptcha验证的实现示例

    下面是详细的讲解“vue使用Google Recaptcha验证的实现示例”的完整攻略,包括步骤和示例说明。 一、前置步骤 注册Google Recaptcha账号并获取Site key和Secret Key。 在项目中引入Recaptcha的JavaScript库,可以在页面中引入,也可以在vue中通过NPM安装vue-recaptcha组件来引用。 二、…

    Vue 2023年5月27日
    00
  • vue 中简单使用mock的示例代码详解

    下面是“vue 中简单使用mock的示例代码详解”的完整攻略。 1、什么是Mock? Mock是一种基于规则自动生成数据模拟的工具,常用于代码调试以及前后端分离开发环境中数据接口的测试。Mock通过配置生成模拟数据,并可以实现前后端分离开发流程中前端提前获取数据模型,更好地完成页面的实现。 2、Mock.js介绍 Mock.js是一款前后端分离开发中常用的模…

    Vue 2023年5月28日
    00
  • 10分钟快速上手VueRouter4.x教程

    10分钟快速上手VueRouter4.x教程: VueRouter是Vue.js官方的路由管理器,用于处理单页应用程序的导航,它可以帮助我们在Web应用程序中导航和管理视图,并且也可以控制浏览器的前进和后退。VueRouter可以非常快速地搭建起一个SPA应用,通过本教程,您可以在10分钟内了解如何在Vue 4.x项目中使用VueRouter。 安装vue-…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部