Vue 3 ——初识Vue.js

詹铅
201 阅读5分钟

一、前言

在前端开发中，一个优秀的框架可以帮助用户解决一些常见的问题，有助于高效地完成工作。Vue.js（简称Vue）作为前端开发常用的框架之一，不仅可以提高项目的开发效率，而且可以改善开发体验。

二、什么是Vue

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 渐进式框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。其中，“渐进式”是指在使用Vue核心库时，可以在1核心库的基础上根据实际需要逐步增加功能。

使用Vue开发的优势：

  1. 轻量级。
  2. 基于JS开发，降低开发门槛。
  3. 使用灵活，可开发一个全新的Vue项目，也可以将Vue引入现有项目。
  4. 通过虚拟DOM技术减少对DOM的直接操作，使用尽可能简单的API来实现响应式的数据绑定。
  5. 支持组件化开发，可提高项目的开发效率和可维护性，提高代码复用性。
  6. 可结合前端开发中用到的一系列工具以及各种支持库结合使用，以实现前端工程化开发，从而提高项目开发效率，降低开发难度。

Vue是基于MVVM模式的框架。

MVVM主要包含Model（数据模型）、View（视图）和ViewModel（视图模型）。

  • Model是指数据部分，负责业务数据的处理；
  • View是指视图部分，即用户界面，负责视图处理；
  • ViewModel用于连接视图与数据模型，负责监听Model或者View的改变。

基本工作原理如下：

image.png

Vue的4个特性

  • 数据驱动视图：在使用Vue的页面中，Vue会监听数据变化，当页面数据发生变化时，Vue会自动重新渲染页面结构，如下图所示。

屏幕截图 2025-05-23 161139.png

  • 双向数据绑定：即数据发生变化时，视图也会发生变化；当视图发生变化时，数据也会跟着同步变化。
  • 指令：主要包括内置指令和自定义指令，内置指令是Vue本身自带的指令，而自定义指令是由用户自己定义的指令。
  • Vue支持插件，通过加载插件可以实现更多的功能。

三、什么是Vite

vite是一个轻量级、运行速度快的前端构建工具，它支持模块热替换（Hot Module Replacement，HMR），可以即时、准确地更新模块，当代码修改时无须重新加载页面或清除应用程序状态。

四、创建Vue 3项目

Vite提供了两种创建项目的命令。

  • 手动创建项目的命令
  • 通过模板自动创建项目的命令

1.手动创建项目的命令

使用npm或yarn包管理工具都可以搭配Vite手动创建，具体命令如下。

#使用npm create 命令创建项目
npm create vite@latest
#使用yarn create 命令创建项目
yarn create vite

vite@latest表示在npm 中安装最新版本的vite。

命令执行后，会让其选择所用的语言以及设置项目名称等，创建好后使用cd进入创建好的文件夹，进行下一步的编写。

2.通过模板自动创建项目的命令

这种方式相对简单，通过附加的命令行选项直接指定项目名称和模板，省去了填写项目名称、选择框架和变体等环节。Vite提供了许多模板预设，可以创建Vite+React+TS、Vite+Vue、Vite+Svelte等类型的项目。通过附加的命令行选项直接指定项目名称和模板的基本语法格式如下。

#使用npm 6或更低版本创建项目
npm create vite@latest<项目名称> --template<模板名称>
#使用npm 7或更高版本创建项目
npm create vite@latest<项目名称> -- --template<模板名称>
#使用yarn create命令创建项目
yarn create vite<项目名称> --template<模板名称>

例：创建一个基于Vite+Vue模板且项目名称为Hello-vite的项目。

yarn create vite Hello-vite --template vue

创建好的项目，使用cd进入，在命令行输入yarn安装所有依赖，输入yarn dev运行。

五、Vue 3项目的目录结构

vue经典目录结构

Hello-vue/
├── node_modules/
├── public/
│   ├── favicon.ico
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
│   └── router/
│       └── index.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── index.html
├── vue.config.js
└── yarn.lock or package-lock.json

由此可看出，项目主要分为4部分

  • 项目根目录
  • node_modules目录
  • public目录
  • src目录

接下来详细介绍这四个部分的含义。

1.项目根目录

根目录配置文件
.gitignoreGit 忽略文件列表，指定哪些文件和目录不被包含在版本控制中。
babel.config.jsBabel 配置文件，指定 Babel 的编译规则。
package.json项目的依赖、脚本和其他元数据。
README.md项目的说明文件，通常用于描述项目、如何安装和使用等信息。
vue.config.jsVue CLI 的配置文件，用于修改默认配置。
yarn.lock 或 package-lock.json锁定安装的依赖版本，确保项目依赖的一致性。

2.node_modules 目录

目录用于存放利用包管理工具下载安装的包的文件夹。

3.public 目录

静态文件目录，里面的文件不会被 Webpack 处理，最终会原样复制到打包目录下。

4.src目录

src/源代码目录，存放应用的主要代码。
src/assets/存放静态资源，如图像、字体等。这些文件会由 Webpack 处理，可以通过相对路径引用。
src/assets/logo.png示例图像文件。
src/components/存放 Vue 组件，每个组件都是一个独立的 .vue 文件。
src/components/HelloWorld.vue默认生成的示例组件。
src/views/存放视图组件，通常对应路由，每个视图都是一个独立的 .vue 文件。
src/views/Home.vue默认生成的主页组件。
src/router/存放路由配置文件。
src/router/index.js路由的配置文件，定义了应用的路由规则。
src/App.vue根组件，整个应用的入口组件。
src/main.js应用的入口文件，负责创建 Vue 实例并挂载到 DOM 上。
avatar
文章
阅读
粉丝