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获取复选框被选中的值
Mar 22 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
一百行JS代码实现一个校验工具
Apr 30 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
vue中created和mounted的区别浅析
Aug 13 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结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
python获取中文字符串长度的方法
2018/11/14 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
python地震数据可视化详解
2019/06/18 Python
Python绘制热力图示例
2019/09/27 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
python3的pip路径在哪
2020/06/23 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
电信专业应届生自荐信
2013/09/28 职场文书
教育学专业毕业生的自我评价
2013/11/21 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
银行工作检查书范文
2014/01/31 职场文书
应聘护士求职信
2014/07/21 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA