为了账号安全,请及时绑定邮箱和手机立即绑定

玩转组件库搭建全流程

郭小新 Web前端工程师
难度入门
时长 2小时46分
学习人数
综合评分9.60
10人评价 查看评价
9.6 内容实用
10.0 简洁易懂
9.2 逻辑清晰
  • //安装 vue-loader

    //webpack配置文件,新建webpack.component.js(自定义命名)

    const { VueLoaderPlugin } = require('vue-loader');
    const path = require('path');//绝对路径
    const glob = require('glob');//遍历
    const list = {};
    
    async function makeList(dirPath,list){
        const files = glob.sync('${dirPath}/**/index.js'); //dirPath下所有index.js路径的数组
        for(let file of files){
            const component = file.split(/[/.]/)[2]; //获取组件name
            list[component] = './${file}'; //填充list
        }
    }
    makeList('components/lib',list);
    
    //files = ['components/lib/card/index.js','components/lib/demo/index.js']
    //list = {
    //    card:'components/lib/card/index.js',
    //    demo:'components/lib/demo/index.js',
    // }
    
    
    module.exports = {
        entry: list, //入口
        mode: 'development',
        output: {
            filename: '[name].umd.js', //输出文件名
            path: path.resolve(__dirname, 'dist'),  //输出目录
            library:'mui', //配置到该字段下
            libraryTarget: 'umd' //打包成umd模块
        },
        plugins: [ //处理Vue文件
            new VueLoaderPlugin(), 
        ],
        module: {
            rules: [
                test:/\.vue$/, //对vue文件使用vue-loader
                use: [
                    {
                        loader: 'vue-loader',
                    }
                ]
            ]
        }
    }


    //package.json配置打包命令

    "scripts": {
        "build:js": "webpack --config ./webpack.component.js"
    }


    //配置组件库入口index.js

    //引入组件库中定义的所有组件
    import Demo from './demo';
    import Card from './card';
    
    const components = {
        Demo,
        Card,
    };
    
    const install = function (Vue) {
        if(install.installed) return; //避免重复安装
        Object.keys(components).forEach(key => {
            Vue.component(components[key].name, components[key]); //对所有key值用component注册
        });
    }
    
    const API = {
        install,
    }
    
    export default API; //导出


    //打包

    npm run build:js
    查看全部
  • //组件调用

    <m-card 
        imgSrc="img.png"
        summary="卡片概要"
    />
    <m-card     
        imgSrc="img.png"    
        summary="卡片概要">    
        <template v-slot:footer>        
            <div  class="footer">            
                <div class="level">528人报名</div>            
                <div class="price">¥299.00</div>        
            </div>    
        </template>
    </m-card>
    <m-card     
        imgSrc="img.png" 
        :width="370"
        :imgHeight="90"   
     >    
         插槽类型卡片概要
        <template v-slot:footer>        
            <div  class="footer-spring">            
                <div class="level">528人报名</div>            
                <div class="level">1096收藏</div>          
            </div>    
        </template>
    </m-card>


    <style>
    .footer{
        padding: 0 8px;
        font-size: 12px;
        text-align: left;
    }
    .level{
        color:#9199a1;
        margin-bottom: 8px;
    }
    .price{
        color:#f01414;
    }
    .footer-spring{
        display: flex;
        justify-content: space-between;
        padding: 0 8px;
        font-size: 12px;
    }
    </style>
    查看全部
    1 采集 收起 来源:测试组件

    2022-10-15

  • 11111222

    查看全部
    1 采集 收起 来源:课程介绍

    2021-10-11

  • 视频教程是2021年开始的,现在是2023年vue脚手架提供的安装的就只有Vue3,没有Vue2选。

    查看全部
  • vue - 构建用户界面的渐进式框架

    vue组件 - 组件 可复用的 vue实例

    vue组件库 - element Ant D

    查看全部
    0 采集 收起 来源:课程介绍

    2023-10-13

  • 配置文件webpack.config.js是webpack模块化打包时候使用的。

    查看全部
  • mkdir docs && echo '# Hello VuePress' > docs/README.md

    控制台输入命令时,显示错误 标记“&&”不是此版本中的有效语句分隔符。

    cmd 运行命令可解决

    查看全部
    0 采集 收起 来源:关于vuepress

    2023-02-17

  • 什么鬼,山寨版的呀

    官方正版

    http://sass-lang.com/

    查看全部
  • 过时了 `gulp`

    查看全部
    0 采集 收起 来源:课程介绍

    2022-08-30

  • 查看全部
    0 采集 收起 来源:课程介绍

    笔记审核中笔记正在审核中,仅自己可见 2022-08-30

  • 创建github站点


    登录github

    将本地文件推送到github

    git init
    git remote add origin    //绑定仓库地址 
    git add .
    git commit -m "feat: save"
    git push -u origin master


    vuepress/config.js中设置base

    在项目根目录中新建deploy.sh

    http://img1.sycdn.imooc.com//62d51d740001bbd005910564.jpg


    package.json

    "scripts": {
        "deploy": "bash deploy.sh"
    }


    vuepress设置标题和导航栏

    http://img1.sycdn.imooc.com//62d521990001c8d909860508.jpg

    查看全部
  • //编写文档

    //首页文档

    http://img1.sycdn.imooc.com//62d50f3000010ba606290640.jpg

    //组件文档

    http://img1.sycdn.imooc.com//62d50de800019a8306150582.jpg

    查看全部
  • //vuepress配置文件

    https://img1.sycdn.imooc.com//62d3f3bd0001eb6801610140.jpg


    //侧边栏



    在 Markdown 中 使用 Vue

    http://img1.sycdn.imooc.com//62d5081c00015d5a07100463.jpg


    //静态文件

    .vuepress/public


    http://img1.sycdn.imooc.com//62d50a800001382307470278.jpg

    查看全部
  • http://img1.sycdn.imooc.com//62d3cedf00018f4705780522.jpg

    将 VuePress 安装为本地依赖

    npm install -D vuepress

    //创建文档

    mkdir docs && echo '# Hello VuePress' > docs/README.md

    //在 package.json 中添加一些 scripts

    {
      "scripts": {
        "docs:dev": "vuepress dev docs",
        "docs:build": "vuepress build docs"
      }}

    //启动

    npm run docs:dev
    查看全部
    0 采集 收起 来源:关于vuepress

    2022-07-17

  • //在npm上发布第三方组件库

    //配置package.json

    "description":"组件库描述",
    "main":"dist/index.umd.js", //组件库入口文件
    "keywords":{  //关键词,方便用户搜索
        "mooc-ui",
        "vue",
        "ui"
    },
    "author":"Inthur", //作者
    "files": [ //需要发布的文件
        "dist",
        "components"
    ],


    //README.md对组件库描述

    https://img1.sycdn.imooc.com//62d3c98c0001fe1108280629.jpg


    //终端登录npm 发布

    npm login
    
    npm publish
    查看全部
    0 采集 收起 来源:发布到npm

    2022-07-17

首页上一页1234下一页尾页

举报

0/150
提交
取消
课程须知
由于本门课程算是大家学习Vue路上的一个进阶,所以在开始前,希望同学们能掌握: 1. 基本的前端基础知识 HTML JS CSS 2. 基本的 Vue 知识
老师告诉你能学到什么?
在课程中你能学到什么? 1. 组件的设计与实现。 2. 组件库的搭建,打包及发布。 3. 组件文档的编写,以及组件库文档站点的搭建与发布。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!