vue组件库开发,webpack打包,发布npm

做一个像elment-ui一样的vue组件库

那多好啊!这是我前几年就想做的

但webpack真的太难用,也许是我功力不够

今天看到一个视频,早上6-13点,终于实现了,呜呜

感谢视频的分享-来龙去脉-大家可以看这个视频:https://www.bilibili.com/video/BV1Zf4y1u75o?p=9&vd_source=125d808bbbad2b8400f221b816a0f674

有些能力你可能不用,但你必须具备,就像这个vue组件库开发

1.我终于发布了一个自己的组件库

1.1在npm上面

1.2 别人如何使用:

1.3 本地使用效果:

2.核心代码

全部源码地址:https://gitee.com/618859/yiz-ui

核心文件1:webpack.config.js

复制代码
// 不懂可以微信我yizheng369
const path = require('path');
// const VueLoaderPlugin = require('vue-loader/lib/plugin');
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  // entry: './src/components/index.js',
  entry: {
    // 把组件一个个写到这里才能正常打包喔
    card: './src/components/card/index.js',
    myInput: './src/components/my-input/index.js',
    yizTitle: './src/components/yiz-title/index.js',
    index: './src/components/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].umd.js',
    library: 'YizUI',
    libraryTarget: 'umd',
  },
  // resolve: {
  //   alias: {
  //     '@': path.resolve(__dirname, 'src'),
  //   },
  // },
  plugins: [
    // 先删除原来的文件,再打包
    new CleanWebpackPlugin(),
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'vue-style-loader', 'css-loader']
      },
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      },
    ]
  }
}

核心文件2: 集中注册文件

复制代码
// 集中在这里注册
import Card from './card/src/main.vue'
import MyInput from './my-input/src/main.vue'
import yizTitle from './yiz-title/src/main.vue'
// console.log('card', Card);
const components = [Card, MyInput, yizTitle]
function install(Vue){
  components.forEach(component => {
    // 全局注册组件
    Vue.component(component.name, component)
  })
}
// 将注册函数导出去
export default { install }

大家将源码下载下来,一看就明白了。

相关推荐
@小红花17 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵19 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲34 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
passer9812 小时前
基于webpack的场景解决
前端·webpack
前端与小赵2 小时前
vue3和vue2生命周期的区别
前端·javascript·vue.js
Sailing2 小时前
👉 👉 Vue3 自定义 Hook:从入门到进阶(~~安静的阅读2分钟,相信我,这篇文章一定能给你启发)
前端·javascript·vue.js
aol1213 小时前
X6官方示例「数据加工DAG图」转为Vue版
前端·vue.js