精华内容
下载资源
问答
  • vue自定义组件库

    2020-10-09 10:24:13
    vue的UI框架已经有很多(ElementUI,iView 等等),而且组件都很丰富,大体上可以满足我们的需求,不用重复造轮子,但是需求不定的,在项目中有时候仅凭这些也实现不了,这时我们需要封装自己的组件或者对一些已经...

    现在vue的UI框架已经很丰富了,为什么还要封装一套自己的UI框架呢?

    vue的UI框架已经有很多(ElementUIiView 等等),而且组件都很丰富,大体上可以满足我们的需求,不用重复造轮子,但是需求是不定的,在项目中有时候仅凭这些也实现不了,这时我们需要封装自己的组件或者对一些已经存在的组件进行二次封装。

    接下来我们就来看看如何自定义自己的组件并使用

    一:创建项目

    # 创建目录
    mkdir tanrj-ui
    # cd到目录中
    cd tanri-ui
    # 初始化项目
    vue create .
    

    如下图为项目结构

    在这里插入图片描述

    二:调整项目目录

    |-- 重命名src为examples(参考ElementUI),用于测试组件
    |-- 新建packages,定义上传的组件库
    |-- 新建vue.config.js
    

    调整之后的项目结构

    在这里插入图片描述

    编写vue.config.js

    const path = require('path')
    const { config } = require('process')
    
    const resolve = dir => path.join(__dirname, dir)
    
    module.exports = {
      pages: {
        index: {
          entry: 'examples/main.js',
          template: 'public/index.html',
          filename: 'index.html'
        }
      },
    
      chainWebpack: config => {
        config.module
        .rule('js')
        .include
          .add(resolve('packages'))
          .end()
        .use('babel')
          .loader('babel-loader')
          .tap(option => {
            return option
          })
      }
    }
    

    三:定义组件

    在packages下新建组件(如图)
    在这里插入图片描述
    文件路径:tanrj-ui\packages\date-picker\src\date-picker.vue

    <template>
      <div>这是一个datePicker组件</div>
    </template>
    
    <script>
    export default {
      name: 'datePicker',
    };
    </script>
    
    <style lang="scss">
    
    </style>
    

    文件路径:tanrj-ui\packages\date-picker\index.js

    import datePicker from './src/date-picker.vue'
    
    datePicker.install = function(Vue) {
      Vue.component(datePicker.name, datePicker)
    }
    
    export default datePicker
    
    • theme-color组件同上

    四:注册组件

    import datePicker from './date-picker/index'
    import themeColor from './theme-color/index'
    
    const components = [
      datePicker,
      themeColor
    ]
    
    const install = function(Vue) {
      components.forEach(component => {
        Vue.component(component.name, component)
      })
    }
    
    if(typeof window !== 'undefined' && window.Vue) {
      install(window.Vue)
    }
    
    export {
      install,
      datePicker,
      themeColor
    }
    

    五:本地测试

    我们可以在main.js中全局注册,也可以在页面中直接引入
    文件路径:tanrj-ui\examples\main.js

    import Vue from 'vue'
    import App from './App.vue'
    
    import { datePicker, themeColor } from '../packages/index'
    
    Vue.use(datePicker)
    Vue.use(themeColor)
    // 或者
    // Vue.component(datePicker.name, datePicker)
    // Vue.component(themeColor.name, themeColor)
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
    }).$mount('#app')
    

    接着在页面中使用上即可
    文件路径:tanrj-ui\examples\App.vue

    <template>
      <div id="app">
        <datePicker/>
        <themeColor/>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    
    </style>
    

    运行看效果:
    在这里插入图片描述

    六:打包文件

    本地测试没问题之后,接着就是上传到npm中
    在package.json文件中脚本添加

    "script": {
        "build-lib": "vue-cli-service build --target lib --name tanrj-ui --dest lib packages/index.js",
    }
    

    执行命令

    npm run build-lib
    

    注意:每次定义好组件或添加了新的组件之后都需要上传

    此时我们看看项目结构

    在这里插入图片描述

    七:发布到npm

    • 修改packages.json中配置
    "private": false,
    "main": "lib/tanrj-ui.umd.min.js",
    // 可自行决定是否修改
    "version": "0.1.3",
    "keywords": ["tanrj", "tanrj-ui"],
    
    • 根目录下添加.npmignore文件
    # 忽略目录
    examples/
    packages/
    public/
    
    # 忽略指定文件
    vue.config.js
    babel.config.js
    *.map
    
    • 发布npm
    # 设置为默认的官方镜像
    npm config set registry https://registry.npmjs.org/
    # 登录(未注册去npm.js.com或者通过npm adduser注册一个账户)
    npm login
    # 发布
    npm publish
    

    之后我们便可在npm官方网站看到

    展开全文
  • 之前一直在使用 Element UI ,不得不说饿了么团队真的很厉害,人总是有好奇心的,想着自己什么时候也试着做一套自己的组件库,刚好团队需要一套简单的组件库,就做了一些尝试。原本不好意思拿出来讲,想着自己无非...

    23070f20cfc17ef4bcb80ff384a44e1d.png

    之前一直在使用 Element UI ,不得不说饿了么团队真的很厉害,人总是有好奇心的,想着自己什么时候也试着做一套自己的组件库,刚好团队需要一套简单的组件库,就做了一些尝试。原本不好意思拿出来讲,想着自己无非是把别人写了一万遍的东西,我又写了第一万零一遍,后来朋友劝我说,别人有时候并不是看你做的东西有多好,只是想看你有没有这方面的经验,后来想想,说的在理,那就把自己的半吊子东西和大家分享一下吧。

    前言

    在使用 Vue CLI 初始化项目时,我使用的是 webpack 模板,在开发组件库的时候,如何打包是个很重要的问题,因为要满足按需加载和开发预览的需求。 开发预览的问题比较容易解决,将原本的 webpack 开发环境下的配置修改一下entry就可以解决,按需加载则比较麻烦,需要把每一个开发的组件单独打包,我的思路是将webpack 配置为多入口、多出口就ok了。 剩下的问题就是开发组件中遇到的具体问题和将整个组件库打包用于全引入了,后面一一分享。

    基础配置

    初始化项目:

    # 2.x 版本
    # 全局安装 vue-cli 工具
    npm install -g vue-cli
    # 初始化项目
    vue init webpack MyComponent

    之前,我一直使用的是vue-cli(2.x) 现在已经是3.x,初始化项目会和2.x有一些不同。

    # 3.x 版本
    # 全局安装 vue-cli 工具
    npm install -g @vue/cli
    npm install -g @vue/cli-init
    # 初始化项目
    vue init webpack MyComponent

    为了开发时预览,我将src改为example用来写开发样例,测试组件效果,然后再新建一个src文件夹,修改后的目录结构:

    215a046725f1e50e5e5ce7a4c3e171d6.png

    这个时候,再修改build文件夹下webpack.base.conf.js,只需要修改 webpack 配置中的entry就好了,这个文件中的信息是作为 webpack 打包的默认配置存在的,后面按照自己需要覆盖这个文件的配置信息就好了。

    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './src/main.js'
      }
      // ...
    }
    
    // 修改后
    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './example/main.js'
      }
      // ...
    }
    

    这个时候运行npm run dev命令就可以预览效果了,会看到经典的 Welcome to Your Vue.js App。

    开发组件

    在新建的src文件夹中新建index.js,这个会在后面的全引入中用到,接着新建一个components文件夹用来存放所有组件,我们先创建一个MyButton组件,文件目录如下:

    f78e986476e8ab493904905a3911960a.png

    其中,my-button里的index.js是为后面按需加载准备的。

    main.vue内容:

     <!--main.vue-->
    <template>
      <button class="my-button"
              :class="['my-button-size-'+size]"
              @click="handleClick">
        <slot></slot>
      </button>
    </template>
    ​
    <script>
    export default {
      name: 'MyButton',
      props: {
        // size 属性是用来控制按钮的大小样式,通过不同 size 设置不同的类名
        size: {
          type: String,
          default: 'big'
        }
      },
      methods: {
        /**
         * 用于触发 my-button 实例上的 click 事件
         */
        handleClick () {
          this.$emit('click')
        }
      }
    }
    </script>
    ​
    <style scoped>
      /* 初始化 button 的样式 */
      .my-button {
        display: inline-block;
        line-height: 1;
        cursor: pointer;
        background: #fff;
        border: 1px solid #ddd;
        color: #000;
        text-align: center;
        outline: none;
        font-size: 14px;
        border-radius: 4px;
      }
    ​
      /* button big 的样式 */
      .my-button.my-button-size-big {
        padding: 12px 20px;
      }
    ​
      /* button mid 的样式 */
      .my-button.my-button-size-mid {
        padding: 10px 20px;
      }
    ​
      /* button small 的样式 */
      .my-button.my-button-size-small {
        padding: 10px 10px;
      }
    </style>
    ​

    my-button中的index.js内容,其实如果组件库只是需要满足全引入,这个index.js完全可以省略掉,后面按需引入会对这个文件做一些修改:

    'use strict'
    // my-button 中的 index.js
    import main from './src/main'
    
    export default main
    

    src中的index.js内容:

    'use strict'
    // src 中的 index.js
    import MyButton from './components/my-button'
    
    const components = [
      MyButton
    ]
    
    // 官方原文:Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象
    const install = function (Vue) {
      components.forEach(component => {
        // Vue.component:注册或获取全局组件
        Vue.component(component.name, component)
      })
    }
    
    // 在全局引入组件库时,使用 Vue.use 安装插件,必须提供 install 方法,这里 export default 就是用于 Vue.use
    export default {
      install
    }
    

    这时再修改example文件夹中的文件用于预览效果,修改后的目录结构:

    eb18ab368f75af415dd4fbf5d11d71fd.png

    主要的修改是引入组件,添加路由信息,写组件的 demo。

    main.js中添加两行代码全局引入开发的组件:

    // ...
    // 引入开发的组件库,
    import MyComponent from '../src'
    
    // 使用 Vue.use 安装开发的组件库
    Vue.use(MyComponent)
    // ...
    

    这样可以在example自由使用MyButton了。

    <template>
      <div class="example-button">
        <my-button @click="clickFunc">
          这是一个按钮
        </my-button>
        <my-button size="mid" @click="clickFunc">
          这是一个按钮
        </my-button>
        <my-button size="small" @click="clickFunc">
          这是一个按钮
        </my-button>
      </div>
    </template>
    ​
    <script>
    export default {
      name: 'example-button',
      methods: {
        clickFunc () {
          alert('Click')
        }
      }
    }
    </script>
    ​
    <style scoped>
    ​
    </style>

    效果预览:

    246f5255cdf935d0b7e85f3a7f144838.png

    这是一个非常简单的组件,许多地方没有做,比如:按钮的hover效果,active效果……距离一个成熟的组件还有很大的距离,不过大致思路是这样了,后面可以按照自己的需要添加其他的东西。

    Webpack 打包用于全引入

    做完以上的工作的确是开发了一个只有一个组件的组件库,这时候需要将组件库打包,先将组件库打包在一个新的目录dist中。

    先附上一个连接:webpack 打包 JavaScript library

    Webpack 的配置比较复杂,我的大致思路是将原本的entry.js改为src中的index.js,按照 Webpack 打包 Library 的规范修改必要配置就可以了。

    用于打包组件库在build文件夹下的webpack.build.conf.js

    // ...
    const merge = require('webpack-merge')
    const baseWebpackConfig = require('./webpack.base.conf')
    
    baseWebpackConfig.entry = {}
    
    const webpackConfig = merge(baseWebpackConfig, {
      // ...
      devtool: config.publish.productionSourceMap ? '#source-map' : false,
      entry: {
        myComponent: './src/index.js'
      },
      output: {
        path: config.publish.distRoot + '/dist',
        filename: 'index.js',
        publicPath: config.publish.assetsPublicPath,
        library: 'my-component',
        libraryTarget: 'umd',
        umdNamedDefine: true
      },
      externals: {
        vue: {
          root: 'Vue',
          commonjs: 'vue',
          commonjs2: 'vue',
          amd: 'vue'
        }
      },
      // ...
    })
    
    // ...
    

    每一个配置的用途都可以在 Webpack 官网上找到,就不多说了,附上连接:Webpack 配置

    最容易被忽略的是build文件夹下,utils.js会因process.env.NODE_ENV环境变量不同,为 Webpack 各个 loader 生成的路径不同。

    最后再修改一下package.json

    {
        // ...
        "private": false,
        "main": "dist/index.js",
        "scripts": {
            // ...
            "build:my-component": "node build/publish.js"
            // ...
        }
    }

    遮样一个非常小的组件库就完成了,目前只写了全引入的部分,后面会把按需引入的部分加上。

    最后贴上github的地址:MyComponent,细节的地方可以看源代码,之前做的组件库因为不是个人成果,里面也有设计同事的工作成果,还是不拿出来给自己贴金了,哈哈哈~

    距离一个成熟的组件库还差得非常非常远,不过有这样的经历看起别人成熟的组件库的源代码时会更轻车熟路,希望对大家有帮助~

    展开全文
  • 当我们自己开发了一个 _UI Component_, 需要在多个项目中使用时候呢? 我们首先想到可能直接复制一份过去对吗?我们为什么不发布一个 UI 组件库给自己用呢?下面小编和大家来一起学习下吧
  • 自定义vue的UI组件库

    2020-05-27 20:57:02
    学完vue使用了element-ui 有没有想自己...publishedliu 是组件库的名字 这个名字文件夹下面 包含一个src 一个package.json文件 这用来解释main执行index.js发生了什么 import Button from 'publishedliu' Vue.use

    学完vue使用了element-ui 有没有想自己封装一个ui库 不求多好看,只求学习一个技能或者一个知识点,那我可以帮到你,如果你喜欢请点个赞再走吧。
    小提示 千万别在props子组件里面直接改父组件的值 需要data过渡赋值一下
    分几步
    第一步是注册npm账号 这个自行搜索
    第二步是自己封装一个组件
    在这里插入图片描述
    这张图

    是一个ui组件库基本的结构
    publishedliu 是组件库的名字 这个名字的文件夹下面
    包含一个src 一个package.json文件

    这是用来解释main执行index.js发生了什么 看到这可能迷糊别急 这是解释json里面的main键值对的意思

    import Button from 'publishedliu'
    Vue.use(Button)//Button其实是导出了install与Button是组件Checkbox也是
    执行use的时候 其实是把所有的外部组件全部定义为全局组件 通过install方法
    

    index.js文件

    import Button from './components/button/index';
    import Checkbox from './components/Checkbox/index';
    const components = [
      Button,
      Checkbox,
    ];
    const install = function(Vue, opts = {}) {//vue插件的用法install
      components.forEach(component => {
        Vue.component(component.name, component);
      });
    };//install是默认方式与vue.use()结合
    export default {
     install
    };
    
    {
      "name": "publishedliu",//包的名字
      "version": "1.0.0",//版本 可以 自行修改
      "description": "组件库",//上传成功之后npm库里的提示
      "author": "liuyong-byte <1256230450@qq.com>",//是你创建npm账号的邮箱
      "private": false,//这个一定改成false 用于上传npm的时候
      "main": "./src/index.js",//是执行文件夹
      "files": [//上传组件库必须要的文件
        "src/components/*",//上传这个文件夹下面所有文件
        "src/index.js"//导出ui库的时候执行文件 个人觉得这个月理解容易一些
      ],
      "__npminstall_done": "Wed May 27 2020 10:54:02 GMT+0800 (GMT+08:00)",
      "_from": "publishedliu@1.0.0",
      "_resolved": "https://registry.npm.taobao.org/publishedliu/download/publishedliu-1.0.0.tgz"
    }
    

    这个是帮助你切换npm镜像与cnpm淘宝使用的

    1.设置使用淘宝cnpm
    
    npm config set registry https://registry.npm.taobao.org
    2.查看是否配置成功,成功后即可直接使用cnpm命令
    
    npm config get registry
    3.还原npm仓库
    
    npm config set registry https://registry.npmjs.org
    

    组件封装 比如上面的Button组件
    插槽的那一期https://blog.csdn.net/qq_43505774/article/details/106303148

    <template>
        <button class="L-but" :style="{color:this.fColor,backgroundColor:this.bgColor}" @click="click">
            <slot>按钮</slot>//默认插槽 父组件分发子组件
        </button>
    </template>
    
    <script>
    export default {
        name:"Button",//这个很重要 很重要 是上面的component.name的参数
        //当你导入组件库之后输入的Button组件 它就会找到这个name进行加载 个人理解
        props:{//这个是父组件传参个子组件
            bgColor:{
                type:String,
                value:"skyblue"
            },
            fColor:{
                type:String,
                value:"white"
            }
            
        },
        data() {
            return {
                
            }
        },
        methods:{
            click:function(e){//这个是子组件与父组件通信
            //通信有很多种 attr libar vue.$emit props options slot vuex provide inject等等
                this.$emit('click自定义随便都可以',e)//当点击子组件的时候 父组件通过click方法获取值 @父组件方法 与click 同名就ok
            }
        }
    }
    </script>
    
    <style scoped>//这是style作用域 当然了你也可以使用less sass 或者src连接
    .L-but{
        border: 1px solid white;
    }
    </style>
    

    现在是上传组件
    在登录之前需要切换为npm 源 而不是淘宝cnpm
    npm login 登录
    输入username password email
    然后没有报错 就npm publish
    可能会报错 json文件的name名字冲突
    如果需要跟换版本号 直接可以在json里面修改 就ok 也可以命令自行搜索
    我认为直接修改方便一点

    当上传成功 需要等几分钟 cnpm才会映射到 所以先用npm下载
    npm install 包名

    当你导入ui组件库的时候 它会自动加载执行src 下面的index文件
    把组件库导出来
    然后vue.use成为全局组件
    就 ok了

    Button 里面的index.js文件内容 也很重要

    import Button from './button.vue';
    
    /* istanbul ignore next */
    // Button.install = function(Vue) {
    //   Vue.component(Button.name, Button);
    // }; 这个你如果重复写在每一个组件index.js里面 那你没必要
    //在src的index里面install循环了
    
    export default Button;
    
    展开全文
  • 之前一直在使用 Element UI ,不得不说饿了么团队真的很厉害,人总是有好奇心的,想着自己什么时候也试着做一套自己的组件库,刚好团队需要一套简单的组件库,就做了一些尝试。原本不好意思拿出来讲,想着自己无非...

    4a5a2da1f8b69b3f4858485db0387354.png

    之前一直在使用 Element UI ,不得不说饿了么团队真的很厉害,人总是有好奇心的,想着自己什么时候也试着做一套自己的组件库,刚好团队需要一套简单的组件库,就做了一些尝试。原本不好意思拿出来讲,想着自己无非是把别人写了一万遍的东西,我又写了第一万零一遍,后来朋友劝我说,别人有时候并不是看你做的东西有多好,只是想看你有没有这方面的经验,后来想想,说的在理,那就把自己的半吊子东西和大家分享一下吧。

    前言

    在使用 Vue CLI 初始化项目时,我使用的是 webpack 模板,在开发组件库的时候,如何打包是个很重要的问题,因为要满足按需加载和开发预览的需求。 开发预览的问题比较容易解决,将原本的 webpack 开发环境下的配置修改一下entry就可以解决,按需加载则比较麻烦,需要把每一个开发的组件单独打包,我的思路是将webpack 配置为多入口、多出口就ok了。 剩下的问题就是开发组件中遇到的具体问题和将整个组件库打包用于全引入了,后面一一分享。

    基础配置

    初始化项目:

    # 2.x 版本
    # 全局安装 vue-cli 工具
    npm install -g vue-cli
    # 初始化项目
    vue init webpack MyComponent

    之前,我一直使用的是vue-cli(2.x) 现在已经是3.x,初始化项目会和2.x有一些不同。

    # 3.x 版本
    # 全局安装 vue-cli 工具
    npm install -g @vue/cli
    npm install -g @vue/cli-init
    # 初始化项目
    vue init webpack MyComponent

    为了开发时预览,我将src改为example用来写开发样例,测试组件效果,然后再新建一个src文件夹,修改后的目录结构:

    6b8c80c79a66f6c47f28fb22e85d6b74.png

    这个时候,再修改build文件夹下webpack.base.conf.js,只需要修改 webpack 配置中的entry就好了,这个文件中的信息是作为 webpack 打包的默认配置存在的,后面按照自己需要覆盖这个文件的配置信息就好了。

    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './src/main.js'
      }
      // ...
    }
    
    // 修改后
    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './example/main.js'
      }
      // ...
    }
    

    这个时候运行npm run dev命令就可以预览效果了,会看到经典的 Welcome to Your Vue.js App。

    开发组件

    在新建的src文件夹中新建index.js,这个会在后面的全引入中用到,接着新建一个components文件夹用来存放所有组件,我们先创建一个MyButton组件,文件目录如下:

    205a8e2353d15c85deffdea81fbebe1c.png

    其中,my-button里的index.js是为后面按需加载准备的。

    main.vue内容:

     <!--main.vue-->
    <template>
      <button class="my-button"
              :class="['my-button-size-'+size]"
              @click="handleClick">
        <slot></slot>
      </button>
    </template>
    ​
    <script>
    export default {
      name: 'MyButton',
      props: {
        // size 属性是用来控制按钮的大小样式,通过不同 size 设置不同的类名
        size: {
          type: String,
          default: 'big'
        }
      },
      methods: {
        /**
         * 用于触发 my-button 实例上的 click 事件
         */
        handleClick () {
          this.$emit('click')
        }
      }
    }
    </script>
    ​
    <style scoped>
      /* 初始化 button 的样式 */
      .my-button {
        display: inline-block;
        line-height: 1;
        cursor: pointer;
        background: #fff;
        border: 1px solid #ddd;
        color: #000;
        text-align: center;
        outline: none;
        font-size: 14px;
        border-radius: 4px;
      }
    ​
      /* button big 的样式 */
      .my-button.my-button-size-big {
        padding: 12px 20px;
      }
    ​
      /* button mid 的样式 */
      .my-button.my-button-size-mid {
        padding: 10px 20px;
      }
    ​
      /* button small 的样式 */
      .my-button.my-button-size-small {
        padding: 10px 10px;
      }
    </style>
    ​

    my-button中的index.js内容,其实如果组件库只是需要满足全引入,这个index.js完全可以省略掉,后面按需引入会对这个文件做一些修改:

    'use strict'
    // my-button 中的 index.js
    import main from './src/main'
    
    export default main
    

    src中的index.js内容:

    'use strict'
    // src 中的 index.js
    import MyButton from './components/my-button'
    
    const components = [
      MyButton
    ]
    
    // 官方原文:Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象
    const install = function (Vue) {
      components.forEach(component => {
        // Vue.component:注册或获取全局组件
        Vue.component(component.name, component)
      })
    }
    
    // 在全局引入组件库时,使用 Vue.use 安装插件,必须提供 install 方法,这里 export default 就是用于 Vue.use
    export default {
      install
    }
    

    这时再修改example文件夹中的文件用于预览效果,修改后的目录结构:

    d7ce12c09bf05a861b63c1243ea4f2dd.png

    主要的修改是引入组件,添加路由信息,写组件的 demo。

    main.js中添加两行代码全局引入开发的组件:

    // ...
    // 引入开发的组件库,
    import MyComponent from '../src'
    
    // 使用 Vue.use 安装开发的组件库
    Vue.use(MyComponent)
    // ...
    

    这样可以在example自由使用MyButton了。

    <template>
      <div class="example-button">
        <my-button @click="clickFunc">
          这是一个按钮
        </my-button>
        <my-button size="mid" @click="clickFunc">
          这是一个按钮
        </my-button>
        <my-button size="small" @click="clickFunc">
          这是一个按钮
        </my-button>
      </div>
    </template>
    ​
    <script>
    export default {
      name: 'example-button',
      methods: {
        clickFunc () {
          alert('Click')
        }
      }
    }
    </script>
    ​
    <style scoped>
    ​
    </style>

    效果预览:

    536e1d4635d523440df858e7354a1b05.png

    这是一个非常简单的组件,许多地方没有做,比如:按钮的hover效果,active效果……距离一个成熟的组件还有很大的距离,不过大致思路是这样了,后面可以按照自己的需要添加其他的东西。

    Webpack 打包用于全引入

    做完以上的工作的确是开发了一个只有一个组件的组件库,这时候需要将组件库打包,先将组件库打包在一个新的目录dist中。

    先附上一个连接:webpack 打包 JavaScript library

    Webpack 的配置比较复杂,我的大致思路是将原本的entry.js改为src中的index.js,按照 Webpack 打包 Library 的规范修改必要配置就可以了。

    用于打包组件库在build文件夹下的webpack.build.conf.js

    // ...
    const merge = require('webpack-merge')
    const baseWebpackConfig = require('./webpack.base.conf')
    
    baseWebpackConfig.entry = {}
    
    const webpackConfig = merge(baseWebpackConfig, {
      // ...
      devtool: config.publish.productionSourceMap ? '#source-map' : false,
      entry: {
        myComponent: './src/index.js'
      },
      output: {
        path: config.publish.distRoot + '/dist',
        filename: 'index.js',
        publicPath: config.publish.assetsPublicPath,
        library: 'my-component',
        libraryTarget: 'umd',
        umdNamedDefine: true
      },
      externals: {
        vue: {
          root: 'Vue',
          commonjs: 'vue',
          commonjs2: 'vue',
          amd: 'vue'
        }
      },
      // ...
    })
    
    // ...
    

    每一个配置的用途都可以在 Webpack 官网上找到,就不多说了,附上连接:Webpack 配置

    最容易被忽略的是build文件夹下,utils.js会因process.env.NODE_ENV环境变量不同,为 Webpack 各个 loader 生成的路径不同。

    最后再修改一下package.json

    {
        // ...
        "private": false,
        "main": "dist/index.js",
        "scripts": {
            // ...
            "build:my-component": "node build/publish.js"
            // ...
        }
    }

    遮样一个非常小的组件库就完成了,目前只写了全引入的部分,后面会把按需引入的部分加上。

    最后贴上github的地址:MyComponent,细节的地方可以看源代码,之前做的组件库因为不是个人成果,里面也有设计同事的工作成果,还是不拿出来给自己贴金了,哈哈哈~

    距离一个成熟的组件库还差得非常非常远,不过有这样的经历看起别人成熟的组件库的源代码时会更轻车熟路,希望对大家有帮助~

    展开全文
  • 一、什么是 Mint UI 1、Mint UI 包含丰富 CSS 和 JS 组件,可以提升移动端开发效率 2、Mint UI按需加载组件 3、Mint UI 轻量化 二、Mint UI 安装 1、在项目根目录终端引入: npm i mint-ui -S ...
  • vue组件编写 组件库 让我们深入了解带有复合组件干净React代码世界。 在React中实现我第一个复合组件后,我对这种模式正式上瘾。 作为这个问题自称为专家(实际上我从Ryan Florence及其化合物成分学习...
  • 做一个属于我们自己 UI 组件库应该是个不错小目标了。那。。。组件是什么?我想应该不用多说,在日常开发中我们天天与之打交道,你所写每一个 vue 文件都可以当做是一个组件,只不过通用性有所区别而已。组件...
  • 相信在使用Vue进行项目开发时候很多人会接触到vue组件,最常见就是我们使用element-ui组件库,用起来确实很方便,大大减少了我们开发时间。在一个项目中其实有很多可复用代码块,如果我们可以把这些内容...
  • 做一个属于我们自己 UI 组件库应该是个不错小目标了。那。。。组件是什么?我想应该不用多说,在日常开发中我们天天与之打交道,你所写每一个 vue 文件都可以当做是一个组件,只不过通用性有所区别而已。组件...
  • 今天我们来聊聊elemen-ui组件库Element,一套为开发者、设计师和产品经理准备基于 Vue 2.0 桌面端组件库最近我做项目几乎都管理系统,所以,为了节省时间,开始使用---element-ui。一个简单管理系统来说,...
  • 今天我们来聊聊elemen-ui组件库Element,一套为开发者、设计师和产品经理准备基于 Vue 2.0 桌面端组件库最近我做项目几乎都管理系统,所以,为了节省时间,开始使用---element-ui。一个简单管理系统来说,...
  • vue中我们经常会使用一些第三方的组件库,可以达到快速搭建项目界面布局的效果,无非就是用什么组件库的问题。 但是,不管我们使用element ui、vuetify或是别的什么组件库,修改样式必不可少的一个工作。 针对公司...
  • 前端一个一直在发展名词,从最初刀耕火种时代页面仔到文艺复兴时期前端工程化再到如今新时代大前端,前端技术在某种...至于为什么要用组件库我想应该体验了,用户使用体验以及开发人员开发体验,用...
  • 一、先创建一张空白网页index.html,在head标签里设置好vue的链接。二、写一个绑定元素div,一个子组件,一个父组件,父组件与元素div绑定。三、我们写子组件的模板,并在div内调用它,看看是否有效果。你会发现...
  • 轻量,可靠移动端Vue组件库;有赞前端团队出品(微商产品公司);https://github.com/youzan/vant,可以进入文档官方网站。(bootstrap?是什么?这个都没学过,将来可怎么办啊(๑˙ー˙๑)!) 建议把精力放在业务层,...
  • 听到计数器这个名字很多人是不是一瞬间没有什么印象, 毕竟这个组件比较少,就是那种左边一个’-‘右边一个’+’, 控制某些数量时候才会用到, 比如我之前做商城小程序只有’下单’页面规格弹出框里面才有他...
  • 其实,目前来说,也只有HEYUI组件库是这种方式尝试者,这也是我在设计组件库过程中,慢慢思考成果。 所以,关于这一种定义,还没有人运用过。 当然,这也是HEYUI区别于其他组件库很重要一点。 不熟悉HEYUI...
  • 2018年最应该关注11个vue.js组件库

    万次阅读 2017-12-23 12:42:40
    2018年,这里统计有11个常用的vue.js组件库,它们最有可能出现在你下一个vue.js应用程序UI中。Vue.js, React and Angular NPM 2017下半年下载情况不同于React和Angular,Vue.js由Evan You通过人们进行项目资助...
  • 相信在使用Vue进行项目开发时候很多人会接触到vue组件,最常见就是我们使用element-ui组件库,用起来确实很方便,大大减少了我们开发时间。在一个项目中其实有很多可复用代码块,如果我们可以把这些内容...
  • 因为我们只注意到了作为组件库的源代码,而忘了我们文档通过 vuepress 编译,即底层也基于 webpack 进行打包。所以 sideEffects 中也要加上文档中文件。 组件文档该写些什么? 在编写组件库文档时,有两个必...
  • Vue组件库实现按需加载功能

    千次阅读 2019-08-26 14:24:48
    文章目录简述示例原理babel-plugin-componentelement-ui按需引入babel-plugin-import组件分开打包以及全部打包组件分开打包组件全部打包入口测试按需引入 ...一个系统的登录页,需要的组件是非常少的...
  • 相信在使用Vue进行项目开发时候很多人会接触到vue组件,最常见就是我们使用element-ui组件库,用起来确实很方便,大大减少了我们开发时间。在一个项目中其实有很多可复用代码块,如果我们可以把这些内容...
  • 之前说了好久的组件库终于 要和大家见面了,这里主要平时在项目中的总结,然后加以分装,也方便大家一起用。这个组件库主要基于vue + typeScript 的框架进行开发的, 主要用于vue 工程中;虽然界面比较丑,没什么...
  • 因为我们只注意到了作为组件库的源代码,而忘了我们文档通过 vuepress 编译,即底层也基于 webpack 进行打包。所以 sideEffects 中也要加上文档中文件。组件文档该写些什么?在编写组件库文档时,有两个必不...
  • 虽然基于京东业务累计生成UI库,但是由于移动端视觉规范和交互效果大体类似,且这个组件库可以很好地做到按需引入,并不会引起资源浪费。目前,线上运行稳定版本2.*,正在开发基于Vue3.0版本,开发团队...
  • 什么是VueVue是一套用于构建用户界面渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 核心只关注视图层,不仅易于上手,还便于与第三方或既有项目整合这官网给出介绍,可能...
  • Vuex 一个专为 Vue.js 应用程序开发状态管理模式。它采用集中式存储管理应用所有组件的状态,并以相应规则保证状态以一种可预测方式发生变化。Vuex 也集成到 Vue 官方调试工具 devtools extension,提供...
  • 一、先创建一张空白网页index.html,在head标签里设置好vue的链接。二、写一个绑定元素div,一个子组件,一个父组件,父组件与元素div绑定。三、我们写子组件的模板,并在div内调用它,看看是否有效果。你会发现...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,331
精华内容 532
关键字:

vue的组件库是什么

vue 订阅