Vue项目组件化工程开发实践方案


Posted in Javascript onJanuary 09, 2018

我们暂时给提取出来的脚手架取名叫vde-cli,通过vde-cli脚手架生成的组件库工程目录结构如下:

Vue项目组件化工程开发实践方案 

核心功能

组件库

工程的packages文件夹就是用来存放组件库里面的各种组件了,这里不需要通过手动创建文件的方式创建组件,直接通过一条创建组件的命令完成。每个组件都有一个单独的组件文件夹,组件文件夹下都至少包含"index.vue","example.vue","readme.md"这三个文件,这几个文件都是通过创建组件传递的参数加指定的模板生成,创建组件的命令如下:

npm run generate <componentName> <componentTitle>

两个参数分别是组件的名称和后面用来在文档和例子工程里显示的导航名称。

组件库的对外主文件是工程的src/index.js,只要是通过上面的命令创建的组件,这个文件都会自动更新(省去你手工更新的时间)

Doc文档工程

Doc文档工程就是用来展示你组件文档的一个小型单页面系统。组件的文档就是存放在每个组件文件夹下的readme.md文件,我们通过vue-markdown-loader去解析这个文件变成一个vue组件也页面中显示。在你通过上面指令创建组件的时候,会自动更新Doc文档工程的所有依赖组件的部分(不需要任何手工操作)

Example例子工程

Example例子工程跟Doc文档工程类似,用来展示你组件的例子的小型单页面系统,组件的例子就是存放在每个组件文件夹下面的example.vue文件。在通过指令创建组件的完毕,就可以在该文件里测试你写的组件了。

上面的文档工程和例子工程分别通过webpack-dev-sever起了一个对应的服务,添加组件和修改组件文件下的文件信息都会自动刷新这两个应用。

用一张图来表示整个大工程的流程图如下:

Vue项目组件化工程开发实践方案 

主要实现方式

上面已经介绍了整个大工程其实是由组件库、文档工程和例子工程组成的,当然最核心的东西还是组件了,所以一切还需要从创建组件开始说起:

所有的组件都存放在大工程的packages里面,也就是说packages是所有组件存放的根目录(跟组件配置信息相关)。 首先需要说明的是,每个组件文件夹都至少包含组件主文件(index.vue)、组件例子文件(example.vue)、组件文档文件(readme.md)这三个文件。每个组件所包含的这三个文件又是分别通过一个对应的模板文件生成,这三个模板格式可以根据自己的需求自定义,大致类似于:

Vue项目组件化工程开发实践方案Vue项目组件化工程开发实践方案Vue项目组件化工程开发实践方案

通过创建组件的命令传递两个参数,一个代表组件的名称(创建组件的文件夹名称),另外一个是组件的标题(用于文档工程和例子工程的导航名称显示)。有了这两个参数,我们就可以结合组件的模板文件生成对应的组件,然后将这些组件信息写入gen/route.json里面,因为文档工程和例子工程都非常依赖这些信息。 组件创建完毕有一个很重要的工作就是自动往文档工程里面注册新的组件信息(docs/main.js)和更新组件库的对外主文件(src/index.js),这两个文件也分别是通过模板生成的,模板格式分别如下:

Vue项目组件化工程开发实践方案 Vue项目组件化工程开发实践方案

使用

只需要四条命令就能开启一个自动化组件工程了:

1、全局安装vde-cli模块

npm install -g vde-cli

2、初始化工程

$ vde init <project-name>

3、安装所需要模块

$ npm install

4、启动项目

$ npm run start

然后整个工程就能运行起来了,应用的时候可以根据实际需求修改组件相关的模板和加入自己的组件库的其它配置信息就可以了。文档工程和例子工程的路由等信息都会在通过创建组件命令的时候自动更新,你在更改组件的文档和组件功能的时候,文档工程和例子工程都会实时更新。

实际项目接入

这里推荐使用npm link的方式,在项目里npm link本地用vde init的那个工程即可。

总结

以上所述是小编给大家介绍的Vue项目组件化工程开发实践方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
Jan 13 Javascript
js中文逗号转英文实现
Feb 11 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
javascript冒泡排序小结
Apr 10 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 #Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 #Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 #Javascript
详解webpack babel的配置
Jan 09 #Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 #Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 #Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 #Javascript
You might like
PHP新手上路(三)
2006/10/09 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
[js高手之路]寄生组合式继承的优势详解
2017/08/28 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
开工庆典邀请函范文
2014/01/16 职场文书
教育科研先进个人材料
2014/01/26 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
三八妇女节致辞
2015/07/31 职场文书
高三语文教学反思
2016/02/16 职场文书