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 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
Javascript 键盘keyCode键码值表
Dec 24 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
js实现图片无缝滚动
Dec 23 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
js如何编写简单的ajax方法库
Aug 02 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
Apr 07 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中使用灵巧的体系结构
2006/10/09 PHP
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
Python flask框架端口失效解决方案
2020/06/04 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
全球速卖通西班牙站:AliExpress西班牙
2017/10/30 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
卫校中专生个人自我评价
2013/09/19 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
电子信息工程自荐信
2014/05/26 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书