@kun/cli 自动生成Vue组件

自动生成vue文件【bete】

全局安装

npm install -g @jxstjh/kun-cli

使用说明

kun --help

创建单文件组件

kun home

将生成一个单文件Vue组件:

<template lang="html">
  <section class="home">
    <h1>home Component</h1>
  </section>
</template>

<script lang="js">
  export default  {
    name: 'Home',
    props: [],
    mounted() {

    },
    data() {
      return {

      }
    },
    methods: {

    },
    computed: {

    }
}
</script>

<style scoped lang="less">

</style>

新建单文件组件并且新建文件夹

kun home --folder

创建指令

kun -d my-directive

将自动生成:

MyDirective.directive.js

import Vue from 'vue'

Vue.directive('my-directive', {
  bind () {
    
  },
  inserted (el) {
    // el.focus();
  },
  update () {

  },
  unbind () {

  }
});

可以使用 -- postfix 来增加文件前缀

kun footer --postfix page

带前缀生成:

• Footer.page.js
• Footer.page.css
• Footer.page.html

生成普通js文件组件

kun -c view-top

会生成文件:

ViewTop.js

export default {
  name: 'ViewTop',
  props: [],
  mounted() {},
  data() {
    return {};
  },
  methods: {},
  computed: {}
};

ViewTop.html

<section class="view-top">
  <h1>view-top Component</h1>
</section>

ViewTop.less

.view-top {
}

index.vue

<template src="./ViewTop.component.html"></template>
<script src="./ViewTop.component.js"></script>
<style src="./ViewTop.component.less" scoped lang="less"></style>

切换自动生成文件的类型

sudo kun --html jade --style less --script ts --spec ts