vite 分类

HTTP请求

pnpm add axios@latest

{
  "dependencies": {
    "axios": "^0.26.1",
    "throttle-debounce": "^3.0.1",
  }
}

熊黎龙2025/12/25大约 2 分钟

monorepo工程化

monorepo项目示例

2小时带你掌握“Monorepo”
vue-vben-admin GitHub
ts-monorepo GitHub
expo-monorepo-example GitHub

熊黎龙2025/12/24小于 1 分钟

element-plus 工程化搭建

vitesse-lite

npx degit antfu-collective/vitesse-lite my-vitesse-app
cd my-vitesse-app
pnpm install

熊黎龙2025/12/24小于 1 分钟

vant 工程化搭建

vant项目模板

npx tiged vue-zone/vue3-vant-mobile my-mobile-app
cd my-mobile-app
pnpm install

熊黎龙2025/12/24小于 1 分钟

vue项目搭建

https://cn.vuejs.org/guide/scaling-up/tooling.html
使用命令行创建项目：pnpm create vue@latest

一个基本的vue项目包：

{
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --build && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.25"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.2",
    "vite": "^7.2.4",
    "vite-plugin-vue-devtools": "^8.0.5"
  }
}

熊黎龙2025/12/7大约 4 分钟

vite教程

初始化vite项目

# --- 创建npm项目 ---
mkdir demo-vite ; cd demo-vite
pnpm init  # 初始化一个包

# --- 创建vite项目 ---
pnpm add -D vite@v8.0.0-beta.4
vim package.json
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite previeww"
    },
    
# vite是浏览器优先，vite的入口文件是 index.html
touch index.html
    <html>
        <body>
            <script type="module" src="./src/main.ts"></script>
        </body>
    </html>

touch src/main.ts
    console.log("hello world");

# 搭建完成，启动vite项目
pnpm build
pnpm dev

熊黎龙2025/12/6大约 2 分钟