day2:component组件模块化思维，Vue-Router切换页面路由

tips：当要上传github时gitigore会将依赖模块给屏蔽

重新打开页面：

pnpm install //重新安装依赖
pnpm run dev //就可以运行

Vite的目录结构

├── README.md // 说明
├── index.html // html文件
├── package.json // 项目基本信息
├── public // 公共模块
│   └── vite.svg
├── src  // 源码目录
│   ├── App.vue // 入口文件
│   ├── assets // 公共资源
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts // 入口文件，加载公共组件
│   ├── style.css
│   └── vite-env.d.ts
├── tsconfig.json // ts配置
├── tsconfig.node.json
└── vite.config.ts   // 项目基本信息

component组件模块化思维

简而言之就是说将一个页面划分成不同的部分，分别完成最后像搭积木一样搭起来。而积木的实现就是写一个个组件

创建vite+Ts

建议在Webstrom中进行创建

a，点开“新建”然后找到vite，将目录设置为自己提前创建好的空文件夹，然后把下面的Typescript勾上。

Vue-Router的安装，用途和使用

首先是Vue-Router的安装

npm install vue-router@4
//建议将npm换成cnpm，应为有时候梯子会不稳定，最后换成淘宝源

安装了后看一下package.json中有没有Vue-Router

接着是Vue-Router的用途

就是通过单页面来模拟多页面。

然后是Vue-Router的使用

a，首先在src中创建pages和routers两个目录

b，routers中创建index.ts

c，我们这里使用的是router-view，没有用router-link。

d，在components中创建vue1.vue,vue2.vue，便于用来展示vue-router的作用

在index.ts的操作

a，导入Helloworld，vue1，vue2的包

b，接着是定义一些路由，那些在routes里面的就是一些路由

const routes = [  
    {  
        path:"/",  
        name:"Home",  
        component:HelloWorld  
    },  
    {  
        path:"/vue1",  
        name:"Vue1",  
        component:vue1  
    },  
    {  
        path:"/vue2",  
        name:"Vue2",  
        component:vue2  
    }  
  
]

c，创建路由并传递”routes”配置

const router = createRouter(  
    {  
    history:createWebHistory(),  
    routes:routes  
    }  
)

d，变成全局变量

export default router;

e， 创建并且挂载根实例(在main.ts)

const app = createApp(App);  
  
app.use(router);  
  
app.mount('#app');

在App.vue的操作 😊

a，加入router

import { RouterView } from "vue-router";

b，在template

<router-view />

在vue1和vue2的操作

在template中写点字说明好表现出结果

捋一下vue-router的逻辑

1，首先是创建路由，就是在index.ts中创建
2，在main.ts进行挂载
3，在App.vue进行展示,即是导入router-viewer

实现好后那么跳转页面就在网址后面加个/vue1即可跳转

在学习的时候遇到的遇难杂症

首先是在Webstrom中有对TS语法有比较严格的要求，所以有时候在写的过程中会报错也不要过于在意。

切记，最好用Webstrom进行vite框架的安装，如果不行那么进行手动更改的话，有可能当在别的文件调用对应Vue的包，有可能会无法被找到

vue3 报错解决：找不到模块或其相应的类型声明。（Vue 3 can not find module） - 知乎 (zhihu.com)
这个就是解决方案，但是最好就是在Webstorm中创建。