• vue组件库的基本开发步骤


    市面上目前已有各种各样的UI组件库,比如 Element 和 iView,他们的强大毋庸置疑。但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了。

    为何要进行组件库开发?

    如果你所在的公司对于页面的样式没有什么要求,那么你只要随便拿一个组件库来用就行了,比如element、iView等等,不用再重复造轮子了;
    如果你目前只有个人用一个组件,或者是只对个别组件有要求,那么只要在你的工程里面开发一个.vue单文件组件就可以了;如果你的团队想要一个更加快速的开发方式,希望有一套一类应用的标准,并且对组件的样式有较高的要求,那么你就需要开发一个组件库了。

    开发组件库步骤:

    创建项目

    调整项目结构

    编写组件

    使用vue-cli-service库模式打包编译

    发布到npm

    开发步骤:

    第一步:创建一个项目

     第二步:创建完成项目之后,你就会在项目的根目录发现这样的界面,之后添加一个新的文件夹,名为packages,将src文件重命名为examples

     第三步:将项目拖到编译器中,在根目录创建一个vue.config.js文件

     

     第四步:创建packages文件夹中的所需文件,界面如下,编写组件

    其中:

    |-- datePicker      // 新编写的组件,以datepicker为例

    |-- theme-default   // 主题文件

    主题文件较为特殊,他作为单独的一个包进行发布引入,方便进行主题发布,后面再进行介绍。下面对datePicker进行介绍:

    第五步:

    datePicker.vue文件代码

    datePicker/index.js

      批量注册组件

    Package/index.js

    本地测试组件

    我们的组件以及编写完成,第一步先在本地进行测试:

    examples/main.js

    如何在浏览器中就可以看到我们的组件运行成功了,下一步就是要将我们的代码打包成npm库了,那么需要通过vue-cli3中vue-cli-service的库模式进行打包。

    执行 npm run build-lib

    修改package.json

    根目录添加.npmignore文件

    发布到npm下,只需要lib目录、package.json 和readme.md文件,所以需要忽略掉其他的目录
    .npmignore

    (.npmignore文件是一个隐藏文件,所以在编译器中不可见,在文件根目录添加如下代码:)

    examples/
    packages/
    public/
    vue.config.js
    postcss.config.js
    babel.config.js
    *.map

    登录npm (如果没有npm账号,可以去npm官网注册一个)

     

     最后登录npm官网查看,就成功啦!!!

     

    人生何其短,要笑的分外甜
  • 相关阅读:
    oracle 存储过程 技巧
    任何用户密码都能以sysdba角色登入
    DBA操作常用命令
    事务 脏数据
    Axis2 WebService(配置、发布、调用)
    C#接口
    纯CSS3实现的一些酷炫效果
    C#运算符大全_各种运算符号的概述及作用
    mvc图片上传到服务器
    C# .NET 基本概念
  • 原文地址:https://www.cnblogs.com/luoluo-snow/p/11636943.html
Copyright © 2020-2023  润新知