【快速上手】使用 Vite 来创建一个 Vue 3项目

文章目录

  • [1. 前提条件](#1. 前提条件)
  • [2. 使用 Vite 创建 Vue 项目](#2. 使用 Vite 创建 Vue 项目)
  • [3. 项目结构说明](#3. 项目结构说明)
  • [4. 项目开发的基础操作](#4. 项目开发的基础操作)
    • [1. 添加新组件](#1. 添加新组件)
    • [2. 安装依赖](#2. 安装依赖)
  • [5. 打包和部署](#5. 打包和部署)
  • [6. VS Code 配置开发环境(可选)](#6. VS Code 配置开发环境(可选))
  • [7. 常用命令总结](#7. 常用命令总结)
  • [8. 总结](#8. 总结)

1. 前提条件

要开始使用 Vite 创建 Vue 项目,你需要:

  • 安装 Node.js(推荐安装版本 14 或更高),Node.js 会自带 npm(Node 包管理器)。
  • 互联网连接,因为需要下载 Vite 和其他依赖。

验证 Node.js 和 npm 是否已安装

bash 复制代码
node -v
npm -v

如果你没有安装 Node.js,可以从 Node.js 官方网站 下载并安装。

2. 使用 Vite 创建 Vue 项目

Vite 是一款快速构建工具,支持现代前端开发,特别适用于像 Vue 这样的框架。以下是如何使用 Vite 创建项目的步骤。

第一步:安装 Vite

首先,确保你已经安装了 npm 或 yarn。然后,你可以使用以下命令创建一个新的项目:

  1. 打开终端(在 macOS 中是 Terminal,Windows 中是 CMD 或 PowerShell)。

  2. 运行以下命令来使用 Vite 创建 Vue 项目:

    bash 复制代码
    npm create vite@latest my-vue-app

    这里的 my-vue-app 是项目的名字,你可以自定义这个名字。

  3. 之后,Vite 会提示你选择要使用的框架。你可以使用方向键选择 "Vue" 作为你的项目框架:

    复制代码
    ? Select a framework: › - Use arrow-keys. Return to submit.
      vanilla
      vue
      react
      preact
      lit
      svelte
      others

    选择 vue 并按回车确认。

  4. 接着它会提示你是否使用 TypeScript:

    复制代码
    ? Select a variant: › - Use arrow-keys. Return to submit.
      vue
      vue-ts

    如果你想要纯 JavaScript 项目,选择 vue;如果你想使用 TypeScript,选择 vue-ts

第二步:进入项目并安装依赖

  1. 进入新创建的项目文件夹:

    bash 复制代码
    cd my-vue-app
  2. 安装项目依赖项:

    bash 复制代码
    npm install

    这将根据 package.json 安装项目所需的所有依赖包。

第三步:启动开发服务器

安装完成后,可以通过以下命令启动开发服务器:

bash 复制代码
npm run dev

启动成功后,你会看到终端提示类似这样的输出:

复制代码
VITE vX.X.X  ready in XX ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

在浏览器中访问 http://localhost:5173,你就可以看到默认的 Vue 欢迎页面。

3. 项目结构说明

使用 Vite 创建的 Vue 项目有一个基础的项目结构。以下是各个文件和文件夹的详细说明:

  • index.html: 项目主页面,Vite 使用这个文件来定义应用的根 HTML 内容。在这里可以引用 JavaScript 和 CSS。

  • src 文件夹: 存放项目源代码。

    • main.js: 项目的入口文件,主要用于创建 Vue 实例并挂载到 DOM 中。
    • App.vue: 应用的根组件,默认包含了一些模板、样式和基本的逻辑代码。
    • assets 文件夹: 存放静态资源,例如图片、字体等。
  • package.json: 定义了项目的基本信息、依赖项和脚本。通过这里可以管理项目的依赖包,添加新的库等。

  • vite.config.js: 这是 Vite 的配置文件,用于配置项目开发和构建的参数,例如代理、路径别名等。

4. 项目开发的基础操作

你可以开始在 src 文件夹下的 App.vue 中进行开发,以下是一些基础操作:

1. 添加新组件

  • src/components 中创建一个新的 Vue 组件,例如 HelloWorld.vue

    vue 复制代码
    <template>
      <div>
        <h1>Hello, World!</h1>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld'
    }
    </script>
    
    <style scoped>
    h1 {
      color: blue;
    }
    </style>
  • App.vue 中引入这个组件:

    vue 复制代码
    <template>
      <div id="app">
        <HelloWorld />
      </div>
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    
    export default {
      name: 'App',
      components: {
        HelloWorld
      }
    }
    </script>

2. 安装依赖

使用 npm 或 yarn 添加其他需要的依赖。例如,如果你想安装 axios 用于请求 API,可以执行:

bash 复制代码
npm install axios

然后你可以在项目中引入它来进行 HTTP 请求。

5. 打包和部署

当你开发完成后,可以将项目打包,以便部署到生产环境:

  1. 在终端中执行以下命令打包项目:

    bash 复制代码
    npm run build

    这将创建一个 dist 文件夹,里面包含了所有构建后的文件。

  2. dist 文件夹中的内容上传到你的服务器或托管服务中(例如 Vercel、Netlify、GitHub Pages 等)。

6. VS Code 配置开发环境(可选)

  • 安装插件 : 推荐在 VS Code 中安装 VeturVolar 插件来支持 Vue 文件的语法高亮和代码补全。
  • 格式化工具 : 可以安装 Prettier 来确保你的代码风格统一。

7. 常用命令总结

  • 启动开发服务器 :

    bash 复制代码
    npm run dev
  • 构建生产版本 :

    bash 复制代码
    npm run build
  • 本地预览生产版本 (确保在打包后使用):

    bash 复制代码
    npm run preview

    这将在本地启动一个服务器,用于预览打包后的应用。

8. 总结

使用 Vite 创建 Vue 项目非常简单,而且 Vite 提供了极快的热重载和开发体验。整个流程概括如下:

  1. 安装 Vite 并创建项目。
  2. 进入项目目录,安装依赖。
  3. 启动开发服务器,开始开发。
  4. 打包和部署你的应用。

通过以上步骤,你可以快速创建并启动一个 Vue 项目。随着项目的扩展,你可以添加更多的插件、组件和页面,开发一个功能齐全的 Vue 应用。

相关推荐
持久的棒棒君3 小时前
npm安装electron下载太慢,导致报错
前端·electron·npm
渔舟唱晚@5 小时前
大模型数据流处理实战:Vue+NDJSON的Markdown安全渲染架构
vue.js·大模型·数据流
crary,记忆5 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz6 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou06 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干6 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大6 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu6 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端7 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
q_19132846957 小时前
基于Springboot+Vue的办公管理系统
java·vue.js·spring boot·后端·intellij idea