vue使用require.context,动态变量怎么办
在日常的功能练习和调试过程中，需要一个demo项目进行功能测试，由于频繁.vue页面的同时，又要再router.js文件里面注册路由，感觉有点无聊和枯燥。基于此出发点，考虑能否自动读取文件夹下的文件进行路由注册。
借鉴思路：
参考vue的功能基础组件的自动化全局注册，看到一个require.context方法，可以读取某个文件夹下的文件信息。因此考虑，使用这个方法，获取views文件夹下的.vue页面，文件夹名称作为路由名称
require.context的使用介绍：
一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
页面代码：
如下图示，views文件夹下的内容，都需要进行路由注册。
文件的路径有2种，（1）简单的vue功能页面，直接挂在views文件夹下；（2）复杂的页面，在views下在新建文件夹进行处理。
目前需要自动注册的路由页面，是针对“直接挂在views文件夹”下的页面。（因为views下的二级页面，暂时没有想到好的方案）

router/index.js页面代码
心路历程：
（1）一开始的想法，是想着用数组对象的方式定义好，路由名称和引入的路径地址，但是觉得还是不够自动化，新建.vue文件的时候还是需要手动添加；
（2）后来想到用使用require.context方法得到fileName，然后根据字符串裁减和拼接，得到我所需的url和文件相对路径；
例如： component: () =import(【变量】)，但是后来发现，import()里面，不能使用变量!!!!!!!!!
原因：根据es6module语法，由于import是静态执行，所以不能使用表达式和变量这些只有在运行时才能得到结果的语法结构。
（3）由由于import的使用限制，不能动态使用() =import的语法，因此在考虑，能否直接替换掉这种异步加载引入的写法。经过分析，得出pathConfig字段里面有一个属性的内容，是指定的vue页面的default模块内容。经测试，可以使用。
pathConfig的打印内容如下示：

（4）因此“views”文件夹下的".vue"文件，引入成功，并用变量routerAry存储起来，使用concat方法把其他需要手动注册的路由信息，连接起来，进行路由注册。
我想请问前端的大佬，为什么在vue 的data中定义的一个变量，在页面上都显示不了，不知道怎么回事，
首先 vue 中的变量要定义在 data 中
data () {
return {
value: '你的值'
}
}
在页面上可以使用双括号语法将value值显示出来
p{{value}}/p
这样子就会在你写的地方显示出如同
p你的值/p
一样的效果
Vue父组件向子组件传值 （props）、子组件改变父组件的值（$emit）
第一步：父组件中引入子组件
第二步：在components中注册子组件
第三步：将子组件挂载，并绑定传值用的变量
第四步： 在data中声明变量
第五步： 切换到子组件页面,用props接收父组件的传值
第一步：在父组件的data中声明需要改变的变量名称
第二步：通过$emit改变父组件的值，有两种方式： 传参、事件函数
第二步：在子组件标签上绑定参数
第三步：需要一个事件函数，将值通过$emit发出
第二步：在子组件标签上绑定事件名称,并通过事件接收传值
第三步：切换到子组件页面，通过事件函数将值通过$emit发出
vuedata外面申明的变量模板引擎可以用吗
分情况，Vue.js 允许开发者声明式地将DOM绑定至底层Vue实例的数据。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue能够只能地计算出最少需要重新玄滩多少组件，并把DOM操作次数减到最少。也可不用模板，直接写渲染(render)函数，使用可选的JSX语法。注意，不能使用 v-html 来符合局部模板，因为Vue不是基于字符串的模板引擎。反之，对于用户界面(UI)，组件更实用作为可重用和可组合的基本单位。