crtp-cli v0.0.15-beta.2

crtp-cli

overview

管理模板文件/目录的工具。
目标：根据模板快速创建文件。

feature

• 初始化项目
• 初始化文件
  • 添加自定义模板文件（或目录）
  • 列出自定义模板文件（或目录）
  • 查询自定义模板文件（或目录）
  • 删除自定义模板文件（或目录）
• 内置默认配置项

install

npm i crtp-cli -g

usage

# 在指定目录创建一个指定的模板文件
crtp initFile readme.md --file ./first/readme.md
# 添加自定义的模板文件
crtp addFile first.json --file ./first/projName/package.json
# 为指定文件插入碎片
crtp insert button --file ./first/first.vue # 把碎片插入到defineCompnent定义的组件中
crtp insert button --file ./first/first.vue --grammerSugar setup # 把碎片插入到setup语法糖的组件中
# 添加自定义碎片
crtp addFragment mb --file ./first.cjs

configuration

暂时不需要它 默认配置文件：<root>/crtp.config.js

api

<>为必填项
[]为选填项

模板文件（或目录）

用于初始化文件。 已内置的模板文件：

• readme.md
• demo.md
• .gitignore
• vue3.vue 不使用setup语法糖的*.vue模板
• vue3Setup.vue 使用setup语法糖的*.vue模板

界碑说明

在内置的vue3Setup.vue文件中有若干注释，用于标记特定位置。在下文中称为界碑。 界碑是不能删除的。

vue3Setup.vue

<template>
    <div>MsBaseComp</div>
</template>

<script setup lang="ts">
    // utils                                        引入工具类方法
    import {
        ref,
        reactive,
        onMounted,
    } from 'vue'
    // components                                   引入组件
    // import { MsButton } from 'ms-ui'
    // check                                        引入校验方法
    // config                                       引入配置项
    // directives                                   引入指令
    // data                                         引入数据
    // hooks                                        引入钩子
    // import { useRouter } from 'vue-router'
    // type/interface                               引入类型
    // custom                                       本vue文件级的数据、方法等。
    let clog = console.log

    // defineOptions
    defineOptions({
        // name: '',                         组件名
        // inheritAttrs: false,
    })
    // directives                                   声明指令
    let props = defineProps({
        // fieldKey: {
        //     type: String,
        //     default: ''
        // },
    })
    // let emit = defineEmits(['eventName'])
    // inject                                       定义注入者
    // hooks                                        使用钩子
    // variable                                     定义变量
    // ref                                          定义响应式对象。ref/reactive
    let elementRef = ref()
    let boxR = reactive({})
    // computed                                     定义计算类对象
    // method                                       定义方法
    let init = () => {
        clog('init')
    }
    // provide                                      定义提供者
    // eventFn                                      定义事件的回调方法
    // watch                                        定义监听器。watch/watchEffect
    // lifeCircle                                   定义生命周期方法
    // exec
    onMounted(() => {
        init()
    })
    // expose
    // defineExpose({elementRef})                   暴露变量、响应式对象、计算类对象、方法、事件回调方法
</script>

<style lang="less" scoped>                          定义样式
</style>

vue3.vue

<template>                                          使用组件
    <div>MsBaseComp</div>
</template>

<script lang="ts">
    // utils                                        引入工具类方法
    import {
        defineComponent,
        ref,
        onMounted,
    } from 'vue'
    // components                                   引入组件
    // import { MsButton } from 'ms-ui'
    // check                                        引入校验方法
    // config                                       引入配置项
    // directives                                   引入指令
    // data                                         引入数据
    // hooks                                        引入钩子
    // import { useRouter } from 'vue-router'
    // type/interface                               引入类型
    // custom                                       本vue文件级的数据、方法等。

    export default defineComponent({
        name: 'MsBaseComp',                         组件名
        // components: {                            声明组件
        //     MsButton,
        // },
        // inheritAttrs: false,
        // directives                               声明指令
        props: {
            // fieldKey: {
            //     type: String,
            //     default: '',
            // },
        },
        // emits: ['blur'],
        setup() // props, ctx                       setup方法
        {
            // inject                               定义注入者
            // hooks                                使用钩子
            // variable                             定义变量
            // let clog = console.log
            // ref                                  定义响应式对象。ref/reactive
            let elementRef = ref()
            // computed                             定义计算类对象
            // method                               定义方法
            let init = () => {
                
            }
            // provide                              定义提供者
            // eventFn                             定义事件的回调方法
            // watch                                定义监听器。watch/watchEffect
            // lifeCircle                           定义生命周期方法
            onMounted(() => {
                init()
            })
            // exec                                 在setup中执行的方法
            return {
                // variable                         输出变量
                // ref                              输出响应式对象
                elementRef,
                // computed                         输出计算类对象
                // methods                          输出方法
                // eventFn                          输出事件回调方法
            }
        }
    })
</script>

<style lang="less" scoped>                          定义样式
</style>

碎片文件

适用范围

目标文件中有相关界碑。

字段说明

interface template {
    position: 'end' // 在template内的最后插入。当前只支持'end'.
    content: string // 插入的内容
}[]
interface script {
    position: 'setup.ref' // 在setup方法内的ref界碑处追加
     | 'setup.eventFn' // 在setup方法内的eventFn界碑处追加
     | 'setup.return.ref' // 在setup方法的return内的ref界碑处追加。只在非setup语法糖时有效。
     | 'setup.return.event' // 在setup方法的return内的eventFn界碑处追加。只在非setup语法糖时有效。
    //  | 'expose' // 在setup语法糖时使用defineExpose暴露相关属性。暂时不开放。
     | 'custom' // 在custom界碑处追加。一般不要在这里写代码。
    content: string
}[]
interface style {
    position: 'end' // 在style内追加。当前只支持'end'
    content: string
}[]
interface check {
    importUtils?: {
        [k: string]: string[]
    }
    importComponents?: {
        [k: string]: string[]
    }
    type?: {
        [k: string]: string[]
    }
    components?: string[]
}

配置文件

crtp.config.cjs 当前只运行一种格式

module.exports = {
    assets: "./assets",                        // 模板文件的目录
    fragment: "./fragment",   // todo 未使用它  // 碎片文件的目录
    npmClient: "npm",                          // 包管理器
    grammerSugar: "setup", // setup | 非setup  // 语法糖
}

principle

初始化项目

使用child_process调用npm init -y。现修改package.json。

操作模板文件

在此包的<root>/assets/中保存着模板文件。初始化时从此读取再写入指定位置。添加时从指定位置读取再写入此目录。

uml

暂无

todo

crtp-cli中的配置从配置文件中得到后与用户设置的配置合并后再使用。 使用loadFile引入文件（包括配置文件）。它是generator方法。 配置文件
在配置文件中为指定的模板文件设置插件列表。
为指定的基本设置插件。pluginFn(content) -> contentOther
使用配置文件中指定的包管理工具
可开发插件。 接入测试工具
本项目中基于各开发类框架开发。为它们提供配置文件。或在一个目录中统一管理配置文件，或…… 开发模块的顺序 支持 cli / js 验证配置文件是否正确