v3-json-canvas-cli/lib/core/actions.js

这是一个帮助你快速创建vue的可视化拖拽项目的CLI

const {promisify}  = require("util")
const path  = require("path");

const download  = promisify(require("download-git-repo"))
const open  = require("open");

const {vueRepo} = require('../config/repo-config')
const {commandSoawn}  = require("../utils/terminal");
const {compile, writeToFile, createDeepFolder}  = require("../utils/utils");

// 创建项目
const createProjectAction = async (projectName) => {
  console.log('Is create project...')
  // 1.clone项目
  await download(vueRepo, projectName, { clone: true })

  console.log('Start installing dependencies...');
  // 2. 执行npm install
  const command =process.platform === 'win32' ? 'npm.cmd': 'npm'
  await commandSoawn(command, ['install'], {cwd: `./${projectName}`})
  
  // 打开浏览器
  open('http://localhost:8080')

  // 3. 执行npm run serve
  await commandSoawn(command, ['run', 'serve'], {cwd: `./${projectName}`})
}

// 创建空白的画布
const createCanvasAction = async (name, dest) => {
  // 2.编译ejs模板
  const result = await compile('page.vue.ejs', {name, lowerName: name.toLowerCase()})
  // 3.将result写入到.vue文件中
  if(dest.startsWith('/')) dest = dest.slice('1')
  // 查看文件夹是否存在
  await createDeepFolder(dest)
  // 组成文件的绝对路径
  const targetPath = path.resolve(dest, `${name}.vue`)
  // 4.写入对应的文件夹中
  writeToFile(targetPath, result)
}

// 创建json配置
// 需要在page文件夹下面创建一个文件夹,写入两个json文件
const createJsonAction = async (name, dest) => {
  if(name.startsWith('/')) name = name.slice('1')
  // 2.编译ejs模板
  const layoutJson = await compile('json.layout.ejs', {name})
  const mockJson = await compile('json.mock.ejs', {name})
  // 3.将result写入到.vue文件中
  const basePath = `src/json/${name}`
  // 查看文件夹是否存在
  await createDeepFolder(basePath)
  // 组成文件的绝对路径
  const layoutPath = path.resolve(basePath, `layout.json`)
  const mockPath = path.resolve(basePath, `mock.json`)
  // 4.写入对应的文件夹中
  writeToFile(layoutPath, layoutJson)
  writeToFile(mockPath, mockJson)
  // --------------------------------------------------------
  // 接下来查询该文件夹下面的所有文件创建一个路由的映射文件
}

module.exports = {
  createProjectAction,
  createCanvasAction,
  createJsonAction
}