简介

create-vite-template 是基于 esbuild + commander + ejs 模板渲染进行开发脚手架，用于创建 vite4.x typescript5.x vite 开箱即用模板，致力于打造不同框架，多种生态，开箱即用的脚手架。

支持各种插件以及不同组件库的可拔插式选择，来帮助你快速从0搭建web应用的脚手架。

目前框架只支持 vue3.x + Vite4.x 其他框架正在开发中

快速开始

GitHub地址

Node 版本 > 14.18.0

- 快速开始.

 npx create-vite-template@latest
复制代码

- 输入项目名称

🍰 Welcome Use Vite To Create Template! v0.23.14


? Project Name ? » project-name
复制代码

- 选择需要使用的框架 (目前只支持vue，其他框架正在赶来ing)

目标支持四套模板

? Choose your framework » - Use arrow-keys. Return to submit.
>   Vue
    React🚧🚧
    Nuxt🚧🚧
    Next🚧🚧
复制代码

- 选择包管理器

可以选择你需要使用的包管理器如果选择 pnpm yarn npm 会默认自动安装依赖，如果选择第一个不会自动安装

? Which package manager do you want to use ? » - Use arrow-keys. Return to submit.
>   Not Install (Manual installation)
    Pnpm
    Yarn
    Npm
复制代码

- vue全家桶与UI库（部分组件库支持主题化配置 ELment-plus Naive-ui Ant-design-vue）

支持多种组件库选择，以及 eslint prettier vue全家桶选择

√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
? choose UI frameWork » - Use arrow-keys. Return to submit.
>   Element Plus
    Vuetify3
    Naive UI
    Varlet Pc
    Ant Design Vue
    DevUI
    arco-design
    TDesign
    Vant
    tdesign-mobile-vue
复制代码

- 是否需要添加支持组件库主题化配置

? Add theming && layout to your project?  This item overrides some of the default configuration » No / Yes
复制代码

- 支持可选择的插件

可以选择多个插件, 对应模板就会提供好您选择插件的配置文件

? Custorm Your Plugins » - Space to select. Return to submit
( )   @vitejs/plugin-vue-jsx
( )   @vitejs/plugin-legacy
( )   vite-plugin-html
( )   unplugin-vue-components
( )   unplugin-auto-import
( )   unplugin-imagemin
( )   unplugin-icons
( )   Unocss
( )   vite-plugin-pwa
( ) ↓ vite-plugin-inspect
复制代码

- Demo 演示

目前模板支持插件如下， The supported template presets are:

FrameWork && Language

FrameWork	finish	Feature / Version	finish
Vite 4 Vue 3	✅ 🆕	Vue-Router 4.x	✅
Nuxt 3	🚧 ❌	Pinia 2.x	✅
Vite4 React 18	🚧 ❌	Eslint 8.x	✅
Nest 13	🚧 ❌	Prettier 2.7.x	✅
		TypeScript 5.x	✅

UI Library && Plugins

UI Library	finish	Feature / Version	finish
Element-Plus	✅ 🆕	@vitejs/plugin-vue-jsx	✅
Naive-UI	✅ 🆕	@vitejs/plugin-legacy	✅
Vuetify-beta5	✅ 🆕	vite-plugin-inspect	✅
DevUI	✅ 🆕	rollup-plugin-visualizer	✅
Ant-design-vue	✅ 🆕	unplugin-icons	✅
arco-design	✅ 🆕	vite-plugin-pwa	✅
TDesign	✅	unplugin-vue-components	✅
Varlet	✅	unplugin-auto-import	✅
tdesign-mobile-vue	🚧 ❌	unocss	✅
Vant	🚧 ❌	vite-plugin-html	✅ 🆕

- Naive UI 在线体验 - Naive-UI 🛫

- Ant Design 在线体验 - Ant-Design-Vue 🛫

- Element Plus 在线体验 - Element-Plus

- DevUI

- Arco Design

- T-Design

- Vuetify

- VarLet

支持 netlify 一键部署

部署在 Netlify

分步部署教程：

使用脚手架安装项目，发布到你的 github 上，前往 app.netlify.com/start 新建站点，选择你新建的项目，将其与 GitHub 帐户连接。

根据配置自动填写好构建命令单击 Deploy Site 按钮开始部署站点。然后就大功告成啦～

项目难点与未来展望

create-vite-template 灵感来自于 x-build, 通过使用 ejs 来进行模板的编译和渲染，可以高度定制化项目, 对代码层面的细节可以更加深入，从而不需要对每一种不同的框架， ui库，插件进行多套模板的维护

添加更多必要功能例如布局系统, 做到真正开箱即用！
使用 ejs 存在的问题，需要维护 ejs 模板可能你的代码就会变成这样，如果插件的数量越来越多，耦合的关系越来越复杂，维护的成本也会更高

import type { Plugin } from 'vite'
import vue from "@vitejs/plugin-vue"
<%- pluginImportStatement %>
<% if (components === 'vuetify') { -%>
  import vuetify from 'vite-plugin-vuetify'
<% } -%>

<% if (plugins.indexOf('vueComponents') !== -1) { -%>
  import {
    <%- ComponentResolver %>
   } from "unplugin-vue-components/resolvers"
<% } -%>
复制代码

还有一点就是依赖的更新，因为所有模板都由 ejs 编译，所以依赖的版本更新只能手动修改，目前做到的是读取配置文件

const elementPlus = {
  name: 'element-plus',
  version: '^2.3.0',
  stableVersion: '2.2.27',
  theme: true,
  unpluginResolver: 'ElementPlusResolver',
  useUnpluginResolver: true,
  dev: 'pro'
}
const antDesignVue = {
  name: 'ant-design-vue',
  version: '^3.2.14',
  stableVersion: '3.2.1',
  theme: true,
  unpluginResolver: 'AntDesignVueResolver',
  useUnpluginResolver: false,
  dev: 'pro'
}
const naiveUI = {
  name: 'naive-ui',
  version: '^2.34.3',
  stableVersion: '2.31.0',
  theme: true,
  unpluginResolver: 'NaiveUiResolver',
  useUnpluginResolver: true,
  dev: 'pro'
}
复制代码

const jsx = {
  name: '@vitejs/plugin-vue-jsx',
  version: '^3.0.1',
  stableVersion: '^2.0.0',
  stateMent: 'import VueJsx from "@vitejs/plugin-vue-jsx"',
  dev: 'dev'
}

const legacy = {
  name: '@vitejs/plugin-legacy',
  version: '^4.0.2',
  stableVersion: '^2.0.0',
  stateMent: 'import legacy from "@vitejs/plugin-legacy"',
  dev: 'dev'
}

const autoImport = {
  name: 'unplugin-auto-import',
  version: '^0.15.1',
  stableVersion: '^0.10.0',
  stateMent: 'import AutoImport from "unplugin-auto-import/vite"',
  dev: 'dev'
}

复制代码

编写脚本动态更新版本号

所以接下来的开发会在如何降低耦合度，把逻辑抽离到js中，减少模板的复杂程度，用最简单的方式，最终的目标是可以让大家可以快速搭建出属于自己或者公司的模板

基于vite 4.x 快速搭建开箱即用，高度可定制化模版脚手架

简介