generateViewFiles.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. // generateView.js
  2. const chalk = require('chalk')
  3. const path = require('path')
  4. const fs = require('fs')
  5. const resolve = (...file) => path.resolve(__dirname, ...file)
  6. const log = message => console.log(chalk.green(`${message}`))
  7. const successLog = message => console.log(chalk.blue(`${message}`))
  8. const errorLog = error => console.log(chalk.red(`${error}`))
  9. const {jsFileTemplate,vueFileTemplate } = require('./templateForFiles')
  10. const generateFile = (path, data) => {
  11. if (fs.existsSync(path)) {
  12. errorLog(`${path}文件已存在`)
  13. return
  14. }
  15. return new Promise((resolve, reject) => {
  16. fs.writeFile(path, data, 'utf8', err => {
  17. if (err) {
  18. errorLog(err.message)
  19. reject(err)
  20. } else {
  21. resolve(true)
  22. }
  23. })
  24. })
  25. }
  26. log('请输入要生成的页面组件名称、会生成在 views/目录下')
  27. let componentName = ''
  28. process.stdin.on('data', async chunk => {
  29. const inputName = String(chunk).trim().toString()
  30. /**
  31. * Vue页面组件路径
  32. */
  33. let componentVueName = resolve('../src/views', inputName)
  34. let componentJsName = componentVueName+'.js'
  35. let componentLessName = componentVueName+'.less'
  36. let componentHtmlName = componentVueName+'.html'
  37. // 如果不是以 .vue 结尾的话,自动加上
  38. if (!componentVueName.endsWith('.vue')) {
  39. componentVueName += '.vue'
  40. }
  41. /**
  42. * vue组件目录路径
  43. */
  44. const componentDirectory = path.dirname(componentVueName)
  45. const hasComponentExists = fs.existsSync(componentVueName)
  46. if (hasComponentExists) {
  47. errorLog(`${inputName}页面组件已存在,请重新输入`)
  48. return
  49. } else {
  50. log(`正在生成 component 目录 ${componentDirectory}`)
  51. await dotExistDirectoryCreate(componentDirectory)
  52. }
  53. try {
  54. if (inputName.includes('/')) {
  55. const inputArr = inputName.split('/')
  56. componentName = inputArr[inputArr.length - 1]
  57. } else {
  58. componentName = inputName
  59. }
  60. log(`正在生成 vue 文件 ${componentVueName}`)
  61. await generateFile(componentVueName, vueFileTemplate(componentName))
  62. log(`正在生成 js 文件 ${componentJsName}`)
  63. await generateFile(componentJsName, jsFileTemplate(componentName))
  64. log(`正在生成 html 文件 ${componentHtmlName}`)
  65. await generateFile(componentHtmlName, '')
  66. log(`正在生成 less 文件 ${componentLessName}`)
  67. await generateFile(componentLessName, '')
  68. successLog('生成成功')
  69. } catch (e) {
  70. errorLog(e.message)
  71. }
  72. process.stdin.emit('end')
  73. })
  74. process.stdin.on('end', () => {
  75. log('exit')
  76. process.exit()
  77. })
  78. function dotExistDirectoryCreate (directory) {
  79. return new Promise((resolve) => {
  80. mkdirs(directory, function () {
  81. resolve(true)
  82. })
  83. })
  84. }
  85. // 递归创建目录
  86. function mkdirs (directory, callback) {
  87. var exists = fs.existsSync(directory)
  88. if (exists) {
  89. callback()
  90. } else {
  91. mkdirs(path.dirname(directory), function () {
  92. fs.mkdirSync(directory)
  93. callback()
  94. })
  95. }
  96. }