vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component


Posted in Javascript onApril 30, 2019

介绍

做前端的大家都知道通过 vue 开发的项目每次创建新组建的时候,都要新建一个目录,然后新增 .vue 文件,在这个文件中再写入 template 、 script 、 style 这些内容,虽然在写入的时候大家都有自己的自动补全共计,不过这些都是模板性的,每次都要这样重复操作,很麻烦有没有。

本文就是通过node来帮助我们,自动去执行这些重复操作,而我们只需要告诉控制台我们需要创建的组件名字就可以了。
本文自动创建的组件包含两个文件:入口文件 index.js 、vue文件 main.vue

vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

chalk工具

为了方便我们能看清控制台输出的各种语句,我们先安装一下 chalk

npm install chalk --save-dev

1. 创建views

在根目录中创建一个 scripts 文件夹

  • 在 scripts 中创建 generateView 文件夹
  • 在 generateView 中新建 index.js ,放置生成组件的代码
  • 在 generateView 中新建 template.js ,放置组件模板的代码,模板内容可根据项目需求自行修改

index.js

// 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,
  entryTemplate
} = 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, 'main.vue')
  // 入口文件
  const entryFile = resolve(componentPath, 'entry.js')
  // 判断组件文件夹是否存在
  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))
    log(`正在生成 entry 文件 ${entryFile}`)
    await generateFile(entryFile, entryTemplate(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()
    })
  }
}

template.js

// template.js
module.exports = {
  vueTemplate: compoenntName => {
    return `<template>
 <div class="${compoenntName}">
 ${compoenntName}组件
 </div>
</template>
<script>
export default {
 name: '${compoenntName}'
};
</script>
<style lang="stylus" scoped>
.${compoenntName} {
};
</style>`
  },
  entryTemplate: compoenntName => {
    return `import ${compoenntName} from './main.vue'
export default [{
 path: "/${compoenntName}",
 name: "${compoenntName}",
 component: ${compoenntName}
}]`
  }
}

1.1 配置package.json

"new:view": "node ./scripts/generateView/index"

如果使用 npm 的话 就是 npm run new:view
如果是 yarn 自行修改命令

1.2 结果

vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

2. 创建component

跟views基本一样的步骤

  • 在 scripts 中创建 generateComponent 文件夹
  • 在 generateComponent 中新建 index.js ,放置生成组件的代码
  • 在 generateComponent 中新建 template.js ,放置组件模板的代码,模板内容可根据项目需求自行修改

index.js

// 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,
  entryTemplate
} = 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, 'main.vue')
    /**
     * 入口文件路径
     */
  const entryComponentName = resolve(componentDirectory, 'index.js')
  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))
    log(`正在生成 entry 文件 ${entryComponentName}`)
    await generateFile(entryComponentName, entryTemplate)
    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()
    })
  }
}

template.js

// template.js
module.exports = {
  vueTemplate: compoenntName => {
    return `<template>
 <div class="${compoenntName}">
 ${compoenntName}组件
 </div>
</template>
<script>
export default {
 name: '${compoenntName}'
};
</script>
<style lang="stylus" scoped>
.${compoenntName} {
};
</style>`
  },
  entryTemplate: `import Main from './main.vue'
export default Main`
}

2.1 配置package.json

"new:comp": "node ./scripts/generateComponent/index"

  • 如果使用 npm 的话 就是 npm run new:comp
  • 如果是 yarn 自行修改命令

2.2 结果

vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

通过以上的 vue-cli3 优化,我们项目在开发的过程中就能非常方便的通过命令快速创建公共组件和其他页面了,在页面、组件比较多的项目中,可以为我们提高一些效率,也可以通过这样的命令,来控制团队内不同人员新建文件的格式规范。

总结

以上所述是小编给大家介绍的vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
前端主流框架vue学习笔记第一篇
Jul 26 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
微信小程序文章列表功能完整实例
Jun 03 Javascript
微信小程序时间戳转日期的详解
Apr 30 #Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 #Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 #Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 #Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 #Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 #Javascript
微信小程序常用赋值方法小结
Apr 30 #Javascript
You might like
两个php日期控制类实例
2014/12/09 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
ie 调试javascript的工具
2009/04/29 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
javascript中sort()的用法实例分析
2015/01/30 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
Django rest framework基本介绍与代码示例
2018/01/26 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
django框架自定义用户表操作示例
2018/08/07 Python
更新修改后的Python模块方法
2019/03/03 Python
Django logging配置及使用详解
2019/07/23 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
祖国在我心中演讲稿600字
2014/05/04 职场文书
2014年体育工作总结
2014/11/24 职场文书
百年孤独读书笔记
2015/06/29 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python