在前端开发中可能会遇到将相同的功能模板集合成一个组件,供他人调用,这样可以减少重复造轮子,也可以节约人力、财力,更能够提高代码的可维护度;下面将通过详细的步骤教你如何构建一个Vue前端组件。

1、在本机上安装好NodeJs,并配置好环境变量

(1)NodeJs的下载地址:点击进入下载页面

我这里是下载64位Windows安装包(.msi),大家可以根据自己电脑系统选择相应的版本即可。

(2)下载NodeJs后双击它,采用默认设置,一直点击下一步,直到Finish为止。需要说明的是,在安装NodeJs时,已经设置好了系统环境变量,此外npm工具也同时被安装好了,我们可以在cmd窗口中输入node -v命令和npm -v命令查看,若都安装成功了话,会看到如下的效果:

(3)设置全局包存放路径,这里不采用默认路径,通过npm命令来实现目录的修改,我这里是将全局包存放目录放置在NodeJs的安装目录下:

  • 首先在NodeJs的安装根目录下创建两个文件夹:node_global和node_cache,前者是用来存放下载的全局包,后者是用来存放node的缓存
  • 在cmd窗口中分别输入这两条命令,完成对node_global和node_cache的设置:

npm config set prefix "E:\Program Files\nodejs\node_global"

npm config set cache "E:\Program Files\nodejs\node_cache"

最后我们可以通过npm config list命令查看一下刚才的配置,若有如下信息,则表明设置成功了。

以上就是NodeJs环境的安装和配置情况,若你的电脑之前已经安装好NodeJs,可以省略上面这些过程;接下来我们试试下载vue模块。

2、下载vue模块

(1)在cmd窗口中输入npm i -g vue命令,就可以等待下载vue模块了,此时可能会下载失败,如下图所示:

这是因为registry地址默认是https://registry.npmjs.org,被墙挡住了,翻过去的话有点麻烦,这个时候你可以采用淘宝的镜像地址https://registry.npm.taobao.org,在cmd窗口中输入npm config set registry "https://registry.npm.taobao.org" ,敲入回车键后没有任何提示就表明设置成功了,我们也可以通过npm config list命令来查看一下,如下图所示:

在设置好registry地址后,重试npm i -g vue命令,下载成功后如下图所示:

(2)为了能够使用vue命令,我们还的安装一下vue的脚手架vue-cli,在cmd窗口中输入npm i -g vue-cli,敲入回车键后就开始下载了,等到下载完成后会出现如下图的类似信息:

从上图中可知Vue CLI的版本是2.9.6。

3、开始创建组件库工程

(1)在cmd窗口中输入vue create bienVueCom,敲回车键后结果收到这样的提示信息,如下图所示:

原来是vue create命令只是Vue CLI 3版本的命令,Vue CLI 2.9.6版本不支持该命令;于是按照提示修改即可,首先在cmd窗口中输入npm uninstall -g vue-cli命令,卸载现有的vue-cli脚手架;等卸载完后再输入npm i -g @vue/cli开始安装,等待安装完后信息如下图所示:

(2)现在可以正式创建组件库工程了,在cmd窗口中输入vue create bienVueCom,回车后提示如下图所示:

既然工程名称不能包含大写字母,那么我们采用短横线来链接,如:bien-vue-com;修改好名称后按下回车键,后续的步骤就使用默认设置,若有需要就按回车键即可;接着就是静静地等待工程自动创建完毕。最终成功时的效果如下图所示:

我们进入bien-vue-com目录中,可以看到默认的工程目录结构如下图所示:

我们首先看看package.json文件的默认内容都有哪些配置参数,如下图所示:

针对这些默认配置项,基本上可以不用修改,不过为了能够向外部提供组件,须修改private字段的值为false,同时还需要新增main字段,它代表入口文件,指向最终编译后的包文件,在这里其值设置为“./dist/bien-vue-com.common.js”;此外,在scripts字段中新增一个命令脚本,如:"build-lib": "vue-cli-service build --target lib --name bien-vue-com ./src/index.js";在该命令中--target属性表示构建目标,默认为应用模式,这里需要设置为lib,表示启用库模式;--name属性表示构建的名称,可以与package.json文件中的name字段的值不相同;最后一个参数表示入口文件,默认为src/App.vue,在这里我们修改为了./src/index.js。最终的修改情况如下图所示:

接下来,我们在src目录下建立一个index.js文件,我们试着将componets/HelloWord.vue组件导出,而HelloWord.vue是构建工程时默认生成的。下图是index.js文件的内容:

在上图中可以看出导出的是ComponentsLib,若是还想导出其它的、自己创建的vue文件,可以类似于添加HelloWord组件一样进行添加。接着在bien-vue-com目录下打开cmd窗口,输入npm run build-lib命令,编译结果如下图所示:

在bien-vue-com的目录下会生成dist文件夹,其里面的文件如下图所示:

到此,组件已经完成构建了。

4、发布组件到npm

由于我没有弄具体的账号了,在这里说一下步骤吧,在bien-vue-com目录下打开cmd窗口。

(1)设置npm的registry地址:在cmd窗口中输入npm config set registry “需要发布的npm地址”

(2)使用账号登录npm:在cmd窗口中输入npm login,后续就按提示输入正确的信息即可。

(3)发布:在cmd窗口中输入npm publish,按下回车键即可。

5、测验组件库效果

我在另外一个前端工程中集成刚生成的组件,本来是需要通过npm命令来下载的,这里就不做下载处理了,直接将生成好的组件整理放在一个文件夹中,该文件夹的名称就是包名称,也就是package.json文件中name字段所对应的值,在这里就是bien-vue-com文件夹名称。将生成的dist文件夹拷贝到刚才新建的文件夹bien-vue-com,同时还需要将package.json和README.md文件也拷贝到bien-vue-com文件里,整体情况如下图所示:

接着将新建的bien-vue-com文件拷贝到目标工程的node_modules目录下,如下图所示:

然后在目标工程的package.json文件里找到dependencies配置项,在其中添加"bien-vue-com":"0.1.0"配置项,然后在目标工程的main.js文件中引入该组件,如下图所示:

最后,在目标工程中新建一个testView.vue文件,用来调用引入的组件,其内容如下图所示:

所有的配置都准备好后,此时就是运行目标工程,看看实际调用组件的效果,如下图所示:

自此,整篇文章已介绍完了如何构建组件库,如何使用组件库的全部流程了,基本上能够满足实际项目需求了。

6、调试组件库

开发过程中需要调试构建的组件库,为了能够让组件库编译好后直接输出到目标工程中的node_modules目录下,同时也为了能够支持目标工程实时看到更新组件库后的变化情况,我们可以在组件库中这样设置:

(1)在构建组件库的工程跟目录下建立一个vue.config.js文件,也就是让该文件与package.json文件处于同一级,如下图所示:

(2)在vue.config.js文件中新增如下内容:

(3)在组件库工程的package.json文件中添加脚本命令,如下图所示:

构建Vue前端组件库相关推荐

  1. 使用storybook构建vue前端组件库

    1.在指定文件夹初始化storybook项目 npx storybook init 2.使用storybook官方推荐脚手架 npx sb init --type vue 3.在package.js可 ...

  2. Vue前端组件库介绍

    kb-vue-components 组件库平台介绍 这里汇集大家常用的Vue组件, 并提供相应组件的使用教程. 方便你找到适合自己的组件,并快速上手使用. 开源项目地址: kb-vue-compone ...

  3. Bootstrap前端组件库+构建管理

    目录 构建管理 Grunt Sass JavaScript Bootstrap作为前端组件库 一些语法 媒体查询 辅助类 栅栏系统 补充 代码示例 媒体查询 网格系统 建立可伸缩的甚至是响应式组件的方 ...

  4. 从零实现Vue的组件库(零)- 基本结构以及构建工具

    今年三月份入职以来,一直在做后台运营系统,其中重复性工作有很多,其中组件库就是一项.尽管现阶段有很多优秀的开源组件库,但是为了适应产品奇奇怪怪的需求,还是要手动实现一些组件.将其沉淀下来,积累一些自己 ...

  5. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...

  6. 17款优秀的Vue UI组件库汇总

    17款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...

  7. Vue UI组件库总结推荐

    基于Vue的Quasar Framework 介绍 这个框架UI组件很全面,准备下次使用这个框架了 基于Vue的Quasar Framework 中文网 http://www.quasarchs.co ...

  8. 优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  9. 14 个最佳 Vue UI 组件库推荐

    Vue.js 是无数前端开发人员首选的 JavaScript 框架,因为它易于学习和使用. 组件是 Vue 框架的核心--它们可以帮助你更快地从想法转变为功能性 UI. 在这个集合中,您可以找到最好的 ...

最新文章

  1. 喜欢绘画学的计算机,为什么有的人画画非常好却对计算机一窍不通
  2. <Module>的类型初始值设定项引发异常
  3. cocos2d-x游戏开发(十五)游戏加载动画loading界面
  4. RTMPdump(libRTMP)源代码分析 4: 连接第一步——握手(Hand Shake)
  5. 两个tplink路由器有线桥接_tplink和腾达路由器有线桥接设置图解
  6. 构建之法:1、2、3章阅读后感
  7. springboot入门书籍推荐,“最粉嫩
  8. [JAVA] TicTacToe实现Socket通信(一)
  9. 并发重复请求,这才是优雅的处理方式!
  10. (Java笔记)静态代理
  11. mysql 设置字节最大长度_mysql整型存储字节与最大长度设置
  12. 10000+TB 阿里网盘资源!够过年了吧?
  13. aptana手动配置python环境_Aptana Studio 3配置Python开发环境图文教程
  14. bof - pwnable
  15. 灰狼优化算法--简单易懂附python代码
  16. c语言双目运算和单目运算符,单目运算符 双目运算符 三目运算符
  17. 从零学习VH6501(八) —— 采样点测试
  18. 媒体邀约得3个步骤和5个注意事项
  19. 如何培养小学生数学独立思考能力?
  20. python二次开发ug_Siemens NX (UG)中对于Python第三方包(函数库)的设置方法

热门文章

  1. php 10000并发服务器,求助 1000 并发量所需服务器配置
  2. 网络推广有哪些推广方式?网络推广怎么做到多渠道进行推广?
  3. 笔记(6) —— GPIO检测高低电平
  4. sencha touch 入门系列 (七)sencha touch 类系统讲解(上)
  5. 制作稳定版本的rootfs
  6. centos 7 opencv3 安装——yyw合并
  7. 【算法】实现打印汉字拼音首字母
  8. 手持端手机端移动端车牌识别介绍
  9. codesmith 7.0 破解
  10. ECharts饼状图lable显示Value所占百分比