一、从0到1搭建Vue工程

开发工具

nodejs + IDEA

npm是什么？

npm是一个JavaScript 包管理工具，也是Node.js 的默认包管理器，它提供了一种简单的方式来安装、更新和管理Node.js的包。

nodejs里面会默认带一个npm工具，帮我们下载vue所需工程所需要的依赖。

并且我们需要给npm配置淘宝镜像，否则下载依赖的时候回非常慢

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

创建Vue工程

用npm创建最新版的vue项目

npm create vue@latest

cd <your-project-name>
npm install
npm run dev

运行结果

访问localhost:5173，看到这个页面说明vue3启动成功

IDEA中启动Vue

在IDEA里面启动vue3

打开package.json

此时我们可以发现整个vue项目过于冗余，有很多无用文件

如何给项目做精简？

1. 删除文件

1. 改造Home.vue，同时删除AboutView.vue

setup是必备的属性，是一个语法糖，有这个才能使用vue3的语法特性

1. 精简路由

1. 精简App.vue，只是把它作为项目的入口文件

1. 删除无用的导包

发现页面中字体没贴边

1. 新增global.css，相当于做一个全局的css样式设置

这段代码意味着给全局的body做了贴边的配置

需要在main.css中引入

引入后即可看见body内容已经贴边。

Vue的基本语法

详细的语法可以查看下方链接的菜鸟教程

Vue3 安装 | 菜鸟教程

下面介绍几个常用的语法

v-model:

双向绑定：数据可以在用户输入完成发生实时的变化

v-if v-else

v-for

v-on

可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。

语法格式

v-on:click="methodName"
或
@click="methodName"

v-bind

v-bind:class 可以简写为 :class。

onMounted

就是在页面元素完全加载完之后触发，页面元素加载需要时间，如果一开始就触发可能会报错