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 相关文章推荐
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
javascript关于继承解析
May 10 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 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 htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
php生成微信红包数组的方法
2019/09/05 PHP
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JQuery中DOM事件绑定用法详解
2015/06/13 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
Python实现的数据结构与算法之链表详解
2015/04/22 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
应届毕业生应聘自荐信
2013/12/07 职场文书
家长对孩子的评语
2014/04/18 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python