feat(scripts): add generate scripts

Author: gywgithub

.prettierrc.json

@@ -2,5 +2,6 @@
     "singleQuote": true,
     "semi": false,
     "printWidth": 200,
-    "trailingComma": "none"
+    "trailingComma": "none",
+    "arrowParens": "always"
 }

package.json

@@ -8,7 +8,9 @@
     "dev": "npm run lint & vue-cli-service serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "new:view": "node ./scripts/generateView/index",
+    "new:comp": "node ./scripts/generateComponent/index"
   },
   "dependencies": {
     "vue": "^2.6.6",

scripts/generateComponent/index.js

@@ -0,0 +1,92 @@
+// index.js`
+const chalk = require('chalk')
+const path = require('path')
+const fs = require('fs')
+const resolve = (...file) => path.resolve(__dirname, ...file)
+const log = message => console.log(chalk.green(`${message}`))
+const successLog = message => console.log(chalk.blue(`${message}`))
+const errorLog = error => console.log(chalk.red(`${error}`))
+const {
+  vueTemplate
+} = require('./template')
+
+const generateFile = (path, data) => {
+  if (fs.existsSync(path)) {
+    errorLog(`${path}文件已存在`)
+    return
+  }
+  return new Promise((resolve, reject) => {
+    fs.writeFile(path, data, 'utf8', err => {
+      if (err) {
+        errorLog(err.message)
+        reject(err)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+log('请输入要生成的组件名称、如需生成全局组件，请加 global/ 前缀')
+let componentName = ''
+process.stdin.on('data', async chunk => {
+  const inputName = String(chunk).trim().toString()
+  /**
+   * 组件目录路径
+   */
+  const componentDirectory = resolve('../../src/components', inputName)
+
+  /**
+   * vue组件路径
+   */
+  const componentVueName = resolve(componentDirectory, 'index.vue')
+
+  const hasComponentDirectory = fs.existsSync(componentDirectory)
+  if (hasComponentDirectory) {
+    errorLog(`${inputName}组件目录已存在，请重新输入`)
+    return
+  } else {
+    log(`正在生成 component 目录 ${componentDirectory}`)
+    await dotExistDirectoryCreate(componentDirectory)
+    // fs.mkdirSync(componentDirectory);
+  }
+  try {
+    if (inputName.includes('/')) {
+      const inputArr = inputName.split('/')
+      componentName = inputArr[inputArr.length - 1]
+    } else {
+      componentName = inputName
+    }
+    log(`正在生成 vue 文件 ${componentVueName}`)
+    await generateFile(componentVueName, vueTemplate(componentName))
+    successLog('生成成功')
+  } catch (e) {
+    errorLog(e.message)
+  }
+
+  process.stdin.emit('end')
+})
+process.stdin.on('end', () => {
+  log('exit')
+  process.exit()
+})
+
+function dotExistDirectoryCreate (directory) {
+  return new Promise((resolve) => {
+    mkdirs(directory, function () {
+      resolve(true)
+    })
+  })
+}
+
+// 递归创建目录
+function mkdirs (directory, callback) {
+  var exists = fs.existsSync(directory)
+  if (exists) {
+    callback()
+  } else {
+    mkdirs(path.dirname(directory), function () {
+      fs.mkdirSync(directory)
+      callback()
+    })
+  }
+}

scripts/generateComponent/template.js

@@ -0,0 +1,23 @@
+// template.js
+module.exports = {
+  vueTemplate: compoenntName => {
+    return `<template>
+  <div class="${compoenntName}">
+    ${compoenntName}组件
+  </div>
+</template>
+<script>
+export default {
+  name: '${compoenntName}',
+  data () {
+    return {}
+  },
+  methods: {}
+}
+</script>
+<style lang="scss" scoped>
+
+</style>
+`
+  }
+}

scripts/generateView/index.js

@@ -0,0 +1,88 @@
+i// index.js
+const chalk = require('chalk')
+const path = require('path')
+const fs = require('fs')
+const resolve = (...file) => path.resolve(__dirname, ...file)
+const log = message => console.log(chalk.green(`${message}`))
+const successLog = message => console.log(chalk.blue(`${message}`))
+const errorLog = error => console.log(chalk.red(`${error}`))
+// 导入模板
+const {
+  vueTemplate
+} = require('./template')
+// 生成文件
+const generateFile = (path, data) => {
+  if (fs.existsSync(path)) {
+    errorLog(`${path}文件已存在`)
+    return
+  }
+  return new Promise((resolve, reject) => {
+    fs.writeFile(path, data, 'utf8', err => {
+      if (err) {
+        errorLog(err.message)
+        reject(err)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+log('请输入要生成的页面组件名称、会生成在 views/目录下')
+let componentName = ''
+process.stdin.on('data', async chunk => {
+  // 组件名称
+  const inputName = String(chunk).trim().toString()
+  // Vue页面组件路径
+  const componentPath = resolve('../../src/views', inputName)
+  // vue文件
+  const vueFile = resolve(componentPath, 'index.vue')
+  // 判断组件文件夹是否存在
+  const hasComponentExists = fs.existsSync(componentPath)
+  if (hasComponentExists) {
+    errorLog(`${inputName}页面组件已存在，请重新输入`)
+    return
+  } else {
+    log(`正在生成 component 目录 ${componentPath}`)
+    await dotExistDirectoryCreate(componentPath)
+  }
+  try {
+    // 获取组件名
+    if (inputName.includes('/')) {
+      const inputArr = inputName.split('/')
+      componentName = inputArr[inputArr.length - 1]
+    } else {
+      componentName = inputName
+    }
+    log(`正在生成 vue 文件 ${vueFile}`)
+    await generateFile(vueFile, vueTemplate(componentName))
+    successLog('生成成功')
+  } catch (e) {
+    errorLog(e.message)
+  }
+
+  process.stdin.emit('end')
+})
+process.stdin.on('end', () => {
+  log('exit')
+  process.exit()
+})
+
+function dotExistDirectoryCreate (directory) {
+  return new Promise((resolve) => {
+    mkdirs(directory, function () {
+      resolve(true)
+    })
+  })
+}
+// 递归创建目录
+function mkdirs (directory, callback) {
+  var exists = fs.existsSync(directory)
+  if (exists) {
+    callback()
+  } else {
+    mkdirs(path.dirname(directory), function () {
+      fs.mkdirSync(directory)
+      callback()
+    })
+  }
+}

scripts/generateView/template.js

@@ -0,0 +1,23 @@
+// template.js
+module.exports = {
+  vueTemplate: compoenntName => {
+    return `<template>
+  <div class="${compoenntName}">
+    ${compoenntName}组件
+  </div>
+</template>
+<script>
+export default {
+  name: '${compoenntName}',
+  data () {
+    return {}
+  },
+  methods: {}
+}
+</script>
+<style lang="scss" scoped>
+
+</style>
+`
+  }
+}