一、文件介绍（部分）
- setting.js 项目有关信息设置
- permission.js（权限）前置导航守卫，负责路由前置守卫
二、Icon图标的解析
在做出分析前先对require.context()进行了解
- 概念 require.context是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块。
- 参数 require.context()接收三个参数
- directory {String} -读取文件的路径
- useSubdirectories {Boolean} -是否遍历文件的子目录
- regExp {RegExp} -匹配文件的正则
//核心三行代码
//require.context(目录，是否扫描子目录， 正则表达式）扫描某个目录下的文件，
const req = require.context('./svg', false, /\.svg$/) // 这里为false，则不扫描svg下面的子目录
const requireAll = rquireContext => requireContext.keys().map(requireContext)
<=>
const requireAll = requireComtext => requireContext.keys().map(item => requireContext(item))
requireAll(req)
- 封装全局组件
- 三行代码
- 插件svg-sprite-loader：打包所有svg到一个svg标签上，将svg名称作为symbol标签的属性。
三行核心代码
在vue.config.js中调用svg-sprite-loader插件。
调用方式
逐字稿：我们先定义一个常量req，然后通过require的context方法对svg文件夹下面的以svg结尾的文件进行全部扫描，得到一个包含所有svg的路径数组；即['./dashborad.svg'....]等。然后通过
const requireAll = requireContext => requireContext.keys().map(item => requireContext(item))
requierAll(res)这样的一段代码将所有路径转成对应的模块 module。然后配合 svg-sprite-loader这个插件
用进行调用。其中dashborad是svg文件名
