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 }

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

相关推荐
晨枫阳12 小时前
前端VUE项目-day1
前端·javascript·vue.js
艾普阳科技14 小时前
解锁多对多关系设计:SnapDevelop助你轻松实现用户角色管理,效率提升100%!
vue.js
sunbyte14 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GithubProfies(GitHub 个人资料)
前端·javascript·css·vue.js·github·tailwindcss
Hijin14 小时前
快速搭建 Vite+vue3+TS+ESLint@9+Prettier+Husky@9+Commitlint 项目
前端·javascript·vue.js
无懈可击14 小时前
FormCreate低代码表单设计器 v3.3 版本发布,功能大更新!
vue.js·低代码·开源
独立开阀者_FwtCoder15 小时前
踩坑无数后,我终于总结出这份最全的 Vue3 组件通信实战指南
前端·javascript·vue.js
202616 小时前
12. npm version方法总结
前端·javascript·vue.js
用户876128290737416 小时前
mapboxgl中对popup弹窗添加事件
前端·vue.js
浩星17 小时前
vue3+uniapp 使用vue-plugin-hiprint中实现打印效果
前端·vue.js·uni-app
wocwin17 小时前
uniapp 微信小程序Vue3项目使用内置组件movable-area封装悬浮可拖拽按钮(拖拽结束时自动吸附到最近的屏幕边缘)
vue.js·微信小程序