简介
create-vite-template 是基于 esbuild + commander + ejs 模板渲染进行开发脚手架,用于创建 vite4.x typescript5.x vite 开箱即用模板,致力于打造不同框架,多种生态,开箱即用的脚手架。
支持各种插件以及不同组件库的可拔插式选择,来帮助你快速从0搭建web应用的脚手架。
目前框架只支持 vue3.x + Vite4.x 其他框架正在开发中
快速开始
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中,减少模板的复杂程度,用最简单的方式,最终的目标是可以让大家可以快速搭建出属于自己或者公司的模板