江苏城乡建设学院网站,wordpress好的插件推荐,公司网站后台管理教程,python做网站 要学多久做一个像elment-ui一样的vue组件库 那多好啊#xff01;这是我前几年就想做的 但webpack真的太难用#xff0c;也许是我功力不够 今天看到一个视频#xff0c;早上6-13点#xff0c;终于实现了#xff0c;呜呜 感谢视频的分享-来龙去脉-大家可以看这个视频#xff1a;htt… 做一个像elment-ui一样的vue组件库 那多好啊这是我前几年就想做的 但webpack真的太难用也许是我功力不够 今天看到一个视频早上6-13点终于实现了呜呜 感谢视频的分享-来龙去脉-大家可以看这个视频https://www.bilibili.com/video/BV1Zf4y1u75o?p9vd_source125d808bbbad2b8400f221b816a0f674 有些能力你可能不用但你必须具备就像这个vue组件库开发 1.我终于发布了一个自己的组件库
1.1在npm上面
1.2 别人如何使用 1.3 本地使用效果
2.核心代码
全部源码地址https://gitee.com/618859/yiz-ui 核心文件1webpack.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 }大家将源码下载下来一看就明白了。
