vue3.0学习笔记(四)

  • A+
所属分类:Web前端
摘要

一、创建好第一个vue项目之后,先对展示页面进行了解    从项目目录中查看App.vue文件,查看初始页面

一、创建好第一个vue项目之后,先对展示页面进行了解

vue3.0学习笔记(四)

 

 

 从项目目录中查看App.vue文件,查看初始页面

vue3.0学习笔记(四)

 

 

 可以看到第一个展示页面路由为“/”,展示页面是home这个页面,从项目目录中找到router(路由管理),具体的页面展示配置内容就在index.js里面,其中router-link配置跳转页面,

<router-view />标签为路由展示,实现非跳转页面的展示

vue3.0学习笔记(四)

 

 

 其中每个中括号之间代表一个路由,一般第一个为初始页面,component代表使用的组件,组件的具体内容在components文件夹中。

vue3.0学习笔记(四)

 

 

 home.vue就使用了helloworld这个组件,向组件传递了一个msg的参数,具体在HelloWorld.vue中有所展示,完成了一个基本的页面编写

vue3.0学习笔记(四)

 

 

主要内容在template(模板标签中进行编写),逻辑在script标签中编写,展示样式在style标签中编写,接下来将在项目中添加cube ui组件,并编写一个登陆界面。