通过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 相关文章推荐
Array的push与unshift方法性能比较分析
Mar 05 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
Angular排序实例详解
Jun 28 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 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 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
Symfony的安装和配置方法
2016/03/17 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
js中this用法实例详解
2015/05/05 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
JavaScript与Java正则表达式写法的区别介绍
2017/08/15 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
小程序实现投票进度条
2019/11/20 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
深入Python解释器理解Python中的字节码
2015/04/01 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
python中Apriori算法实现讲解
2017/12/10 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
python计算导数并绘图的实例
2020/02/29 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
Java程序员面试题
2016/09/27 面试题
地道战观后感400字
2015/06/04 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL