【快速上手】使用 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 应用。

相关推荐
小满zs3 分钟前
Zustand 第四章(中间件)
前端·react.js
GalaxyPokemon1 小时前
LeetCode - 2. 两数相加
java·前端·javascript·算法·leetcode·职场和发展
dualven_in_csdn4 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友4 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程5 小时前
纯前端做图片压缩
开发语言·前端·javascript
银色的白5 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
应巅5 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
萌萌哒草头将军6 小时前
🚀🚀🚀什么?浏览器也能修改项目源文件了?Chrome 团队开源的超强 Vite 插件!🚀🚀🚀
vue.js·react.js·vite
Jimmy6 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz6 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html