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

不知道大家每次新建组件的时候,是不是都要创建一个目录,然后新增一个.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 // 生成基础组件

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

(0)

相关推荐

  • vue组件开发props验证的实现

    使用props 在Vue中父组件向子组件中传送数据是通过props实现的,一个简单的使用props的例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Study</title> </head> <body> <div id="app"> <foo-component :

  • 实例分析编写vue组件方法

    vue组件的概念是变得越来越重要了噢.今天小编我就来给大家分享一下编写vue组件的经验噢. 1.首先引入vueJS框架并且在底部new一个vue实例便可得到一个组件了哦. vue实例本身就是一个最大的组件了噢. 2.然后可以在vue实例中使用template来编写组件的模板数据了哦. 3.接着整个vue实例就会绑定到div上面了哦.这样浏览器所呈现的便是整个组件的所有template的内容了. 4.但是一个大组件中是有许许多多不同的组件来进行开发的. 所以可以用vue.component来定义组

  • 详解vue引入子组件方法

    前端框架vue,在利用脚手架工具vue-cli创建前端项目时候,怎么引入组件呢?下面是详细的写法. 1.第一步,利用vue-cli创建一个vue前端项目,文件夹如下图 2.第二步,例子是在hom.vue界面引入子组件header.vue,如下图 3.第三步,给子组件header.vue命名一个全局的id, export default { name: 'HomeHeader' } 代码如下图 4.第四步,返回home.vue组件,引用header.vue组件代码如下图 HomeHeader 对应

  • Vue 组件参数校验与非props特性的方法

    子组件接收父组件的参数的时候,props注册接收的参数 props:['count'] 子组件可以对接收的参数校验. 例如规定接收的count参数要求是String props:{ count:String } 如果count是别的类型就会报错 组件的参数校验 组件的参数校验指的是什么呢?你父组件向子组件传递的内容,子组件有权对这个内容进行一些约束,这个约束我们可以把它叫做参数的校验. <div id="root"> <child content="hell

  • vue组件之间数据传递的方法实例分析

    本文实例分析了vue组件之间数据传递的方法.分享给大家供大家参考,具体如下: 1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sexVal = '男'  把该值传递给 子组件(B.vue),如下: App.vue <template> <div id="app"> <!--<router-view>&

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

    不知道大家每次新建组件的时候,是不是都要创建一个目录,然后新增一个.vue文件,然后写template.script.style这些东西,如果是公共组件,是不是还要新建一个index.js用来导出vue组件.虽然有vscode有代码片段能实现自动补全,但还是很麻烦,今天灵活运用scripts工作流,自动生成vue文件和目录. 实践步骤 安装一下chalk,这个插件能让我们的控制台输出语句有各种颜色区分 npm install chalk --save-dev yarn add chalk --s

  • 详解利用jsx写vue组件的方法示例

    前言 本文主要给大家介绍的是关于利用jsx写vue组件,下面话不多说,来一起看看详细的介绍吧. 我们平常写vue的组件时,一般都是用的是模版,这种方式看起来比较简洁,而且vue作者也推荐使用这个方式,但是这种方式也有一些它的弊端,例如模版调试麻烦,或者在一些场景下模版描述可能没那么简单和方便. 下面我们要讲的是如何在vue里面写jsx,知道react的人应该都知道jsx,jsx的一个特性就是非常灵活,虽然有的人觉得jsx很丑陋,把逻辑都写到模版的感觉,但萝卜青菜各有所爱,适合自己适合团队的就是最

  • Spring Data Jpa 自动生成表结构的方法示例

    想在部署的时候随应用的启动而初始化数据脚本,这不就是Spring Data Jpa中的自动生成表结构,听起来特别简单,不就是配置Hibernate的ddl-auto嘛,有什么好说的,是个人都知道.当初我也是这样认为,实际操作了一把,虽然表是创建成功了,但是字段注释,字符集以及数据库引擎都不对,没想到在这些细节上翻车了. 毕竟开翻的车还要自己扶起来,于是在这记录一下. 注:本文中使用的Spring Data Jpa版本为2.1.4.RELEASE 以MySQL为例,我这边举个例子: import

  • python自动生成证件号的方法示例

    前言 在跟进需求的时候,往往涉及到测试,特别是需要用到身份信息的时候,总绕不开身份证号码这个话题.之前在跟一个互联网产品的时候,需要很多身份证做测试,又不想装太多软件自动生成(有需要的小伙伴可自行搜索身份证号码自动生成软件),按照身份证规则现编也比较浪费时间,在处理身份数据时,Python就非常有用了. 方法示例如下 # Author:BeeLe # -*-coding:utf-8-*- # 生成身份证号码主程序 import urllib.request import requests fro

  • 详解auto-vue-file:一个自动创建vue组件的包

    auto-vue-file auto create .vue file by shell command 通过终端自动创建vue文件 前言: 1: 我们在写xxx.vue页面文件的时候,一般都要写这些重复的代码: <template> <div class="zlj-comp-ct"> zlj组件 </div> </template> <script> export default { name: 'zlj' } </s

  • 使用 webpack 插件自动生成 vue 路由文件的方法

    一款自动生成 vue 路由文件的 webpack 插件 vue-route-webpack-plugin在项目中试点成功了,现在在项目中已经不需要再维护路由配置文件了,由插件自动生成,节省了大家维护路由的时间. 从长远来看,使用插件自动生成路由是具有一定好处的.当项目中的路由配置非常多的时候,为了区分业务,你可能需要分成许多个文件来存放这些路由文件,这样就不得不去维护这些路由文件. 比如这样的路由文件结构: |-src/ |-router/ index.js childrenRouter.js

  • 解析如何自动化生成vue组件文档

    目录 一.现状 二.社区解决方案 2.1.业务梳理 三.技术方案 3.1.Vue文件解析 3.2.信息提取 3.2.1.可直接获取的信息 3.2.2.需要约定的信息 四.总结 五.展望 一.现状 Vue框架在前端开发中应用广泛,当一个多人开发的Vue项目经过长期维护之后往往会沉淀出很多的公共组件,这个时候经常会出现一个人 开发了一个组件而其他维护者或新接手的人却不知道这个组件是做什么的.该怎么用,还必须得再去翻看源码,或者压根就没注意到这个组件 的存在导致重复开发.这个时候就非常需要维护对应的组

  • 可定制React自动完成搜索组件Turnstone实现示例

    目录 正文 特点 如何使用它 1.安装并导入Turnstone 2.基本使用方法 3.默认的组件道具 预览 正文 一个高度可定制的.易于使用的React自动完成搜索组件. 特点 轻量级的React搜索框组件 用可定制的标题将来自多个API或其他数据源的搜索结果分组 指定列表框选项的最大数量,以及每组的加权显示比例 用你自己的React组件完全定制列表框选项.添加图片.图标.额外的子选项.按组或索引的不同视觉处理等等...... 在输入的文本下面显示typeahead自动建议文本 使用各种CSS方

  • Vue自动构建发布脚本的方法示例

    简介 使用cross-env, scp2两个插件完成 cross-env cross-env这是一款运行跨平台设置和使用环境变量的脚本. 为什么需要cross-env? NODE_ENV=production 像这样设置环境变量时,大多数Windows命令提示符都会阻塞 .(Windows上的Bash是例外,它使用本机Bash.)同样,Windows和POSIX命令使用环境变量的方式也有所不同.对于POSIX,您可以使用: $ENV_VAR 和在Windows上可以使用 %ENV_VAR% .

  • VsCode中ctrl+s后会在当前目录下自动生成dist目录的方法

    在VsCode中ctrl+s后会在当前目录下自动生成dist目录 解决办法:关闭compile-hero插件 在设置中搜索compile-hero插件 关闭所有自动生成dist目录的选项(如下图所示) PS:下面看下vue项目Ctrl+s vscode代码自动格式化 前言 多人开发vue项目,代码风格形式不一 vscode保存代码,自动按照eslint规范格式化代码设置(vscode最新版配置) vscode插件 首先vscode需要装一些vscode插件 ESLint.Vetur.Pretti

随机推荐