通过npm或yarn自动生成vue组件的方法示例


Posted in Javascript onFebruary 12, 2019

不知道大家每次新建组件的时候,是不是都要创建一个目录,然后新增一个.vue文件,然后写template、script、style这些东西,如果是公共组件,是不是还要新建一个index.js用来导出vue组件、虽然有vscode有代码片段能实现自动补全,但还是很麻烦,今天灵活运用scripts工作流,自动生成vue文件和目录。

实践步骤

安装一下chalk,这个插件能让我们的控制台输出语句有各种颜色区分

npm install chalk --save-dev 
yarn add chalk --save-dev

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

新增一个generateComponent.js文件,放置生成组件的代码

新增一个template.js文件,放置组件模板的代码

template.js文件,里面的内容可以自己自定义,符合当前项目的模板即可

// template.js
module.exports = {
 vueTemplate: compoenntName => {
  return `<template>
 <div class="${compoenntName}">
  ${compoenntName}组件
 </div>
</template>

<script>
export default {
 name: '${compoenntName}'
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.${compoenntName} {

}
</style>

`
 },
 entryTemplate: `import Main from './main.vue'
export default Main`
}

generateComponent.js生成vue目录和文件的代码

// generateComponent.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 _ = process.argv.splice(2)[0] === '-com'

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)
   }
  })
 })
}

// 公共组件目录src/base,全局注册组件目录src/base/global,页面组件目录src/components
_ ? log('请输入要生成的组件名称、如需生成全局组件,请加 global/ 前缀') : log('请输入要生成的页面组件名称、会生成在 components/目录下')
let componentName = ''
process.stdin.on('data', async chunk => {
 const inputName = String(chunk).trim().toString()

 // 根据不同类型组件分别处理
 if (_) {
  // 组件目录路径
  const componentDirectory = resolve('../src/base', 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)
  }

  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)
  }
 } else {
  const inputArr = inputName.split('/')
  const directory = inputArr[0]
  let componentName = inputArr[inputArr.length - 1]

  // 页面组件目录
  const componentDirectory = resolve('../src/components', directory)

  // vue组件
  const componentVueName = resolve(componentDirectory, `${componentName}.vue`)

  const hasComponentDirectory = fs.existsSync(componentDirectory)
  if (hasComponentDirectory) {
   log(`${componentDirectory}组件目录已存在,直接生成vue文件`)
  } else {
   log(`正在生成 component 目录 ${componentDirectory}`)
   await dotExistDirectoryCreate(componentDirectory)
  }

  try {
   log(`正在生成 vue 文件 ${componentName}`)
   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()
  })
 }
}

配置package.json,scripts新增两行命令,其中-com是为了区别是创建页面组件还是公共组件

"scripts": {
  "new:view":"node scripts/generateComponent",
  "new:com": "node scripts/generateComponent -com"
 },

执行

npm run new:view // 生成页组件
  npm run new:com // 生成基础组件
  或者
  yarn run new:view // 生成页组件
  yarn run new:com // 生成基础组件

通过npm或yarn自动生成vue组件的方法示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈javascript语法和定时函数
May 03 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
js实现json数组分组合并操作示例
Feb 12 #Javascript
vue文件运行的方法教学
Feb 12 #Javascript
vue的for循环使用方法
Feb 12 #Javascript
JavaScript常用工具方法封装
Feb 12 #Javascript
vue组件开发props验证的实现
Feb 12 #Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 #Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 #Javascript
You might like
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
用一段js程序来实现动画功能
2007/03/06 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
python之Socket网络编程详解
2016/09/29 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
python使用插值法画出平滑曲线
2018/12/15 Python
python 输出所有大小写字母的方法
2019/01/02 Python
python爬虫之自制英汉字典
2019/06/24 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
Tensorflow获取张量Tensor的具体维数实例
2020/01/19 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
关键字throw与throws的用法差异
2016/11/22 面试题
学习决心书
2014/03/11 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
2014年施工员工作总结
2014/11/18 职场文书
优秀教师推荐材料
2014/12/16 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
悬空寺导游词
2015/02/05 职场文书
学校实习推荐信
2015/03/27 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP