Vue | 容小狸的博客

请注意：
正在更新中。
这篇文章没有ToC，没有次级标题，没有基础行文，读的下去我敬你，你是这个👍

前端，狗都不

学，狗不学我学。

Vue。安装啥的全部略过。网上太多手把手教程了。
那么就从自己怎么学的开始。

首先开始看如何改改页面元素。把原始的样例代码的You did it改成Hello world，众所周知的第一步。
这玩意儿是如何传参的呢？
看到HelloWorld.vue，script部分：

<script setup lang="ts">
defineProps<{
  msg: string
}>()
</script>

再看到App.vue：

1
2
3

<div class="wrapper" >
  <HelloWorld msg="Hello World!" />
</div>

就很明显了。
但是问题来了：为什么这个Header是居左而不是居中靠上呢？注意到：

header {
  display: flex;
  place-items: center;
  padding-right: calc(var(--section-gap) / 2);
}

其中display负责Header内元素的摆放布局，place-items负责Header内的元素的对齐。padding-right负责右侧空隙。

问题来了。看到这段代码：

header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

.logo中的.有没有特殊含义呢？

注意到：

<header>
  <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
    <div class="wrapper" >
      <HelloWorld msg="Hello World!" />
    </div>
</header>

其中的<img/>标签中有一个叫做class="logo"的标签。意思是这是一个logo。那么显然，.就是一种选择器，选择了所有class="logo"的元素。

那么已经有定义了，为什么还有这个呢：

@media (min-width: 1024px) {
  header {
    display: grid;
    place-items: left;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}

注意到@media，其中有min-width属性，那么显然这就是用于控制显示的。原语句的用处就是在浏览器窗口大于1024的时候，取代刚刚的定义，应用这个大括号内的样式。

那么这个@是什么意思呢？意识到这是一种规则控制类的语句，例如媒体查询，导入其他CSS，自定义字体文件，支持性检测等。

目前为止都是细讲CSS。那么我们整点大家想看的东西啊。

创建一个router.js备用。
一个典型的router.js长这样：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]
const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

先布局一整个页面。随手来个登录界面试试：

<template>
  <header>
    <TitleLogo />
  </header>
  <main>
    <LiquidGlass>
      <LoginInputs />
    </LiquidGlass>
  </main>
</template>