vue组件库的在线主题编辑器的实现思路

2020-06-16 06:50:35易采站长站整理

let fontsFolder = theme.folder('fonts')
// 遍历添加字体文件
let loopAdd = (_path, folder) => {
fs.readdirSync(_path).forEach((file) => {
let curPath = path.join(_path, file)
if (fs.statSync(curPath).isDirectory()) {
let newFolder = folder.folder(file)
loopAdd(curPath, newFolder)
} else {
folder.file(file, fs.readFileSync(curPath))
}
})
}
loopAdd(fontPath, fontsFolder)
// 编译后的css
let css = await huiComplier(data)
theme.file('index.css', css)
// 压缩
let result = await zip.generateAsync({
type: 'nodebuffer'
})
// 保存到本地
// fs.writeFileSync('theme.zip', result, (err) => {
// if (err){
// this.ctx.logger.warn('压缩失败', err)
// }
// this.ctx.logger.info('压缩完成')
// })
return result
}

至此,前端和后端的核心实现都已介绍完毕。

总结

本项目目前只是一个粗糙的实现,旨在提供一个实现思路,还有很多细节需要优化,比如之前提到的变量依赖问题,还有scss的解析合并方式,此外还有多语言、多版本的问题需要考虑。

到此这篇关于vue组件库的在线主题编辑器的实现思路的文章就介绍到这了,更多相关vue在线主题编辑器内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网!