分类 前端 下的文章

NodeJs 版本： v16.17.0
Yarn 版本： 1.22.19
Npm 版本： 8.15.0
操作系统 版本： Windows11

初始化项目

创建新的 Vue3 ts 项目

yarn create vite

选择 Vue -> TypeScript

添加 vue-router

yarn add vue-router@next

别名配置

修改 vite.config.ts 文件

import {defineConfig} from 'vite'
import {fileURLToPath, URL} from "url"
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
})

tsconfig.json 配置


{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"],
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

配置 router

  1. src 目录下创建 router, views 目录
  2. src/router/index.ts 代码
import {createRouter, RouteRecordRaw, Router, createWebHistory} from "vue-router";

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Home',
        component: () => import('@/views/Home.vue'),
    }
]

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

export default router
  1. src/main.ts 代码
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "@/router";

createApp(App)
    .use(router)
    .mount('#app')
  1. src/App.vue 代码
<script setup lang="ts">

</script>

<template>
  <router-view/>

</template>

<style scoped>

</style>
  1. src/views/Home.vue 代码
<script setup lang="ts">
import HelloWorld from '@/components/HelloWorld.vue'

</script>
<template>
  <HelloWorld msg="Vite + Vue" />
</template>

运行截图
image

:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类:nth-child 括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3…）。示例：

0n+3 或简单的 3 匹配第三个元素。
1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式>不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。）
2n+0 或简单的 2n 匹配位置为 2、4、6、8…的元素（n=0 时，2n+0=0，第 0 个元素不存在，因为是从 1 >开始排序)。你可以使用关键字 even 来替换此表达式。
2n+1 匹配位置为 1、3、5、7…的元素。你可以使用关键字 odd 来替换此表达式。
3n+4 匹配位置为 4、7、10、13…的元素。
a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { >an + b; n = 0, 1, 2, …} 中的子元素。另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形>式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;

            height: 100px;
            background-color: aliceblue;
        }
        .box .box-item {
            margin: 8px;
            background-color: antiquewhite;
        }
        .box .box-item:nth-child(1) {
            flex: 1;
            background-color: blue;
        }
        .box .box-item:nth-child(2) {
            flex: 2;
            background-color: rgb(110, 219, 67);
        }
        .box .box-item:nth-child(3) {
            flex: 3;
            background-color: rgb(255, 115, 0);
        }
        .box1 {

        }
        .box1 .box1-item {
            margin-top: 8px;
            height: 30px;
            width: 300px;
            background-color: antiquewhite;
        }
        .box1 .box1-item:nth-child(2n+2) {
            background-color: aqua;
        }
        .box1 .box1-item:nth-child(2n+1) {
            background-color: rgb(21, 255, 0);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-item">

        </div>
        <div class="box-item">

        </div>
        <div class="box-item">

        </div>
    </div>

    <div class="box1">
        <div class="box1-item"></div>
        <div class="box1-item"></div>
        <div class="box1-item"></div>
        <div class="box1-item"></div>
        <div class="box1-item"></div> 
        <div class="box1-item"></div>
        <div class="box1-item"></div>
        <div class="box1-item"></div>
        <div class="box1-item"></div>
        <div class="box1-item"></div>
    </div>
</body>
</html>

image-1666982061714