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 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
jquery ajax 登录验证实现代码
Sep 23 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
vue中的mvvm模式讲解
Jan 31 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
canvas多重阴影发光效果实现
Apr 20 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
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
PHP与Web页面的交互示例详解二
2020/08/04 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
Python 操作文件的基本方法总结
2017/08/10 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
Python中zip函数如何使用
2020/06/04 Python
python GUI模拟实现计算器
2020/06/22 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
C语言笔试集
2012/07/24 面试题
传播学专业毕业生自荐信
2013/11/04 职场文书
旅游项目开发策划书
2014/01/18 职场文书
高效课堂标语
2014/06/26 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
家属慰问信
2015/02/14 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书
2015年招生工作总结
2015/05/04 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
Mysql binlog日志文件过大的解决
2021/10/05 MySQL