用webpack从0到1打包一个按需加载的vue组件库

最新推荐文章于 2024-05-10 12:27:08 发布

Alasoo

最新推荐文章于 2024-05-10 12:27:08 发布

阅读量1.4k

点赞数 3

分类专栏： webpack node.js vue 文章标签： webpack javascript es6 node.js html5

本文链接：https://blog.csdn.net/ynweiy/article/details/115747639

版权

在vue项目开发中，我们会将经常用到的逻辑或模块抽象成组件，对于那些多个项目都有用到的组件，可以考虑封装成组件库，发布到npm。每次要到只需要npm install xx一下，就不用来回拷贝了。下面我们就从0开始来打包一个vue组件库。

使用vue组件库的常见方式

1、通过script标签引入

<body>
    <div id="app">
        <hello></hello>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <!--在组件库之前引入vue-->
<script src="../dist/my-lib.js"></script>
<script>
    new Vue({
        el: '#app'
    })
</script>

2、通过import引入

import Vue from "vue"
import App from "./App.vue"
import MyLib from "my-lib"
Vue.use(MyLib)
new Vue({
    name: "root",
    el: '#root',
    render: h => h(App)
})

这样引入后，在需要使用组件库的项目组件中，直接使用，比如：

<template>
  <div id="app">
      <hello></hello>
  </div>
</template>

组件在使用之前都需要注册组件，注册组件可以局部注册和全局注册，从上面组件库的使用，我们可以看出，组件库的组件都是全局注册的。

在第一种通过script标签引入的方式中，我们在组件库内部完成了全局注册，所以引入组件库就可以直接使用。

在第二种通过import引入的方式中，我们通过Vue.use(MyLib)完成组件的全局注册。

组件库的项目结构如下，在src/index.js中定义install方法。

//  src/index.js
import Hello from "./components/Hello.vue"

function install(Vue){   //外部的Vue.use(MyLib)会执行该方法，完成组件的全局注册。
  Vue.component(Hello.name, Hello)
}

if(window && window.Vue) {   //通过`script`标签引入的情况，在组件内部完成组件注册。
  Vue.use(install)
}

export default install

webpack打包

webpack的基础使用： webpack由浅入深系列（一）、webpack由浅入深系列（二）

现在我们的组件库就一个hello组件，我们将通过webpack，将它打包成可以通过上述两种方式使用的组件库。

webpack打包vue组件库，跟打包普通的vue项目的配置绝大部分是一样的。只是output有所不同，如下所示，增加了libraryTarget等。

//webpack.config.js
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
  mode: 'none',
  entry: './src/index.js',
  output: {
    path: path.join(__dirname,"/dist"),
    filename: 'my-li

最低0.47元/天解锁文章

Alasoo

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
用webpack从0到1打包一个按需加载的vue组件库

在vue项目开发中，我们会将经常用到的逻辑或模块抽象成组件，对于那些多个项目都有用到的组件，可以考虑封装成组件库，发布到npm。每次要到只需要npm install xx一下，就不用来回拷贝了。下面我们就从0开始来打包一个vue组件库。使用vue组件库的常见方式1、通过script标签引入<body> <div id="app"> <hello></hello> </div></body>&
复制链接

扫一扫