资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

Vue 环境搭建到第一个应用

创作时间:

作者:

@小白创作中心

Vue 环境搭建到第一个应用

引用

CSDN

https://blog.csdn.net/2503_90093283/article/details/145267294

Vue.js 是一套用于构建用户界面的渐进式框架。作为当前最流行的前端框架之一，Vue以其轻量、易用和高效的特点，吸引了大量开发者。本文将从零开始，带你快速上手 Vue。你将学习如何搭建开发环境、创建第一个 Vue 项目，并深入理解项目的目录结构。通过本节的实践，你将掌握 Vue 的基础知识，并能够独立开发简单的 Vue 应用。

1. 安装 Vue CLI 或 Vite：两种工具的选择与对比

在开始 Vue 开发之前，我们需要选择一个合适的工具来搭建开发环境。Vue 官方推荐的工具主要有两种：Vue CLI和Vite。它们各有优缺点，适用于不同的场景。

1.1 Vue CLI 与 Vite 的对比

特性	Vue CLI	Vite
构建工具	Webpack	基于原生 ES 模块的构建工具
启动速度	较慢（依赖 Webpack 打包）	极快（利用浏览器原生 ES 模块）
热更新速度	较慢	极快
配置复杂度	较高（需要熟悉 Webpack 配置）	较低（开箱即用，配置简单）
适用场景	中大型项目，需要复杂配置的场景	中小型项目，追求开发效率的场景
生态支持	成熟，插件丰富	较新，但生态正在快速完善

1.2 如何选择？

Vue CLI：适合需要复杂配置的中大型项目，或者你已经熟悉 Webpack 的工作流。
Vite：适合中小型项目，尤其是追求开发效率和快速启动的场景。

1.3 安装 Vue CLI

注意：开始之前，请确保您的电脑已经安装了 Node 的环境，并能在终端使用 NPM，如您不知道如何安装，请移步5 分钟 JS 走进 JavaScript 世界#3.2.1。

如果你选择使用 Vue CLI，可以通过以下命令安装：

npm install -g @vue/cli

安装完成后，可以通过以下命令检查版本：

vue --version

1.4 安装 Vite

如果你选择使用 Vite，可以通过以下命令创建一个 Vue 项目：

npm create vite@latest my-vue-app --template vue

Vite 的安装速度非常快，因为它利用了现代浏览器的原生 ES 模块支持。

2. 创建第一个 Vue 项目：命令行操作与项目初始化

2.1 使用 Vue CLI 创建项目

通过 Vue CLI 创建项目的命令如下：

vue create my-vue-app-by-vue-cli

执行命令后，Vue CLI 会提示你选择一些配置选项：

选择 Vue 版本：Vue 2 或 Vue 3。
选择包管理工具：NPM 或 PNPM

完成配置后，Vue CLI 会自动安装依赖并生成项目结构。

2.2 使用 Vite 创建项目

通过 Vite 创建项目的命令如下：

npm create vite@latest my-vue-app --template vue

执行命令后，Vite 会提示你选择一些配置选项：

选择框架：可以选择默认配置（Vue）或手动配置（React）等等。
选择语言：例如 JavaScript、TypeScript 等。

点击键盘下键选择 JavaScript。

Vite 会快速生成一个基于 Vue 3 的项目，默认情况下，并不会像 Vue-CLI 一般安装依赖，需要手动执行安装依赖的命令，确保在 vue3 目录下执行 npm i。

2.3 项目初始化后的操作

项目初始化完成后，可以通过以下命令启动开发服务器：

cd my-vue-app
npm run dev    # Vue3
cd my-vue-app-by-vue-cli
npm run serve  # Vue2

Vue3 启动后，打开浏览器访问 http://localhost:5173，你将看到默认的 Vue 欢迎页面。

Vue2 启动后，打开浏览器访问 http://localhost:8080，你将看到默认的 Vue 欢迎页面。

3. 项目目录结构解析：src、public、node_modules 等核心目录的作用

3.1 项目目录结构概览

一个典型的 Vue 项目目录结构如下：

my-vue-app/
├── node_modules/       # 项目依赖的第三方库
├── public/             # 静态资源目录
├── src/                # 项目源代码目录
│   ├── assets/         # 静态资源（如图片、字体）
│   ├── components/     # 组件目录
│   ├── App.vue         # 根组件
│   └── main.js         # 项目入口文件
├── .gitignore          # Git 忽略文件配置
├── package.json        # 项目配置文件
├── README.md           # 项目说明文件
└── vite.config.js      # Vite 配置文件（如果使用 Vite）

3.2 核心目录与文件的作用

目录/文件	作用
node_modules/	存放项目依赖的第三方库，通常不需要手动修改。
public/	存放静态资源（如index.html），这些文件会被直接复制到构建输出目录。
src/	项目源代码目录，包含组件、样式、逻辑等。
src/assets/	存放静态资源（如图片、字体），这些资源会被 Webpack 或 Vite 处理。
src/components/	存放 Vue 组件，通常每个组件是一个.vue文件。
src/App.vue	根组件，所有其他组件都会在这里被引用。
src/main.js	项目入口文件，初始化 Vue 实例并挂载到 DOM。
package.json	项目配置文件，包含项目依赖、脚本命令等。
vite.config.js	Vite 的配置文件（如果使用 Vite），用于自定义构建行为。

3.3 关键文件解析

src/main.js

import { createApp } from 'vue' // 引入 Vue 的 createApp 函数
import App from './App.vue'     // 引入根组件 App.vue
createApp(App).mount('#app')    // 创建 Vue 实例并挂载到 #app 元素

createApp：Vue 3 的新 API，用于创建一个 Vue 应用实例。
mount('#app')：将 Vue 实例挂载到 HTML 中 id 为 app 的元素上。

src/App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>