VUE3：快速上手篇

引言

虽然已经接触VUE很久了，但从来没有系统深入学习过，都是学些皮毛，然后下次项目又不用了...

这次我从头开始，阅读 官方文档 和哔哩哔哩UP主 图灵学院官方号 ，深入探索一下VUE3的奥秘和强大，并在我的博客持续更新自己的学习进度。

在此之前，我会总结一下本次学习的内容，且列一个列表展示：

• 快速上手（本篇文章）
• 响应式数据
• 选项式API/组合式API

最后为了没忘记 VUE 到底是个什么东西，我会永远把这个贴纸贴在这里，每次复习的时候强制瞄一眼：

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

快速上手

1. 创建并运行项目

当下不论前后端框架，创建项目都很方便，VUE3使用官方脚手架命令，启动一个项目只需要一句话：

npm create vue@latest

执行命令后，会开始初始化项目，输入项目名并按需选择插件，安装依赖后即可启动项目。

学习时我用到的插件是：
TypeScript
ESLint
Prettier （按需，IDE有提供代码格式化）

Tips：在安装依赖之前，国内网络环境建议先 配置npm镜像源 ，这会极大降低开发时安装依赖所需的时间成本！

替换镜像源地址和命令如下，创建完项目目录后直接运行：

npm config get registry https://registry.npmmirror.com

然后进入项目目录，并安装依赖，运行项目：

cd <项目目录>
npm install
npm run dev

2. 理解VUE项目结构

my-vue-project/
├── node_modules/               #依赖安装目录
├── public/                             #访客访问目录
│   └── favicon.ico                  #站点图标
├── src/
│   ├── App.vue                      #根组件
│   └── main.ts                        #主配置文件
├── index.html                        #挂载根页面
├── package.json                    #项目配置
├── tsconfig.json                     #TypeScript 配置文件
├── vite.config.ts                     #Vite 构建工具配置
├── .gitignore                          #Git 忽略文件配置
└── README.md                     #项目文档

新组件在 src/components 目录内创建，静态资源文件放置在 src/assets 内。

3. VUE基本组件模板

每一个.vue组件文件都必须有以下代码结构：

<!--类html内容-->
<template></template>
<!--Javascipt-->
<script setup lang="ts"></script>
<!--样式文件-->
<style scoped></style>

以上就是基本的 VUE3 入门流程，以此总结我这两天的学习经历！

下篇总结：响应式数据