✨✨ 一个快速生成功能全面的 vue3 || node-koa 模板脚手架
可用于windows/macOS/linux
打开终端命令行输入:
pnpm install covue -g
也可以使用npm
在你要创建项目的目录下打开终端命令行输入以下指令:
covue create <project_name>
选择要生成的项目模板:
PS E:\> covue create demo
? 🦄please choose a framework: (Use arrow keys)
> vue-core
node-koa
等待一段时间后,项目自动创建完成,并且已经下载好依赖。(node_modules)
进入项目:
cd <project_name>
使用编辑器打开文件(这里用vsc打开):
code .
然后输入以下指令开启项目:
pnpm run dev
vue3项目启动演示:
show:
vite v2.7.13 dev server running at:
Local: http://localhost:3000/ Network: use
--host
to exposeready in 553ms.
Options:
-V, --version output the version number
-c --coisini a coisini vue3 cli
-d --dest <dest> a destination folder
-f --framework <framework> your frameword
-h, --help display help for command
covue add <name> 默认在src/components/ 目录添加 <name>.vue 页面
或
covue add <name> -d <地址> 在指定的<地址>位置添加 <name>.vue 页面
例如: covue add navBar -d src/pages
页面模板:
<template>
<div class="<name>">
<h2> <name> </h2>
</div>
</template>
<script lang="ts" setup></script>
<style scoped>
.<name> {
}
</style>
该指令初衷为添加一个vue的组件,但是也可以在项目任意位置添加一个vue页面。
covue addpage <name> 默认在src/pages 目录添加<name>文件夹,文件夹中有三个文件,分别是page、type、router
或
covue addpage <name> -d <地址> 在指定的<地址>位置添加
page模板:
<template>
<div class="<name>">
<h2> <name> </h2>
</div>
</template>
<script lang="ts" setup></script>
<style scoped>
.<name> {
}
</style>
router模板:
const <name> = () => import('./<name>.vue')
export default {
path: '/<name>',
name: '<name>',
component: <name>,
children: [
]
}
type模板:
export interface I<name> {
}
covue addstore <name> 默认在src/store 目录添加<name>文件夹,文件夹中包含<name>.ts 和type.ts
或
covue addstore <name> -d <地址> 在指定的<地址>位置添加
页面模板为:
import { defineStore } from "pinia";
export const homeStore = defineStore("<name>", {
// data
state: () => {
return {};
},
// computed
getters: {},
// methods
actions: {},
});
type模板:
export interface I<name> {
}
│ .browserslistrc
│ .editorconfig
│ .gitignore
│ index.html
│ LICENSE
│ package-lock.json
│ package.json
│ README.md
│ tsconfig.json
│ vite.config.ts
│
├─.vscode
│ extensions.json
│
├─public
│ favicon.ico
│
└─src
│ App.vue
│ env.d.ts
│ main.ts
│
├─assets
│ logo.png
│
├─components
│ HelloWorld.vue
│
├─pages
│ ├─home
│ │ index.vue
│ │ router.ts
│ │ type.ts
│ │
│ ├─login
│ │ index.vue
│ │ router.ts
│ │ type.ts
│ │
│ └─notfound
│ index.vue
│ router.ts
│ type.ts
│
├─router
│ index.ts
│
├─service
│ index.ts
│
├─store
│ ├─home
│ │ home.ts
│ │ type.ts
│ │
│ ├─index
│ │ index.ts
│ │ type.ts
│ │
│ └─login
│ login.ts
│ type.ts
│
└─utils
Cache.ts
firstUpperCase.ts
本身的设计是为了方便自己开发, 减少项目搭建所用时间,该脚手架适用于任何场景,模板内容所包含的核心技术为当前最新的vue3及其配件,pinia和router4都是为vue3也就是vue-core量身打造的,配合热度高涨的vite项目打包工具,另外解决了跨域和本地存储问题,并适配axios,为前后端分离项目做好充分的准备。另外路由只是简单的将pages文件夹下所有的页面进行获取动态添加。
无法指定路径bug已修复,可以通过-d指令自由选择添加组件或页面的位置了。
添加了node-koa模板生成,为服务器的搭建也提供充足的便利。
│ .env
│ .gitignore
│ LICENSE
│ main.js
│ package-lock.json
│ package.json
│ README.md
│
├─app
│ config.js
│ database.js
│ main.js
│ router.js
│
├─controller
│ authorization.js
│ user.js
│
├─errors
│ error-types.js
│ error.js
│
├─keys
│ private.key
│ public.key
│
├─middleware
│ md5-crypto.js
│ verify.js
│
├─router
│ user.js
│
├─service
│ user.js
│
└─utils
pwd-handle.js
该模板的使用首先需要完成以下几个步骤:
pnpm(npm) run dev
该模板方便我们使用koa搭建后端服务器,初步功能已经集成完毕,为我们搭建项目提供便利,提高开发效率。较完善的处理了登录注册的一系列验证和功能,可以使我们尽快投入业务处理。