文件目录
|-- dir
|-- a.js
|-- b.js
|-- c.js
import { tinyImport } from 'tiny-import'
const requireList = tinyImport.importAll({
context: require.context('./dir'),
include: ['a', 'b']
})
requireList 等于
{
a: {},
b: {}
}
import { TinyImport } from 'tiny-import'
const tinyImport = new TinyImport({
exclude: 'index' // 全局排除所有index文件,例如index.js index.jpg
})
const requireList = tinyImport.importAll({
context: require.context('./dir),
include: ['a', 'b']
})
用于定义全局的筛选器, 可选的参数有 { exclude, include, excludePath, includePath }
排除某些文件名的文件(不包含文件后缀)
引入某些文件名的文件(不包含文件后缀)
排除 | 引入匹配文件路径的文件(包含文件后缀)
exclude(Path)和include(Path)可以同时使用,include(Path)具有优先级,即先引入,再排除
// 引入dir文件夹下的所有js文件,但是排除a.js
import { tinyImport } from 'tiny-import'
const requireList = tinyImport.importAll({
context: require.context('./dir'),
include: /.js$/,
exclude: 'a',
})
如果只需要引用一次,不需要全局筛选器,则可以直接使用tinyImport
tinyImport的默认规则:
import { tinyImport } from 'tiny-import'
const requireList = tinyImport.importAll({
context: require.context('./dir),
include: ['a', 'b']
})
context: 必填 引入的文件上下文,希望接受一个require.context()的值,详情查看
exclude(Path) | include(Path): 选填 和globleFilter一样, 表示当前引入的筛选器
key({ name, path })
key 方法使用示例
目录
|-- dir
|-- a.js
|-- b.js
|-- c.js
import { tinyImport } from 'tiny-import'
const requireList = tinyImport.importAll({
context: require.context('./dir'),
key: ({ name }) => name + name, // 将所有key变成key+key的类型
exclude: 'cc' // 注意,key方法的调用在exclude之前,所以如果要排除c.js,需要写'cc'
})
{
aa: {},
bb: {}
}
value 方法使用示例
目录
|-- dir
|-- a.js
|-- b.js
|-- c.js
import { tinyImport } from 'tiny-import'
const requireList = tinyImport.importAll({
context: require.context('./dir'),
value: ({ file }) => [file], // 每项都变成数组
})
{
a: [{}],
b: [{}],
c: [{}]
}
context
exclude
include
excludePath
key
value
noSub 注意,没有includePath参数,该参数会被覆盖
fileType: 文件后缀名 String
// 例如要引入所有png类型的文件
importAllType({
context: require.context('./dir'),
fileType: 'png'
})
预设的其他类型引入():
参数
// 例如想要定义一个方法,用于引入所有的.mbx文件
class TinyImport2 extends TinyImport{
importMbx(params) {
return this.importAllType({
...params,
fileType: 'mbx',
})
}
}
###下个版本想做的内容?
专为vue-router提供的插件,根据路由文件夹目录生成vue-router可用的路由表
我们通过给vue文件取特定格式的名称来指定路由类型,这一灵感来自于nuxt.js,但是略有不同
###使用示例
// 目录
|-- page
|-- ChildA.vue
|-- ChildB
|-- index.vue
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import { routeImport } from 'tiny-import'
Vue.use(VueRouter)
const routes = routeImport.importRoute({
context: require.context('../views'),
})
const router = new VueRouter({
routes,
})
export default router
// 路由
[
{
"path":"/childa",
"name":"ChildA",
"component":{
"name":"ChildA",
"components":{},
},
"children":[],
},
{
"path":"/childb",
"name":"ChildB",
"component":{
"name":"ChildB",
"components":{ },
},
"children":[],
}
]
引入路由
// router.js
// 当匹配到/根目录时,显示ChildA.vue
const routes = routeImport.importRoute({
context: require.context('../views'),
root: 'ChildA'
})
// 路由
[
{
"path":"/",
"name":"/",
"component":{
"name":"ChildA",
"components":{},
},
"children":[],
},
{
"path":"/childa",
"name":"ChildA",
"component":{
"name":"ChildA",
"components":{},
},
"children":[],
},
{
"path":"/childb",
"name":"ChildB",
"component":{
"name":"ChildB",
"components":{ },
},
"children":[],
}
]
没有任何特殊符号作为文件名的路由,例如ChildA, ChildB, PageA等 推荐使用大写字母开头,驼峰式,路由的path会被转换为小写字母,例如childa, childb, pagea
以:符号开头的路由,例如:DynamicB
这样,任意访问/123 的路由将会匹配到:DynamicB.vue,并且注入this.$route.params = { "dynamicb": "123" }
// 目录
|-- page
|-- ChildA.vue
|-- :id#DynamicB.vue
// 路由
[
{
"path":"/childa",
"name":"ChildA",
"component":{
"name":"ChildA",
"components":{},
},
"children":[],
},
{
"path":"/:dynamicb",
"name":"DynamicB",
"component":{
"name":"DynamicB",
"components":{ },
},
"children":[],
}
]
以:符号开头,含有#号的路由,例如:id#DynamicC.vue
这样,任意访问/123 的路由将会匹配到:id#DynamicC.vue,并且注入this.$route.params = { "id": "123" }
// 目录
|-- page
|-- ChildA.vue
|-- :id#DynamicC.vue
// 路由
[
{
"path":"/childa",
"name":"ChildA",
"component":{
"name":"ChildA",
"components":{},
},
"children":[],
},
{
"path":"/:id",
"name":"DynamicC",
"component":{
"name":"DynamicC",
"components":{ },
},
"children":[],
}
]
以@命名的路由,即@.vue,当没有任何路由匹配到时,会匹配到这个组件,一般用来设计404页面
// 目录
|-- page
|-- ChildA.vue
|-- ChildB.vue
|-- @.vue
// 路由
[
{
"path":"/childa",
"name":"ChildA",
"component":{
"name":"ChildA",
"components":{},
},
"children":[],
},
{
"path":"/childb",
"name":"ChildB",
"component":{
"name":"ChildB",
"components":{ },
},
"children":[],
},
{
"path":"*",
"name":"@",
"component":{
"name":"@",
"components":{ },
},
"children":[],
}
]
以文件夹的关系来表示嵌套关系
现在,访问/childb/subchilda将会匹配到SubchildA.vue 记得在ChildB组件内添加路由根节点
// 目录
|-- page
|-- ChildA.vue
|-- ChildB
|-- index.vue
|-- SubChildA.vue
// 路由
[
{
"path":"/childa",
"name":"ChildA",
"component":{
"name":"ChildA",
"components":{},
},
"children":[],
},
{
"path":"/:dynamicb",
"name":"DynamicB",
"component":{
"name":"DynamicB",
"components":{ },
},
"children":[
{
"path":"subchilda",
"name":"SubChildA",
"component":{
"name":"SubChildA",
"components":{},
},
"children":[
],
}
],
}
]
我们推荐把公用组件提取出,单独放在src/component文件夹下 但是仍然有某些组件,只在某些页面使用,我们把他称为该页面的私有组件
在tiny-import中,使用_开头的vue文件会被当做该文件夹下的私有组件,我们提供了importComponent方法,专门用于引入这些私有组件
// 目录
|-- page
|-- ChildA.vue
|-- ChildB
|-- index.vue
|-- SubChildA.vue
|-- _ComponentA.vue
|-- _ComponentB.vue
// 该_ComponentA(B)不会被添加到路由表中
// 在page/ChildB/index.vue中引入这些组件
import { routeImport } from 'tiny-import'
const components = routeImport.importComponent({
context: require.context('./')
})
export default {
name: 'ChildB',
components, // 注入组件
data() {
return {}
},
watch: {},
computed: {},
created() {},
methods: {}
}
// components 等于 :
{
ComponentA: {
name: "ComponentA",
components: { },
},
ComponentB: {
name: "ComponentB",
components: { },
}
}
|-- page
|-- :id#DynamicA.vue
|-- @.vue
|-- ChildA.vue
|-- ChildB
| |-- _ComponentB.vue
| |-- index.vue
| |-- _ComponentA
| |-- _ComponentC.vue
| |-- index.vue
|-- ChildC
|-- :id#DynamicSubChildC.vue
|-- @.vue
|-- SubChildA.vue
|-- SubChildB.vue
|-- index.vue
// 路由表
[
{
"path": "/",
"name": "/",
"component": {}
},
{
"path": "/childa",
"name": "ChildA",
"component": {},
"children": []
},
{
"path": "/childb",
"name": "ChildB",
"component": {},
"children": []
},
{
"path": "/childc",
"name": "ChildC",
"component": {},
"children": [
{
"path": "subchilda",
"name": "SubChildA",
"component": {},
"children": []
},
{
"path": "subchildb",
"name": "SubChildB",
"component": {},
"children": []
},
{
"path": ":id",
"name": "DynamicSubChildC",
"component": {},
"children": []
},
{
"path": "*",
"name": "@",
"component": {},
"children": []
}
]
},
{
"path": "/:dynamicb",
"name": "DynamicB",
"component": {},
"children": []
},
{
"path": "/:id",
"name": "DynamicA",
"component": {},
"children": []
},
{
"path": "*",
"name": "@",
"component": {},
"children": []
}
]
Copyright (c) 2020 Leo
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。