vue3(一) - 结构认识

通过之前博客应该已经完成了vue脚手架的认识和创建（地址），这节我们简单介绍一下需要使用的一些关键技术，后续在详细介绍

结构目录

创建脚手架时，我选择了TypeScript,store,route这三个选项

index.html入口

node_modules存放npm下载的资源依赖 在package.json中定义的依赖使用npm i都会下载到这里

src中

assets 存放的是一些静态资源，例如一些静态图片等，也可以放公共的css和js文件；

components 存放的是一些全局组件或多个页面公用的子组件，比如: 页头组件、页脚组件、广告轮播组件等；

router 存放的是路由配置，保存着所有路径和组件的对应关系；

views 存放所有的页面组件，有几个页面，就在views下创建几个组件文件，比如: 首页、详情页、商品列表页、登录页等；

App.vue 是整个网站所有页面公共的容器组件；

main.ts 脚手架核心js，导入整个项目中用到的js，实例化vue的对象，通过实例化的vue渲染整个程序，承担了配置Vue项目的责任。

Router

官方文档：入门 | Vue Router (vuejs.org)

router是一个路由管理，这里来配置路由信息，这里我们主要讲一些如何配置的，在main.ts中引用一些资源文件，其中就有router，其中router中配置好router之后还有一个路由守卫，可以在这里编写一些代码配合store仓库使用，比如身份信息验证等

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'