我的日常开发记录日志
首页
  • Laravel
  • Thinkphp
  • Swoole
  • Workman
  • php
  • HTML
  • CSS
  • JavaScript
  • Vue
  • ES6
  • 小程序
  • Mysql
  • Redis
  • Es
  • MongoDb
  • Git
  • Composer
  • Linux
  • Nginx
  • Docker
  • Vpn
  • 开发实战
  • 开发工具类
  • 友情链接
💖关于
💻收藏
  • 分类
  • 标签
  • 归档数据
GitHub (opens new window)

我的日常开发记录日志

never give up
首页
  • Laravel
  • Thinkphp
  • Swoole
  • Workman
  • php
  • HTML
  • CSS
  • JavaScript
  • Vue
  • ES6
  • 小程序
  • Mysql
  • Redis
  • Es
  • MongoDb
  • Git
  • Composer
  • Linux
  • Nginx
  • Docker
  • Vpn
  • 开发实战
  • 开发工具类
  • 友情链接
💖关于
💻收藏
  • 分类
  • 标签
  • 归档数据
GitHub (opens new window)
  • html

  • css

  • javascript

  • vue

    • Vue
    • vue3基本类型ref初始化
    • vue3中尖括号和冒号的使用细则
    • vue3中为什么使用const不使用let
    • vue3中watch和compute是
    • route-view的作用
    • 关于import使用问题
    • 顶层await的理解
    • js中的常见的异步操作
    • vue中use理解
    • vue中config使用
    • vue中的env环境使用
    • 在html中直接使用vue
    • vue3中setup
    • vue3中ref和reactive的区别
    • vue3中watch
    • vue3中vite-config
    • vue3中组件的props类型
    • vite创建项目
      • vite使用tailwindcss
    • 小程序

    • Es6

    • 前端
    • vue
    窝窝侠
    2024-11-15

    vite创建项目

    是的,当你使用 Vite 创建项目时,你可以选择使用不同的模板(template)。Vite 提供了多个预配置模板,可以帮助你快速开始开发。例如,常见的模板包括 Vue、React、Vanilla(纯 JavaScript),等等。

    # 1. 使用 Vite 创建项目时选择模板

    当你通过 Vite 创建一个新的项目时,可以通过 create vite 命令并指定模板来初始化项目。Vite 会为你设置一个基本的项目结构,并根据所选模板配置相关的依赖和配置文件。

    以下是创建不同类型项目时如何选择模板的命令:

    # Vue 项目

    npm create vite@latest my-vue-project --template vue
    
    1

    # Vue 3 + TypeScript 项目

    npm create vite@latest my-vue-ts-project --template vue-ts
    
    1

    # React 项目

    npm create vite@latest my-react-project --template react
    
    1

    # React + TypeScript 项目

    npm create vite@latest my-react-ts-project --template react-ts
    
    1

    # Vanilla JavaScript 项目(不使用框架)

    npm create vite@latest my-vanilla-project --template vanilla
    
    1

    # Svelte 项目

    npm create vite@latest my-svelte-project --template svelte
    
    1

    # Svelte + TypeScript 项目

    npm create vite@latest my-svelte-ts-project --template svelte-ts
    
    1

    # Lit 项目

    npm create vite@latest my-lit-project --template lit
    
    1

    # 2. 默认模板

    如果你不指定模板,Vite 会使用默认模板(通常是 vanilla 模板),这是一个基础的、没有框架依赖的 JavaScript 项目。

    npm create vite@latest my-project
    
    1

    # 3. Vite 官方支持的模板

    Vite 的官方文档提供了几种常见的模板,你可以在创建项目时选择:

    • Vue 3(包括 Vue 2 版本)
    • React(包括 React + TypeScript)
    • Vanilla(纯 JavaScript)
    • Svelte
    • Lit

    除了官方模板,你还可以在 Vite 的社区模板中找到其他由社区贡献的模板,适用于不同的框架和工具集。

    # 4. 自定义模板

    如果你有特殊需求,也可以自定义自己的模板或使用其他第三方提供的模板。在这种情况下,你可以将模板的配置文件和依赖项复制到你的项目中,或者通过 GitHub 等版本控制平台创建并管理自己的模板。

    # 总结

    Vite 在创建项目时支持多种模板,帮助你快速构建基于不同框架(如 Vue、React、Svelte 等)的项目。通过选择适当的模板,你可以省去手动配置和安装依赖的麻烦,直接开始开发。

    在线编辑 (opens new window)
    上次更新: 2025/02/25, 18:30:54
    vue3中组件的props类型
    vite使用tailwindcss

    ← vue3中组件的props类型 vite使用tailwindcss→

    最近更新
    01
    showprocess用法
    04-29
    02
    vue3中尖括号和冒号的使用细则
    04-29
    03
    sd使用
    02-22
    更多文章>
    🖥️

    © 2025窝窝侠 💌 豫ICP备20005263号-2 🛀 Theme by 💝 Vdoing && 小胖墩er

    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式
    ×