Skip to content
On this page

Getting Started

Overview

Vite-CLI 帮助你快速搭建开箱即用模板 目前 alpha 版本 基于 Vite + Vue3 + Typescript 构建模板, 对模板进行不同程度优化,打造具备基础功能可自定义模板, 自由搭建开发项目

快速开始

  • 推荐使用 Pnpm 安装 Vite-CLI .
ts
npx create-vite-template@latest
  • 命令行输入 vite 查看是否安装成功

image.png

Create Vite App

( Rapid iteration of the version ) 🚧🚧

📖 Introduction

Create Vite App resolve Vite create starter template No need to configure Vite scaffolding templates quickly build vite3 development templates highly customized

🌈 Features

  • ⚛️ Support for multiple framework templates

  • 📦 Select the out-of-the-box package manager

  • 🚀 Various characteristics of the corresponding framework

  • ✨ Selection of various Ui frameworks, Theming and layout

  • 🍰 A variety of out-of-the-box Vite plugin options

📦 Installation

ts
npx create-vite-template@latest

🦄 Usage

ripple-app.gif

🤖 Feature Comparison

Currently, the template supports the following plugins The supported template presets are:

FrameWork

FrameWorkfinish
Vite3 Vue3🚧 ✅ 🆕
Vite3 React18🚧 ❌ 🆕
Nuxt🚧 ❌

Feature

Feature / Versionfinish
Vue-Router 4.x
Pinia 2.x
Eslint 8.x
Prettier 2.7.x
TypeScript 4.7.x
husky🚧 ❌
PWA🚧 ❌

UI Library

UI Libraryfinish
Element-Plus✅ 🆕
Naive-UI✅ 🆕
Vuetify-beta5✅ 🆕
DevUI✅ 🆕
Ant-design-vue✅ 🆕
arco-design✅ 🆕
TDesign
Varlet
tdesign-mobile-vue🚧 ❌
Vant🚧 ❌

Plugins

Feature / Versionfinish
Vuev3.2.x
Vitev3.0.0 🆕
@vitejs/plugin-vue-jsx
@vitejs/plugin-legacy
vite-plugin-inspect
vite-plugin-pwa
unplugin-vue-components
unplugin-auto-import
Unocss
rollup-plugin-visualizer
unplugin-icons
Vite-plugin-html✅ 🆕

🛫 Example With Theming

An example of executing dev after successful installation is as follows

  • Naive UI

image.png

  • Ant Design

image.png

  • Element Plus

image.png

  • Arco Design

image.png

  • DevUI

image.png

  • T-Design

image.png

  • Vuetify

image.png

  • Varlet

image.png

🌸 Credits

Released under the MIT License.