简介

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

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

目前模板支撑插件如下， 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

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

– Ant Design 在线体会 – Ant-Design-Vue

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

– Element Plus 在线体会 – Element-Plus

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

– DevUI

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

– Arco Design

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

– T-Design

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

– Vuetify

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

– VarLet

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

支撑 netlify 一键布置

布置在 Netlify

分步布置教程：

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

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

  1. 根据装备自动填写好构建命令 单击 Deploy Site 按钮开端布置站点。然后就大功告成啦～

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

项目难点与未来展望

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中，削减模板的复杂程度，用最简略的方法，最终的目标是可以让大家可以快速建立出归于自己或者公司的模板