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

相关推荐
我是小路路呀1 小时前
vue开始时间小于结束时间,时间格式:年月日时分
前端·javascript·vue.js
虾球xz1 小时前
游戏引擎学习第201天
前端·学习·游戏引擎
我自纵横20231 小时前
JavaScript 中常见的鼠标事件及应用
前端·javascript·css·html·计算机外设·ecmascript
li_Michael_li1 小时前
Vue 3 模板引用(Template Refs)详解与实战示例
前端·javascript·vue.js
excel1 小时前
webpack 核心编译器 十五 节
前端
excel1 小时前
webpack 核心编译器 十六 节
前端
雪落满地香3 小时前
css:圆角边框渐变色
前端·css
慈云数据4 小时前
从开发到上线:基于 Linux 云服务器的前后端分离项目部署实践(Vue + Node.js)
linux·服务器·vue.js
风无雨5 小时前
react antd 项目报错Warning: Each child in a list should have a unique “key“prop
前端·react.js·前端框架