生成一个模板页面

目录

前言

一、建立模板页面文件夹

二、开始实操

1.引入库

2.写下要生成的模板

3.创建页面

4 生成指令

 5 运行

总结

---

---

前言

前言

如果你做的页面有大量重复的或者很单一的增删改查，可以尝试着生成一个模板页面

---

一、建立模板页面文件夹

1.先建立一个你要生成的页面的文件夹这里叫buildPage/index.js,在里面在建立一个模板文件夹template/index.js

二、开始实操

1.引入库

npm i path chalk fs

2.写下要生成的模板

module.exports = {
可以在这里写一个Vue的模板和一个api的模板，这里只写Vue的
vueTemp: （name）=> {
如果需要对参数进行处理或者一些额外的可以写在这里
let className = name.split("").join('-')
return (`<div>我是要生成的模板页面，如果你需要参数请填写参数${className}</div>`)
}
}

3.创建页面

const chalk = require('chalk') 
// npm包chalk， 修改控制台中字符串的样式（字体样式加粗等／字体颜色／背景颜色），2/使用加粗+红色字+背景白色，如console.log(chalk`{red.bold.bgWhite Hello World}`)
const fs = require('fs') 

// require('fs') fs读文件中路径的处理,常用读fs.readFile写fs.writeFile
const resolve = file => path.resolve(process.cwd(), file) 
// path.resolve() 该方法将一些的 路径/路径段 解析为绝对路径。, 第一个路径源选填项，process.cwd()是指当前node命令执行时所在的文件夹目录,比如在D:/aaa/bb目录下执行 yarn build那么cwd就是D:/aaa/bb
// __dirname是指被执行js文件所在的文件夹目录 比如D:/aa/script

const path = require('path') // 路径

const successLog = message => console.log(chalk.red(`${message}`))
const errorLog = message => console.log(chalk.green(`${message}`))

// 导入模板
const {
    vueTemp
} = require('./template')
// 生成文件
const createFile = (pagepath, data) => {
    if (fs.existsSync(pagepath)) { // fs.existsSync以同步的方法检测目录是否存在。如果目录存在 返回 true ，如果目录不存在 返回false
        errorLog(`文件已存在`)
        return
    }
    return new Promise((resolve, reject) => {
        // 异步写入文件
        fs.writeFile(pagepath, data, 'utf8', err => {
            if (err) {
                errorLog(err.message)
                reject(err)
            } else {
                resolve(true)
            }
        })
    })
}

// 递归创建目录 同步方法
 // 利用fs.mkdirSync同步创建目录，这里目录是要一层一层创建的
 // mkdirSync 方法参数为一个目录的路径，没有返回值，在创建目录的过程中，必须保证传入的路径前面的文件目录都存在，否则会抛出异常。

function mkdirsSync(dirname) {
    if (fs.existsSync(dirname)) {
        return true;
    } else {
        if (mkdirsSync(path.dirname(dirname))) {
            fs.mkdirSync(dirname);
            return true;
        }
    }
}
let fileName = '/模块名/文件名/'
let page = '页面名'
let pagePath = `src/pages/${fileName}`
async function buildPages(pageName) {
    // 生成Vue文件
    let pagePath = resolve(`${pagePath}${pageName}.vue`) 
    await createFile(pagePath, vueTemplate({ // 该模板需要的参数
        pageName, // 页面名称
    }))
    successLog('生成成功')
}
// 递归创建文件
mkdirsSync(pagePath)
mkdirsSync(apiPath)
buildPages(page)

4 生成指令

package,json文件里 scripts里面写上指令就可以生成页面了

"page": "node ./buildPage/index.js"

 5 运行

npm run page

---

总结

比较单一的项目就可以直接copy一个页面去模板在进行修改成一个合适的模板，这样开发速度会快很多