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

相关推荐
艾小逗38 分钟前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
明似水4 小时前
Flutter 弹窗队列管理:支持优先级的线程安全通用弹窗队列系统
javascript·安全·flutter
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇5 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827525 小时前
vue中 vue.config.js反向代理
前端
Java&Develop5 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器