2.0.0 • Published 4 years ago
coderdd v2.0.0
说明文档
coderdd
帮助快速开发前端的一个小型脚手架,主要功能是使用命令行避免一些重复的创建文件操作,参考了coderwhy
大佬的小工具
生成的模板采用的是vue3+ts
,使用SFC
新语法
1. 安装
npm install coderdd -g
2. 创建vue3组件
coderwhy addcpn componentName # 例如coderdd add user,默认会存放到src/components文件夹中
coderwhy addcpn componentName -d src/views/main # 也可以指定存放的具体文件夹
3. 创建vue3页面并配置路由
coderdd addpage pageName # 例如coderdd addpage user,默认会放到src/views/pageName(转小写)中,并且会创建src/router/pageName/pageName.ts
coderdd addpage pageName -d src/views/main # 也可以指定文件夹,但需要手动集成路由
4. 生成模板展示:
4.1 路由模板
// 路由懒加载
const dashboard = () => import('@/views/main/analysis/dashboard/dashboard.vue')
export default {
path: '/main/analysis/dashboard',
name: 'dashboard',
component: dashboard,
children: []
}
4.2 组件模板
<template>
<div>
<h2>{{ message }}</h2>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const message = ref("Hello dashboard")
</script>
<style scoped>
</style>