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

8,572 阅读4分钟

简介

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 演示

ripple-app.gif

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

FrameWork && Language

FrameWorkfinishFeature / Versionfinish
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 LibraryfinishFeature / Versionfinish
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
TDesignunplugin-vue-components
Varletunplugin-auto-import
tdesign-mobile-vue🚧 ❌unocss
Vant🚧 ❌vite-plugin-html✅ 🆕

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

image.png

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

image.png

- Element Plus 在线体验 - Element-Plus

image.png

- DevUI

image.png

- Arco Design

image.png

- T-Design

image.png

- Vuetify

image.png

- VarLet

image.png

支持 netlify 一键部署

部署在 Netlify

Deploy with Netlify

分步部署教程:

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

image.png

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

image.png

项目难点与未来展望

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中,减少模板的复杂程度,用最简单的方式,最终的目标是可以让大家可以快速搭建出属于自己或者公司的模板