现如今的开发,比如是内部使用的管理平台这种项目大都时间比较仓仓促。实际上来说在使用了webpack + vue 这一套来开发的话已经大大了提高了效率。但是对于我们的开发层面。还是有很多地方可以再次提高我们的项目开发效率,让我们更加专注于业务,毕竟时间就是生命。下面我们挨个来探讨。
巧用Webpack
Webpack
是实现我们前端项目工程化的基础,但其实她的用处远不仅仅如此,我们可以通过Webpack
来帮我们做一些自动化的事情。首先我们要了解require.context()
这个API
require.context()
您可以使用require.context()函数创建自己的上下文。 它允许您传入一个目录进行搜索,一个标志指示是否应该搜索子目录,还有一个正则表达式来匹配文件。
其实是Webpack
通过解析 require()
的调用,提取出来如下这些信息:
Directory: ./template Regular expression: /^.*\.ejs$/
然后来创建我们自己的上下文,什么意思呢,就是我们可以通过这个方法筛选出来我们需要的文件并且读取
下面我们来简单看一看使用:
/** * @param directory 要搜索的文件夹目录不能是变量,否则在编译阶段无法定位目录 * @param useSubdirectories 是否搜索子目录 * @param regExp 匹配文件的正则表达式 * @return function 返回一个具有 resolve, keys, id 三个属性的方法 resolve() 它返回请求被解析后得到的模块 id keys() 它返回一个数组,由所有符合上下文模块处理的请求组成。 id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到 */ require.context('demo', useSubdirectories = false, regExp = /\.js$/) // (创建了)一个包含了 demo 文件夹(不包含子目录)下面的、所有文件名以 `js` 结尾的、能被 require 请求到的文件的上下文。
不要困惑,接下来我们来探讨在项目中怎么用。
组织路由
对于Vue
中的路由,大家都很熟悉,类似于声明式的配置文件,其实已经很简洁了。现在我们来让他更简洁
分割路由
首先为了方便我们管理,我们把router
目录下的文件分割为以下结构
router // 路由文件夹 |__index.js // 路由组织器:用来初始化路由等等 |__common.js // 通用路由:声明通用路由 |__modules // 业务逻辑模块:所以的业务逻辑模块 |__index.js // 自动化处理文件:自动引入路由的核心文件 |__home.js // 业务模块home:业务模块 |__a.js // 业务模块a
内容版权声明:除非注明,否则皆为本站原创文章。