详解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'
}
</script>
<style lang="scss" scoped>
.zlj-comp-ct {

}
</style>

2:写组件的时候可能还要在components目录下面新建一个目录:xxx,里面是xxx.vue和index.js

比如myForm组件

// myForm.vue
<template>
 <div class="myForm-comp-ct">
 myForm组件
 </div>
</template>
<script>
export default {
 name: 'myForm'
}
</script>
<style lang="scss" scoped>
.myForm-comp-ct {

}
</style>
// index.js
import myForm from './myForm.vue'
export default myForm

每次都写这些代码,是不是很烦？

主角登场：auto-vue-file

安装

npm install auto-vue-file -g

使用

 auto-vue-file -c

结果

这样在components目录下面生成myForm文件

参数说明：

名称 说明 使用例子
component 创建一个vue组件, 默认在components目录下面 auto-vue-file -c 或 auto-vue-file --component
page 创建一个vue组件，默认在views目录 auto-vue-file -p 或 auto-vue-file --page
path 在指定目录创建vue组件，需要提供-c或-p参数 auto-vue-file -c --path ./src/haha 或 auto-vue-file -p --path ./src/haha

更多：

你也可以使用自己的vue模版文件，文件名为auto-vue-file.template.js，存放在项目根目录下面，内容如下

// template.js you can generate
// auto-vue-file.template.js
  module.exports = {
   vueTemplate: componentName => {
   return `<template>
   <div class="${componentName}-comp-ct">
   ${componentName}组件
   </div>
  </template>
  <script>
  export default {
   name: '${componentName}'
  }
  </script>
  <style lang="scss" scoped>
  .${componentName}-comp-ct {

  }
  </style>
  `
   },
   entryTemplate: componentName => {
   return `import ${componentName} from './${componentName}.vue'
  export default ${componentName}`}
  }

你也可以执行

auto-vue-file --init

自动生成该配置文件：auto-vue-file.template.js

然后改成你自己需要的样子。

总结

以上所述是小编给大家介绍的uto-vue-file:一个自动创建vue组件的包，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • Vue.js中用webpack合并打包多个组件并实现按需加载

    Vue.js中用webpack合并打包多个组件并实现按需加载

    前言 随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能

  • 详解如何制作并发布一个vue的组件的npm包

    前提:1.会vue基础,以及vue的组件(官网:https://cn.vuejs.org/v2/guide/components.html)相关的基础. 因为本文主要是讲如何把一个vue组件做成npm包并发布. 分为2大步骤: 一.按照相应格式写我们的vue代码(就如同写一个jquery插件时.有其固定的格式一样). 二.发布到npm上的流程 一.书写一个vue组件 不用脚手架,我们自己从头开始做起,因为脚手架会附带很多没用的东西. 就做一个最简单的vue组件:就是传入用户名字,页面打印出'he

  • Vue 表情包输入组件的实现代码

    Emotion 一个用于vue的表情输入组件 https://gitee.com/jiangliyue/vue_expression_input_module index是使用示例,emotion是组件代码(这里用的是微信表情包的地址,大家可根据需要修改) 下载安装启动项目查看效果 npm install npm run dev Emotion文件夹下Emotion文件说明 实现原理是根据字段对在线表情包图片进行匹配替换 代码中 img 标签的地址即为表情图片地址,可自己根据需求替换 mount

  • 基于Vue的文字跑马灯组件(npm 组件包)

    基于Vue的文字跑马灯组件(npm 组件包)

    一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HTML标准已经废弃了这个标签,现在工作上用的是Vue,所以想着能不能自己也发布一个基于Vue的文字跑马灯组件包,这样别人可以通过npm install ...就可以用,想想还有点激动,于是开始我的第一个npm组件之旅! 二.用npm发布一个包 有点惭愧,之前通过npm install ...安装pac

  • Vue组件大全包括（UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例)

    Vue是一款比较流行的JS库,本文为大家介绍一些Vue组件,包括UI组件,开发框架,服务端,辅助工具,应用实例,Demo示例等开源项目 一.Vue常用UI组件 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 iview ★5801 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★5517 - Vue 2的移动UI元素 vue-material ★2790 - 通过Vue Material和Vue 2

  • 如何将百度地图包装成Vue的组件的方法步骤

    如何将百度地图包装成Vue的组件的方法步骤

    (1)在index.html文件中引入百度地图 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=piXQ5CgHFqEefqCVbhhBFfe6HjF7l4zW "></script> (2)在webpack.base.conf.js文件内添加external选项,在module.exports内部,和entry平级: external

  • 详解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

  • 详解在Spring中如何自动创建代理

    详解在Spring中如何自动创建代理

    Spring 提供了自动代理机制,可以让容器自动生成代理,从而把开发人员从繁琐的配置中解脱出来 . 具体是使用 BeanPostProcessor 来实现这项功能. 1 BeanPostProcessor BeanPostProcessor 代理创建器的实现类可以分为 3 类: 类型 实现类 基于 Bean 配置名规则 BeanNameAutoProxyCreator 基于 Advisor 匹配规则 DefaultAdvisorAutoProxyCreator 基于 Bean 中的 Aspect

  • vue设计一个倒计时秒杀的组件详解

    简介: 倒计时秒杀组件在电商网站中层出不穷  不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的 核心思路: 1.时间不能是本地客户端的时间  必须是服务器的时间这里用一个settimeout代替 以为时间必须统一 2.开始时间,结束时间通过父组件传入,当服务器时间在这个开始时间和结束时间的范围内  参加活动按钮可以点击,并且参加过活动以后不能再参加, 3.在组件创建的时候 同步得到现在时间服务时间差,并且在这里边设置定时器,每秒都做判断看秒杀是否开始和结束, 4.在更新时间的函数中是

  • 一文详解Pinia和Vuex与两个Vue状态管理模式

    一文详解Pinia和Vuex与两个Vue状态管理模式

    目录 前言 安装 挂载 Vuex Pinia 修改状态 vuex Pinia Pinia解构(storeToRefs) getters Pinia Vuex modules Pinia Vuex 写在最后 前言 Pinia和Vuex一样都是是vue的全局状态管理器.其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia. 本文将通过Vue3的形式对两者的不同实现方式进行对比,让你在以后工作中无论使用到Pinia还是Vuex的时候都能够游刃有余. 既然我们要

  • django自定义非主键自增字段类型详解(auto increment field)

    1.django自定义字段类型,实现非主键字段的自增 # -*- encoding: utf-8 -*- from django.db.models.fields import Field, IntegerField from django.core import checks, exceptions from django.utils.translation import ugettext_lazy as _ class AutoIncreField(Field): description =

  • 详解使用Python写一个向数据库填充数据的小工具(推荐)

    一. 背景 公司又要做一个新项目,是一个合作型项目,我们公司出web展示服务,合作伙伴线下提供展示数据. 而且本次项目是数据统计展示为主要功能,并没有研发对应的数据接入接口,所有展示数据源均来自数据库查询, 所以验证数据没有别的入口,只能通过在数据库写入数据来进行验证. 二. 工具 Python+mysql 三.前期准备 前置:当然是要先准备好测试方案和测试用例,在准备好这些后才能目标明确将要开发自动化小工具都要有哪些功能,避免走弯路 3.1 跟开发沟通 1)确认数据库连接方式,库名 : 2)测

  • 详解通用webpack多页面自动导入方案

    详解通用webpack多页面自动导入方案

    目录 前言 思考 安装glob 创建工具类 getEntry getHtmlWebpackPlugin 二次封装 应用 前言 在之前,我写了一个webpack的模板.在平时我写栗子或者是写几个页面的时候会用到它.当这个模板需要多个页面时需要手动到webpack.config.ts文件中配置entry和HtmlWebpackPlugin,有点麻烦. 思考 我们项目中的页面都是存放在src/pages/*.html中的,我们可以搜索这里文件夹下的html文件我们可以利用node中的glob包中的.s

  • 详解C# WinForm如何实现自动更新程序

    详解C# WinForm如何实现自动更新程序

    目录 前言 开发环境 开发工具 实现代码 实现效果 前言 在C/S这种模式中,自动更新程序就显得尤为重要,它不像B/S模式,直接发布到服务器上,浏览器点个刷新就可以了.由于涉及到客户端文件,所以必然需要把相应的文件下载下来.这个其实比较常见,我们常用的微信.QQ等,也都是这个操作. 自动更新程序也分为客户端和服务端两部分,客户端就是用来下载的一个小程序,服务端就是供客户端调用下载接口等操作. 这里第一步先将服务端代码写出来,逻辑比较简单,使用xml文件分别存储各个文件的名称以及版本号(每次需要更

  • 详解负载均衡实现一个域名对应多个IP地址

    详解负载均衡实现一个域名对应多个IP地址 使用负载均衡实现,传统和常规做法,其他方式需要特殊处理.(dns轮询,或者自己做解析) 1.一个域名设定多个dns服务或者服务器进行解析,同一个域名的每个解析都指向不同的ip地址,这样应答快的dns优先进行解析,这样就能保证最快定向到指定的网站空间去.如果空间也存在不同地点的相同内容镜像,那么这种方式最适合,例如sohu全国都有服务器,就是这么干的,除非你指定要访问某个地方的服务器,否则默认转向最快的空间,因为内容是镜像自动同步的,内容上不存在差别,用户

  • 详解MySQL与Spring的自动提交(autocommit)

    1 MySQL的autocommit设置 MySQL默认是开启自动提交的,即每一条DML(增删改)语句都会被作为一个单独的事务进行隐式提交.如果修改为关闭状态,则执行DML语句之后要手动提交 才能生效. 查询当前会话的自动提交是否开启: mysql> show variables like 'autocommit'; +---------------+-------+ | Variable_name | Value | +---------------+-------+ | autocommit

随机推荐