初识vue3

一、独立vue3 搭建项目

搭建项目

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

启动项目 默认 npm run serve

在这里插入图片描述

文件目录介绍

在这里插入图片描述

node_modules 存放所有依赖,包括第三方库和插件
public - favicon.ico 浏览器左上角显示的图表
- index.html 线上最终渲染的项目页面

src - assets 放置静态资源
- components 存放一般组件
- router 配置路由
- store 配置状态管理
- views 存放路由组件
- app.vue 根组件 渲染
- main.js 项目主入口文件 一般用来引入第三方插件
.browserslistrc 管理浏览器版本
.gitignore 上传到git需要忽略的文件和文件夹 默认已经配置好了
.babel.config 配置babel 用来转义js语法
.package-lock 所有包的具体信息
.package 包管理文件
.README 项目备注

组件分为路由组件和一般组件

二、vue3 与 vue2 的异同及vue3 新特性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

注意: setup函数是访问不到this的
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

三、实现二级导航目录及axios 数据交互

案例效果

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
由于 刚进页面就需要调用接口 所以 需要在生命周期里 onMounted里 调用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_39490750/article/details/117691509