VUE 3 造轮子：纯洁版

1.搭建环境

• 进入某一个文件夹 cd Jirengu
• 全局安装 yarn global add create-vite-app@1.18.0
• 创建一个vite app cva bad-cat-1
• 进入 bad-cat-1 cd bad-cat-1
• yarn就是安装依赖，相当于yarn install yarn
• yarn dev 运行

2.安装并初始化vue-router

• 按ctrl键+C键，开始输入router命令
• npm info vue-router versions
• 选择4.0.0-beta.3'这个版本
• 打开vs code终端输入yarn add vue-router@4.0.0-beta.3

3.初始化vue-router

• 在main.js引入history和router； import {creatWebHashHistory，creatRouter} from 'vue-router'
  • 传给这个简单的history和router； const history = creatWebHashHistory() const router = creatRouter()
• 把main.js重命名为main.ts
• 在creatRouter（）的括号内添加

history:history;
routs:[
{path:'/',component:xxxx}
]

备注：‘/’表示是根链接地址

• 当vs code里面代码出现波浪线报错时，找不到‘./xxx/xxx.vue’模块。
  • 原因：Typescript只能理解.ts文件，无法理解.vue文件；
  • 解决办法：可以google搜索Vue3 can not find module;
  • 答案是创建shims-vue.d.ts文件，并在里面输入

   // shims-vue.d.ts
  declare module '*.vue' {
  import { Component } from 'vue'
  const component: Component
  export default component}
  

• 使用这个router，app.use(router)

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

• 添加<router-view>和<router-link>
  • <router-view>将其放在哪里，路由地址里面的内容就在哪里展示；
  • <router-view>将其放在哪里，就在哪里展示内容；
  • <router-link>的使用，
    • 1.在需要点击就跳转的文字旁边添加此代码；
    • 2.在<router-link to="/">在to后面加跳转的地址

4.创建首页和文档页

目标是做成类似vue.js首页的界面

• 主页面有分为两个板块：
  • 顶端有一个top板块；
  • 另一个是主题板块，主题板块内有一个链接，点击可以进入内容板块；
• 内容板块：
  • 有一个与主页面板块相同的top顶端块；
  • 有一个左右两边栏块；

1.开始创建官网主页面

• 在src里面创建一个view文件夹
  • 创建Home.vue文件
    • Topnav：左边是logo，右面是menu
    • Banner： 文件介绍+开始按钮
  • 创建Doc.vue文件
    • Topnav：同上
    • Content：左边是aside，右边是main

2.路由的设定

• 访问根路径时‘/’跳转Home组件；
• 访问‘/doc’路径时，跳转Doc组件bashzhongduan

3.设置style时，lang=“scss”

有可能会报错，所以新开一个bash终端yarn add sass

手机页面的切换按钮

@media(max-width:500px){
> .menu{display:none}

}

路由间切换，点击组件，显示相应文档

• 点击doc文档里列表中的链接，跳转到相应的页面；
• 在main.ts里面加上需要的路由；
• {path:'/doc',component:Doc,children:【{path: 'switch',component:SwitchDemo}】}
• 在components里面新建一个文件SwitchDemo.vue;
• 点击链接出来的文档，放在哪里呢？ 放在aside下面的main标签里

<main>
<router-view/>
</main>

• 还需要实现一个，点击列表里面链接时，出现新的页面，然后隐藏这个列表。 下面这个代码就是代表，在这个获取路径之后的动作

router.afterEach(()=>{ })