vue项目路由、组件优化及使用nodeJs自动创建文件
我们在使用Vue进行开发的过程中，每次都需要先创建路由，再在主文件中引入模块路由。如下：
// 目录结构
- router
--- index.js
--- modules
// 现在我们创建一条新路由
--- modules
----- layout.js
// layout.js
module.export [
{
name: '...'
path: '...',
component: () => import('@/views/modules/layout')
}
]
// 然后在index.js文件中引入 layout 模块的内容
import Layout from './modules/layout.js'
const mainRouter = {
path: '/',
componemt: () => import('@/views')
children: [
...Layout
]
}
这样每次创建后进行引入的方式，一方面重复性工作显得单调，另一方面，index.js中引入过多模块会导致代码看起来重复性太多，不够优雅。为此，我们可以尝试这样的思路：主路由文件只引入一个模块组件，然后这个组件帮助我们自动搜索引入它的上下文路由文件，这时候，我们就需要用到webpack提供的 require.context函数。
/*
* require.context 函数介绍
* 该函数允许你搜索上下文，从而获取上下文中的内容
* 接受三个参数
* directory: 文件路径
* useSubdirectories: 是否搜索其子文件
* regExp: 匹配文件的格式正则
*/
require.context(directory, useSubdirectories = false, regExp)
// 例如我们现在要获取 modules 文件夹中的路由文件，可以这样写
requrie.context('./', true, /\.js$/)
接下来进行实践。在modules文件夹中封装一个 index.js 文件，用来自动遍历上下文中的路由，这样之后，我们下次新创建的路由就可以不必去收到添加到主路由文件中了，交给这个封装函数即可。
// modules/index.js
const files = require.context('./', true, /\/js$/)
let routerList = [] // 存放收集到的路由
// keys函数执行后能获取到文件名称
files.keys().forEach(item => {
// 排除当前文件
if (item === './index.js') return
// item(key).default 获取文件内容
routerList = routerList.concat(item(key).default)
})
export default routerList
那么同理，我们也可以自动遍历组件文件进行注册
// modules/index.js
const files = require.context('./', true, /\/js$/)
// keys函数执行后能获取到文件名称
files.keys().forEach(item => {
// 排除当前文件
if (item === './index.js') return
const componentEntity = item(key).default
// 组件注册
Vue.component(componentEntity.name, componentEntity )
})
使用nodeJs自动创建文件
上文中使用 require.context 实现了对上下文内容的路由自动收集和全局组件的注册功能，但还是每次都得自己去一个个创建文件。而且，路由创建完毕之后，还得去创建视图文件，这也是属于重复性的工作，可否使用一种方式，让这一过程变自动化呢？查询了相关资料后发现，nodejs本来就可以。先创建两个模板，然后使用 fs 插件负责读写文件，讲模板内容写入到新文件中，使用path 插件查找文件路径，把文件安置在指定位置，这不就完成了自动化了吗。
为了美观，我们额外安装了chalk这个插件。该插件支持输出不同颜色的文字；例如：
// 输出绿色文字的Hello World
const chalk = require('chalk')
console.log(chalk.green('Hello World'));
交互方式可以这样设计。
- 首先在package.json 创建新模块的命令"new:view: 'node ./scripts/generatorView.js'"
- 创建
scripts/generatorView.js文件。
- 需要创建新模块时，使用
npm run new:view,然后输入模块名称就能创建相应的路由、视图还可以增加api文件.
演示效果
// generatorView.js
const path = require('path')
const fs = require('fs')
const chalk = require('chalk')
const reslove = file => path.resolve(__dirname, '../', file)
// 获取文件路径
const RouterSymbol = reslove('src/router/modules')
const ViewsSymbol = reslove('src/views/modules')
const apiSymbol = reslove('api')
// 打印函数封装
const errorLog = error => console.log(chalk.red(`${error}`))
const defaultLog = log => console.log(chalk.green(`${log}`))
// 视图层文件模板
const vueFile = module => (`<template>
<div class="${module}">
<h2>${module}</h2>
</div>
</template>
<script>
export default {
name: '${module}',
data () {
return {
}
},
methods: {
},
created () {
}
}
</script>
<style scoped>
</style>
`)
// 路由文件模板
const routerFile = module => (`
export default [
{
path: '/${module}',
name: '${module}',
component: () => import('@/views/modules/${module}/index')
}
]
`)
// api文件模板
const apiFile = module => (`
import instance from 'axios'
export const get${module}list = (params) => {
return instance.post('/', params)
}
`)
/**
* 生成文件函数
* @param {*} filePath 文件路径
* @param {*} content 文件内容
* @param {*} dirPath 文件夹路径
*/
const generateFile = async (filePath, content, dirPath = '') => {
try {
// 判断是否存在
if (dirPath !== '' && !await fs.existsSync(dirPath)) {
await fs.mkdirSync(dirPath)
defaultLog(`created ${dirPath}`)
}
if (!await fs.existsSync(filePath)) {
// create file
await fs.openSync(filePath, 'w')
defaultLog(`created ${filePath}`)
}
await fs.writeFileSync(filePath, content, 'utf8')
} catch (error) {
errorLog(error)
}
}
// map存储要创建的文件信息
const generates = new Map([
['view', async (module) => {
const filePath = path.join(ViewsSymbol, module)
const vuePath = path.join(filePath, '/index.vue')
await generateFile(vuePath, vueFile(module), filePath)
}],
['router', async (module) => {
const routerPath = path.join(RouterSymbol, `/${module}.js`)
await generateFile(routerPath, routerFile(module))
}],
['api', async (module) => {
const apiPath = path.join(apiSymbol, `/${module}.js`)
await generateFile(apiPath, apiFile(module))
}]
])
defaultLog(`请输入模块名称(英文)：`)
// 创建视图、路由和api三个文件
const files = ['view', 'router', 'api']
// 监听输入内容
process.stdin.on('data', (chunk) => {
try {
chunk = chunk.slice(0, -1) // 删除尾部多余换行符
defaultLog(`new module name is ${chunk}`)
files.forEach(async (el, index) => {
await generates.get(`${el}`)(chunk.toString())
if (index === files.length - 1) {
process.stdin.emit('end')
}
})
} catch (error) {
errorLog(error)
}
})
// 生成结束，退出流程
process.stdin.on('end', () => {
defaultLog('create module success')
process.exit(0)
})
结语
通过nodejs自动创建文件后，再结合require.context进行上下文收集。我们在创立新模块时，就可以直接进行页面开发即可。但这个创建方式只能对新路由在一级时管用，如果想在modules内的模块进行扩展，我们需要先读取该文件，然后在指定进行重写。
