记录下next.js全栈项目初始化需要的组件

1. next.js (app router)
2. tailwind
3. typescript
4. prisma
5. trpc
6. tanstack
7. shadcn/ui

使用pnpm初始化next.js

pnpm dlx create-next-app@latest

起好项目名字后全部默认就可以

(base) ➜  ~ pnpm dlx create-next-app@latest
Packages: +1
+
Progress: resolved 1, reused 0, downloaded 1, added 1, done
✔ What is your project named? … demo
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

使用eslint和prettier

一、安装eslint + prettier + eslint-plugin-prettier

pnpm i eslint prettier eslint-plugin-prettier eslint-config-prettier prettier-plugin-tailwindcss -D

二、配置.eslintrc.json

{
  "extends": [
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  // 这个是nextjs官网推荐的写法
  "env": {
    "es2020":true,
    "es6": true,
    "node": true
  },
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "warn"
  }
}

三、新建.prettierrc.js，注意名字别打错了

module.exports = {
  // 基础配置
  singleQuote: false, // 使用双引号
  printWidth: 100, // 设置行宽度为100，稍微宽一点可能更适合现代屏幕
  semi: true, // 使用分号
  trailingComma: 'all', // 在多行输入的尾逗号处添加一个逗号

  // TypeScript相关配置
  arrowParens: 'always', // 箭头函数参数始终使用括号，有助于代码清晰
  bracketSpacing: true, // 在对象字面量声明所使用的的大括号内部添加空格

  // 与编辑器和其他工具集成
  useTabs: false, // 使用空格替代Tab
  tabWidth: 2, // 设置tab宽度为2

  // 其他配置
  proseWrap: 'always', // 总是折行，适用于Markdown等
  htmlWhitespaceSensitivity: 'css', // 尊重CSS中的空白字符
  plugins: ['prettier-plugin-tailwindcss'],
};

手动格式化

 prettier --write "src/**/*.{js,jsx,ts,tsx}"    

添加到package.json

 "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""

推荐开启保存自动格式化

安装husky

husky负责实现在git提交前检查规范

pnpm dlx husky-init && pnpm install

运行husky初始化，上面的脚本会帮我们添加一个prepare指令

 pnpm run prepare   

修改配置

把.husky/pre-commit 修改为

pnpm run prettier
pnpm run lint

记得把.husky添加到git

安装commitlint

commitlint可以让提交信息更规范

 pnpm install  -D @commitlint/{config-conventional,cli}       

初始化

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

把commitlint添加进husky

 pnpm dlx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

记得把commitlint.config.js添加到git

安装prisma

prisma 是nextjs中热门的ORM组件

pnpm dlx prisma  

初始化prisma

 pnpm dlx prisma init  

在.env文件中更改数据库链接字符串DATABASE_URL，小项目建议去Mongodb Atlas

模型定义在prisma/schema.prisma，这里我给出mongodb的配置和一些简单类型

generator client {
  provider = "prisma-client-js"
  output   = "./client" // 如果写了这个就不用配置webstorm排除目录了
}

datasource db {
  provider     = "mongodb"
  url          = env("DATABASE_URL")
  relationMode = "prisma"
}

model Post {
  id       String    @id @default(auto()) @map("_id") @db.ObjectId
  slug     String    @unique
  title    String
  body     String
  author   User      @relation(fields: [authorId], references: [id])
  authorId String    @db.ObjectId
  comments Comment[]
}

model User {
  id      String   @id @default(auto()) @map("_id") @db.ObjectId
  email   String   @unique
  name    String?
  address Address?
  posts   Post[]
}

model Comment {
  id      String @id @default(auto()) @map("_id") @db.ObjectId
  comment String
  post    Post   @relation(fields: [postId], references: [id])
  postId  String @db.ObjectId
}

// Address is an embedded document
type Address {
  street String
  city   String
  state  String
  zip    String
}

prisma会生成client便于类型提示，在你更改完schema.prisma后要运行

pnpm dlx prisma generate

在修改表后，还要运行push指令同步到数据库

pnpm dlx prisma db push

使用studio指令查看数据库表

pnpm dlx prisma studio  

如果你使用的是webstorm，注意要把这个文件夹标记为不排除，因为node_module这里webstorm默认不会生成索引，当你使用prisma generate后会动态生成新的代码，而由于webstorm默认不生成索引，你就不会得到ts的代码提示。

排除了就会重新索引这个文件，具体路径

/node_modules/.pnpm/@prisma+client@5.4.2/node_modules/.prisma

创建一个prisma客户端实例化代码，这段代码会在开发环境复用client实例（避免next的热更新造成重复创建实例）。

import { PrismaClient } from "@prisma/client";

const prismaClientSingleton = () => {
  return new PrismaClient();
};

type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>;

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClientSingleton | undefined;
};

const prisma = globalForPrisma.prisma ?? prismaClientSingleton();

export default prisma;

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

配置shadcn/ui

shadcn是一个开源的，可定制化很高的组件库，与传统的导入整个组件库不同，shadcn/ui会精确导入你使用的组件，并且你可以直接进一步修改这些组件，就像是自己写的一样。

https://ui.shadcn.com/

pnpm dlx shadcn-ui@latest init

除了tailwind.config.js需要改成ts，其他都用默认

Progress: resolved 198, reused 198, downloaded 0, added 198, done
✔ Would you like to use TypeScript (recommended)? … no / yes
✔ Which style would you like to use? › Default
✔ Which color would you like to use as base color? › Zinc
✔ Where is your global CSS file? … app/globals.css
✔ Would you like to use CSS variables for colors? … no / yes
✔ Where is your tailwind.config.js located? … tailwind.config.ts
✔ Configure the import alias for components: … @/components
✔ Configure the import alias for utils: … @/lib/utils
✔ Are you using React Server Components? … no / yes
✔ Write configuration to components.json. Proceed? … yes

需要任何组件从这里找https://ui.shadcn.com/docs/components/

文档里有写每个组件如何安装

pnpx dlx shadcn-ui@latest add xxx

之后正常在page中使用即可

使用trpc

pnpm add @trpc/server @trpc/client  @trpc/react-query   

创建trpc文件夹，然后分别创建client.ts，init.ts，index.ts

client.ts

import { AppRouter } from "@/trpc";
import { createTRPCReact } from "@trpc/react-query";

export const trpc = createTRPCReact<AppRouter>({});

index.ts 这里放端点，我还使用了zod动态验证数据格式，你可以安装pnpm install zod

下面写了一个创建新用户的例子

import db from "@/lib/prisma";
import { z } from "zod";
import { publicProcedure, router } from "@/trpc/init";

export const appRouter = router({
  createUser: publicProcedure
    .input(
      z.object({
        name: z.string(),
        email: z.string(),
      }),
    )
    .query(async ({ input }) => {
      await db.user.create({
        data: {
          name: input.name,
          email: input.email,
        },
      });
      return { success: true };
    }),
});

// Export type router type signature,
// NOT the router itself.
export type AppRouter = typeof appRouter;

init.ts 在这里你可以定义公开procedure，或者利用middleware创建私有的

import { initTRPC } from "@trpc/server";

/**
 * Initialization of tRPC backend
 * Should be done only once per backend!
 */
const t = initTRPC.create();

/**
 * Export reusable router and procedure helpers
 * that can be used throughout the router
 */
export const router = t.router;
export const publicProcedure = t.procedure;

给一个使用kinde的例子

import { getKindeServerSession } from '@kinde-oss/kinde-auth-nextjs/server'
import { TRPCError, initTRPC } from '@trpc/server'

const t = initTRPC.create()
const middleware = t.middleware

const isAuth = middleware(async (opts) => {
  const { getUser } = getKindeServerSession()
  const user = getUser()

  if (!user || !user.id) {
    throw new TRPCError({ code: 'UNAUTHORIZED' })
  }

  return opts.next({
    ctx: {
      userId: user.id,
      user,
    },
  })
})

export const router = t.router
export const publicProcedure = t.procedure
export const privateProcedure = t.procedure.use(isAuth)

推荐使用tanstack帮助trpc进行请求状态管理

https://tanstack.com/query/latest/docs/react/overview

安装tanstack

pnpm add @tanstack/react-query

具体使用方法推荐查看官网

现在需要创建一个Provider，把trpc与tanstack结合，在conponents文件夹下

"use client";

import { PropsWithChildren, useState } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import { trpc } from "@/trpc/client";

const Providers = ({ children }: PropsWithChildren) => {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: "http://localhost:3000/api/trpc",
        }),
      ],
    }),
  );
  return (
    <trpc.Provider queryClient={queryClient} client={trpcClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  );
};

export default Providers;

最后在最父层layout.tsx中把里面用Provider，你就可以在任何地方使用了

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import React from "react";
import Providers from "@/components/Providers";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <Providers>
        <body className={inter.className}>{children}</body>
      </Providers>
    </html>
  );
}

一个项目的初始化就完成啦

介绍如何将Vue/React等前端项目部署到服务器上。除了必须的服务器外，有域名和SSL证书访问会更方便。

项目打包

以React项目为例，首先运行npm run build 生成build文件夹

React 打包后通常会做以下几个优化：

1. 代码压缩：将代码中的无用空格、注释等内容删除，减小文件体积，加快页面加载速度。
2. Tree shaking：从代码中剔除未使用的模块，以减少打包后的文件大小。
3. 按需加载：将页面上的不同部分分割成不同的代码块，按需加载，提高页面的响应速度。
4. 代码分割：将代码拆分成多个小块，使得每个页面只加载必要的代码，而非整个应用程序的全部代码，提高页面加载速度。
5. 缓存：使用缓存技术来避免重复请求已经请求过的数据，从而提高应用程序的性能。
6. 代码优化：对代码进行一些细节上的优化，如避免使用不必要的循环或函数调用，以提高代码执行效率。

总的来说，React 打包后的优化目的是减小文件大小、提高加载速度和执行效率，从而提高用户的体验。

Nginx进行反向代理

什么是反向代理？

反向代理的主要区别在于代理的对象不同。在正向代理中，客户端通过代理服务器来访问其他服务器。而在反向代理中，代理服务器位于后端服务器之前，客户端不会直接与后端服务器通信，而是通过代理服务器来访问后端服务器。

具体来说，反向代理服务器在收到客户端请求后，会根据配置的策略和算法，将请求转发到后端服务器上，并将后端服务器的响应返回给客户端。客户端并不知道请求是由代理服务器转发到后端服务器上处理的，因为代理服务器会将自己的IP地址和端口隐藏在请求头中，而不是将客户端的真实IP地址发送到后端服务器。

使用反向代理的优势在于，它可以为后端服务器提供了一个额外的保护层，并且可以轻松地实现负载均衡、缓存优化、安全控制等功能。反向代理的核心思想就是代理服务器充当了客户端与后端服务器之间的中介，使得后端服务器更加安全、稳定和高效。

1. 安装 Nginx：安装并启动 Nginx。
2. 配置 Nginx：编辑 Nginx 配置文件（通常位于 /etc/nginx/nginx.conf），在 http 块中添加以下代码：

 bashCopy code
 server {
     listen 80;
     server_name example.com; # 填写你的域名或 IP
     root /path/to/your/react-project/build; # 填写你的 React 项目构建后的静态文件所在目录
     index index.html;
     location / {
         try_files $uri $uri/ /index.html; # 使得所有路由都指向 index.html 文件
     }
 }

这个配置文件将 Nginx 监听 80 端口，把所有的请求都转发到 React 项目构建后的静态文件中。其中 location / 的配置将使得所有的路由都指向 index.html 文件，这样可以避免出现 404 错误。

1. 重新加载 Nginx 配置：在终端中运行 sudo nginx -t 命令检查 Nginx 配置文件是否正确，如果正确，运行 sudo service nginx reload 命令重新加载配置文件。
2. 访问 React 应用：在浏览器中访问你的 IP 地址，应该能够看到 React 应用的首页了

这里提供一些Nginx常见指令

1. nginx 启动
2. nginx -s stop 快速停止
3. nginx -s quit 优雅关闭，在退出前完成已经接受的连接请求
4. nginx -s reload 重新加载配置

配置域名和证书

腾讯云，阿里云还是其他云厂商都差不多，这里以腾讯云为例。

1. 进入DNS控制台，添加一条A记录，内容是服务器的IP。注意放行80端口和443端口。

2. 申请SSL证书，用免费的就好

3. 下载Nginx证书，将crt和key文件上传到服务器上，然后按照下图路径配置/etc/nginx/nginx.conf，我这里还进行了跨域设置。

 server {
      #SSL 默认访问端口号为 443
       listen 443 ssl;
      # listen 65535 ssl; 
      #请填写绑定证书的域名
      server_name api.nanqiuu.dailymoments.site; 
      #请填写证书文件的相对路径或绝对路径
      ssl_certificate nanqiuu/api.nanqiuu.dailymoments.site_bundle.crt; 
      #请填写私钥文件的相对路径或绝对路径
      ssl_certificate_key nanqiuu/api.nanqiuu.dailymoments.site.key; 
      ssl_session_timeout 5m;
      #请按照以下协议配置
      ssl_protocols TLSv1.2 TLSv1.3; 
      #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
      ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
      ssl_prefer_server_ciphers on;
      add_header Access-Control-Allow-Origin $http_origin; 
     add_header Access-Control-Allow-Credentials true;
    add_header Access-Control-Allow-Methods *;
  #   预检命令的缓存，如果不缓存每次会发送两次请求
     add_header Access-Control-Max-Age 3600;
  add_header Access-Control-Allow-Headers 
     $http_access_control_request_headers;
 ​
     #   OPTIONS预检命令，预检命令通过时才发送请求
     #   检查请求的类型是不是预检命令
     if ($request_method = OPTIONS){
         return 200;
     }
      location / {
          #网站主页路径。此路径仅供参考，具体请您按照实际目录操作。
          #例如，您的网站主页在 Nginx 服务器的 /etc/www 目录下，则请修改 root 后面的 html 为 /etc/www。
          root html; 
          index  index.html index.htm;
   proxy_pass http://127.0.0.1:65535; 
      }
  }

配置完成后访问域名测试下能不能正常显示

webstorm进行快速上传

新建部署服务器

将build路径映射到服务器build路径

以后部署的时候只需要这样即可快速部署

大功告成

除此之外还可以使用自动化进行部署，自动拉取github的代码，以后更新～

转自：coderwhy，写项目按照这个来啦！

一. 代码规范

1.1. 集成editorconfig配置

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

 # http://editorconfig.org
 ​
 root = true
 ​
 [*] # 表示所有文件适用
 charset = utf-8 # 设置文件字符集为 utf-8
 indent_style = space # 缩进风格（tab | space）
 indent_size = 2 # 缩进大小
 end_of_line = lf # 控制换行类型(lf | cr | crlf)
 trim_trailing_whitespace = true # 去除行首的任意空白字符
 insert_final_newline = true # 始终在文件末尾插入一个新行
 ​
 [*.md] # 表示仅 md 文件适用以下规则
 max_line_length = off
 trim_trailing_whitespace = false

VSCode需要安装一个插件：EditorConfig for VS Code

1.2. 使用prettier工具

Prettier 是一款强大的代码格式化工具，支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言，基本上前端能用到的文件格式它都可以搞定，是当下最流行的代码格式化工具。

1.安装prettier

 npm install prettier -D

2.配置.prettierrc文件：

• useTabs：使用tab缩进还是空格缩进，选择false；
• tabWidth：tab是空格的情况下，是几个空格，选择2个；
• printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
• singleQuote：使用单引号还是双引号，选择true，使用单引号；
• trailingComma：在多行输入的尾逗号是否添加，设置为 none；
• semi：语句末尾是否要加分号，默认值true，选择false表示不加；

 {
   "useTabs": false,
   "tabWidth": 2,
   "printWidth": 80,
   "singleQuote": true,
   "trailingComma": "none",
   "semi": false
 }

3.创建.prettierignore忽略文件

 /dist/*
 .local
 .output.js
 /node_modules/**
 ​
 **/*.svg
 **/*.sh
 ​
 /public/*

4.VSCode需要安装prettier的插件

5.测试prettier是否生效

• 测试一：在代码中保存代码；
• 测试二：配置一次性修改的命令；

在package.json中配置一个scripts：

     "prettier": "prettier --write ."

1.3. 使用ESLint检测

1.在前面创建项目的时候，我们就选择了ESLint，所以Vue会默认帮助我们配置需要的ESLint环境。

2.VSCode需要安装ESLint插件：

3.解决eslint和prettier冲突的问题：

安装插件：（vue在创建项目时，如果选择prettier，那么这两个插件会自动安装）

 npm i eslint-plugin-prettier eslint-config-prettier -D

添加prettier插件：

   extends: [
     "plugin:vue/vue3-essential",
     "eslint:recommended",
     "@vue/typescript/recommended",
     "@vue/prettier",
     "@vue/prettier/@typescript-eslint",
     'plugin:prettier/recommended'
   ],

4. 添加忽略规则.eslintrc.js

 module.exports = {
   root: true,
   env: {
     node: true,
   },
   extends: [
     "plugin:vue/vue3-essential",
     "eslint:recommended",
     "@vue/typescript/recommended",
     "plugin:prettier/recommended",
   ],
   parserOptions: {
     ecmaVersion: 2020,
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
     "vue/multi-word-component-names": "off", //关闭组件名必须为多个单词
   },
 };
 ​

1.4. git Husky和eslint

虽然我们已经要求项目使用eslint了，但是不能保证组员提交代码之前都将eslint中的问题解决掉了：

• 也就是我们希望保证代码仓库中的代码都是符合eslint规范的；
• 那么我们需要在组员执行 git commit 命令的时候对其进行校验，如果不符合eslint规范，那么自动通过规范进行修复；

那么如何做到这一点呢？可以通过Husky工具：

• husky是一个git hook工具，可以帮助我们触发git提交的各个阶段：pre-commit、commit-msg、pre-push

如何使用husky呢？

这里我们可以使用自动配置命令：

 npx husky-init && npm install

这里会做三件事：

1.安装husky相关的依赖：

2.在项目目录下创建 .husky 文件夹：

 npx huksy install

3.在package.json中添加一个脚本：

接下来，我们需要去完成一个操作：在进行commit时，执行lint脚本：

这个时候我们执行git commit的时候会自动对代码进行lint校验。

1.5. git commit规范

1.5.1. 代码提交风格

通常我们的git commit会按照统一的风格来提交，这样可以快速定位每次提交的内容，方便之后对版本进行控制。

但是如果每次手动来编写这些是比较麻烦的事情，我们可以使用一个工具：Commitizen

• Commitizen 是一个帮助我们编写规范 commit message 的工具；

1.安装Commitizen

 npm install commitizen -D

2.安装cz-conventional-changelog，并且初始化cz-conventional-changelog：

 npx commitizen init cz-conventional-changelog --save-dev --save-exact

这个命令会帮助我们安装cz-conventional-changelog：

并且在package.json中进行配置：

这个时候我们提交代码需要使用 npx cz：

• 第一步是选择type，本次更新的类型

• 第二步选择本次修改的范围（作用域）

• 第三步选择提交的信息

• 第四步提交详细的描述信息

• 第五步是否是一次重大的更改

• 第六步是否影响某个open issue

我们也可以在scripts中构建一个命令来执行 cz：

1.5.2. 代码提交验证

如果我们按照cz来规范了提交风格，但是依然有同事通过 git commit 按照不规范的格式提交应该怎么办呢？

• 我们可以通过commitlint来限制提交；

1.安装 @commitlint/config-conventional 和 @commitlint/cli

 npm i @commitlint/config-conventional @commitlint/cli -D

2.在根目录创建commitlint.config.js文件，配置commitlint

 module.exports = {
   extends: ['@commitlint/config-conventional']
 }

3.使用husky生成commit-msg文件，验证提交信息：

 npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

二. 第三方库集成

2.1. vue.config.js配置

vue.config.js有三种配置方式：

• 方式一：直接通过CLI提供给我们的选项来配置：
  • 比如publicPath：配置应用程序部署的子目录（默认是 /，相当于部署在 https://www.my-app.com/）；
  • 比如outputDir：修改输出的文件夹；
• 方式二：通过configureWebpack修改webpack的配置：
  • 可以是一个对象，直接会被合并；
  • 可以是一个函数，会接收一个config，可以通过config来修改配置；
• 方式三：通过chainWebpack修改webpack的配置：
  • 是一个函数，会接收一个基于 webpack-chain 的config对象，可以对配置进行修改；

 const path = require('path')
 ​
 module.exports = {
   outputDir: './build',
   // configureWebpack: {
   //   resolve: {
   //     alias: {
   //       views: '@/views'
   //     }
   //   }
   // }
   // configureWebpack: (config) => {
   //   config.resolve.alias = {
   //     '@': path.resolve(__dirname, 'src'),
   //     views: '@/views'
   //   }
   // },
   chainWebpack: (config) => {
     config.resolve.alias.set('@', path.resolve(__dirname, 'src')).set('views', '@/views')
   }
 }

2.2. vue-router集成

安装vue-router的最新版本：

 npm install vue-router@next

创建router对象：

 import { createRouter, createWebHashHistory } from 'vue-router'
 import { RouteRecordRaw } from 'vue-router'
 ​
 const routes: RouteRecordRaw[] = [
   {
     path: '/',
     redirect: '/main'
   },
   {
     path: '/main',
     component: () => import('../views/main/main.vue')
   },
   {
     path: '/login',
     component: () => import('../views/login/login.vue')
   }
 ]
 ​
 const router = createRouter({
   routes,
   history: createWebHashHistory()
 })
 ​
 export default router

安装router：

 import router from './router'
 ​
 createApp(App).use(router).mount('#app')

在App.vue中配置跳转：

 <template>
   <div id="app">
     <router-link to="/login">登录</router-link>
     <router-link to="/main">首页</router-link>
     <router-view></router-view>
   </div>
 </template>

2.3. vuex集成

安装vuex：

 npm install vuex@next

创建store对象：

 import { createStore } from 'vuex'
 ​
 const store = createStore({
   state() {
     return {
       name: 'coderwhy'
     }
   }
 })
 ​
 export default store

安装store：

 createApp(App).use(router).use(store).mount('#app')

在App.vue中使用：

 <h2>{{ $store.state.name }}</h2>

2.4. element-plus集成

Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库：

• 相信很多同学在Vue2中都使用过element-ui，而element-plus正是element-ui针对于vue3开发的一个UI组件库；
• 它的使用方式和很多其他的组件库是一样的，所以学会element-plus，其他类似于ant-design-vue、NaiveUI、VantUI都是差不多的；

安装element-plus

 npm install element-plus

2.4.1. 全局引入

一种引入element-plus的方式是全局引入，代表的含义是所有的组件和插件都会被自动注册：

 import ElementPlus from 'element-plus'
 import 'element-plus/lib/theme-chalk/index.css'
 ​
 import router from './router'
 import store from './store'
 ​
 createApp(App).use(router).use(store).use(ElementPlus).mount('#app')

2.4.2. 局部引入

也就是在开发中用到某个组件对某个组件进行引入：

 <template>
   <div id="app">
     <router-link to="/login">登录</router-link>
     <router-link to="/main">首页</router-link>
     <router-view></router-view>
 ​
     <h2>{{ $store.state.name }}</h2>
 ​
     <el-button>默认按钮</el-button>
     <el-button type="primary">主要按钮</el-button>
     <el-button type="success">成功按钮</el-button>
     <el-button type="info">信息按钮</el-button>
     <el-button type="warning">警告按钮</el-button>
     <el-button type="danger">危险按钮</el-button>
   </div>
 </template>
 ​
 <script lang="ts">
 import { defineComponent } from 'vue'
 ​
 import { ElButton } from 'element-plus'
 ​
 export default defineComponent({
   name: 'App',
   components: {
     ElButton
   }
 })
 </script>
 ​
 <style lang="less">
 </style>

但是我们会发现是没有对应的样式的，引入样式有两种方式：

• 全局引用样式（像之前做的那样）；
• 局部引用样式（通过babel的插件）；

1.安装babel的插件：

 npm install babel-plugin-import -D

2.配置babel.config.js

 module.exports = {
   plugins: [
     [
       'import',
       {
         libraryName: 'element-plus',
         customStyleName: (name) => {
           return `element-plus/lib/theme-chalk/${name}.css`
         }
       }
     ]
   ],
   presets: ['@vue/cli-plugin-babel/preset']
 }

但是这里依然有个弊端：

• 这些组件我们在多个页面或者组件中使用的时候，都需要导入并且在components中进行注册；
• 所以我们可以将它们在全局注册一次；

 import {
   ElButton,
   ElTable,
   ElAlert,
   ElAside,
   ElAutocomplete,
   ElAvatar,
   ElBacktop,
   ElBadge,
 } from 'element-plus'
 ​
 const app = createApp(App)
 ​
 const components = [
   ElButton,
   ElTable,
   ElAlert,
   ElAside,
   ElAutocomplete,
   ElAvatar,
   ElBacktop,
   ElBadge
 ]
 ​
 for (const cpn of components) {
   app.component(cpn.name, cpn)
 }

2.5. axios集成

安装axios：

 npm install axios

封装axios：

 import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
 import { Result } from './types'
 import { useUserStore } from '/@/store/modules/user'
 ​
 class HYRequest {
   private instance: AxiosInstance
 ​
   private readonly options: AxiosRequestConfig
 ​
   constructor(options: AxiosRequestConfig) {
     this.options = options
     this.instance = axios.create(options)
 ​
     this.instance.interceptors.request.use(
       (config) => {
         const token = useUserStore().getToken
         if (token) {
           config.headers.Authorization = `Bearer ${token}`
         }
         return config
       },
       (err) => {
         return err
       }
     )
 ​
     this.instance.interceptors.response.use(
       (res) => {
         // 拦截响应的数据
         if (res.data.code === 0) {
           return res.data.data
         }
         return res.data
       },
       (err) => {
         return err
       }
     )
   }
 ​
   request<T = any>(config: AxiosRequestConfig): Promise<T> {
     return new Promise((resolve, reject) => {
       this.instance
         .request<any, AxiosResponse<Result<T>>>(config)
         .then((res) => {
           resolve((res as unknown) as Promise<T>)
         })
         .catch((err) => {
           reject(err)
         })
     })
   }
 ​
   get<T = any>(config: AxiosRequestConfig): Promise<T> {
     return this.request({ ...config, method: 'GET' })
   }
 ​
   post<T = any>(config: AxiosRequestConfig): Promise<T> {
     return this.request({ ...config, method: 'POST' })
   }
 ​
   patch<T = any>(config: AxiosRequestConfig): Promise<T> {
     return this.request({ ...config, method: 'PATCH' })
   }
 ​
   delete<T = any>(config: AxiosRequestConfig): Promise<T> {
     return this.request({ ...config, method: 'DELETE' })
   }
 }
 ​
 export default HYRequest

2.6. VSCode配置

 {
   "workbench.iconTheme": "vscode-great-icons",
   "editor.fontSize": 17,
   "eslint.migration.2_x": "off",
   "[javascript]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
   "files.autoSave": "afterDelay",
   "editor.tabSize": 2,
   "terminal.integrated.fontSize": 16,
   "editor.renderWhitespace": "all",
   "editor.quickSuggestions": {
     "strings": true
   },
   "dhttps://markdown.cztcode.com/008i3skNgy1gsqwar8xp1j30fq00ya9x.jpgebug.console.fontSize": 15,
   "window.zoomLevel": 1,
   "emmet.includeLanguages": {
     "javascript": "javascriptreact"
   },
   "explorer.confirmDragAndDrop": false,
   "workbench.tree.indent": 16,
   "javascript.updateImportsOnFileMove.enabled": "always",
   "editor.wordWrap": "on",
   "path-intellisense.mappings": {
     "@": "${workspaceRoot}/src"
   },
   "hediet.vscode-drawio.local-storage": "eyIuZHJhd2lvLWNvbmZpZyI6IntcImxhbmd1YWdlXCI6XCJcIixcImN1c3RvbUZvbnRzXCI6W10sXCJsaWJyYXJpZXNcIjpcImdlbmVyYWw7YmFzaWM7YXJyb3dzMjtmbG93Y2hhcnQ7ZXI7c2l0ZW1hcDt1bWw7YnBtbjt3ZWJpY29uc1wiLFwiY3VzdG9tTGlicmFyaWVzXCI6W1wiTC5zY3JhdGNocGFkXCJdLFwicGx1Z2luc1wiOltdLFwicmVjZW50Q29sb3JzXCI6W1wiRkYwMDAwXCIsXCIwMENDNjZcIixcIm5vbmVcIixcIkNDRTVGRlwiLFwiNTI1MjUyXCIsXCJGRjMzMzNcIixcIjMzMzMzM1wiLFwiMzMwMDAwXCIsXCIwMENDQ0NcIixcIkZGNjZCM1wiLFwiRkZGRkZGMDBcIl0sXCJmb3JtYXRXaWR0aFwiOjI0MCxcImNyZWF0ZVRhcmdldFwiOmZhbHNlLFwicGFnZUZvcm1hdFwiOntcInhcIjowLFwieVwiOjAsXCJ3aWR0aFwiOjExNjksXCJoZWlnaHRcIjoxNjU0fSxcInNlYXJjaFwiOnRydWUsXCJzaG93U3RhcnRTY3JlZW5cIjp0cnVlLFwiZ3JpZENvbG9yXCI6XCIjZDBkMGQwXCIsXCJkYXJrR3JpZENvbG9yXCI6XCIjNmU2ZTZlXCIsXCJhdXRvc2F2ZVwiOnRydWUsXCJyZXNpemVJbWFnZXNcIjpudWxsLFwib3BlbkNvdW50ZXJcIjowLFwidmVyc2lvblwiOjE4LFwidW5pdFwiOjEsXCJpc1J1bGVyT25cIjpmYWxzZSxcInVpXCI6XCJcIn0ifQ==",
   "hediet.vscode-drawio.theme": "Kennedy",
   "editor.fontFamily": "Source Code Pro, 'Courier New', monospace",
   "editor.smoothScrolling": true,
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "workbench.colorTheme": "Atom One Dark",
   "vetur.completion.autoImport": false,
   "security.workspace.trust.untrustedFiles": "open",
   "eslint.lintTask.enable": true,
   "eslint.alwaysShowStatus": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   }
 }

浅拷贝

定义

浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。 如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。

Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

    const info={name:"why"} //属性的value是值，所以只是复制值
    const obj=Object.assign({},info)
    obj.name="he"
    console.log(info)

    const obj1 = {a: {b: 1}}//属性的value是对象，复制的是引用
    const obj2 = Object.assign({}, obj1)

    obj1.a.b = 2
    obj2.a.b // 2
    console.log(obj2)

输出结果

{ name: 'why' }
{ a: { b: 2 } }

这里也可以用es6语法展开运算符进行浅拷贝

    const obj1 = {a: {b: 1}}//属性的value是对象
    const obj2 = {...obj1}

    obj1.a.b = 2
    obj2.a.b // 2
    console.log(obj2.a===obj1.a)

比较一下，结果为true，对象确实是同一个

深拷贝

深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象

利用lodash库实现深拷贝

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库

const _ = require('lodash');
const obj1 = {
    a: 1,
    b: {f: {g: 1}},
    c: [1, 2, 3]
};
const obj2 = _.cloneDeep(obj1);

console.log(obj1.b.f === obj2.b.f);

结果是false，深拷贝不是同一个对象

vuex的基本使用

创建一个store：

import {createStore} from 'vuex'

const store = createStore();

export default store;

在Main.js中使用：

import store from './store'

createApp(App).use(store).mount('#app')

state

在store中定义数据，需要在state属性中：

const store = createStore({
  state(){
    return{
      counter:0
    }
  }
});

在组件中使用时，需要从$store.state中获取：

<h2>{{$store.state.counter}}</h2>

mutations

在vuex的开发模式中，不推荐直接对数据进行操作，而是应该通过commit来提交一次数据操作。在store中定义mutations属性：

  mutations:{
    increment(state){
      state.counter++
    },
    decrement(state){
      state.counter--
    }
  }

在组件中调用store的commit方法，参数是要执行的mutation的方法名：

  methods:{
    increment(){
      this.$store.commit("increment")
    },
    decrement(){
      this.$store.commit("decrement")
    }
  }

mutations的一些补充

mutations中的方法的第一个参数是state，可以获取state中的变量，第二个参数是payload，即从外部传入的参数：

  mutations:{
    incrementN(state,payload){
      state.counter+=payload
    }
  },

    methods: {
      addTen(){
        this.$store.commit('incrementN',10)
      }
    },

另一种提交的风格是，将两个参数合并，即传入一个对象，当中有type来指明提交给某个函数：

this.$store.commit({
  type:'incrementN',
  incre:10
})

另外为了防止将方法名写错，可以使用常量的方式定义方法名：

  const INCREMENT_N = "increment_n";
    mutations:{
    [INCREMENT_N](state,payload){
      state.counter+=payload
    }
  },

mapState辅助函数

可以通过计算属性来简化获取state中的数据：

  computed:{
    sCounter(){
      return this.$store.state.counter
    }
  }

不过vuex为我们提供了一个函数，可以更加快速地获取到state中的变量：

import { mapState } from 'vuex'
  export default {
    computed:{
      sCounter(){
        return this.$store.state.counter
      },
      ...mapState(["counter","name"])
    }
  }

mapState传入的是要获取的state中的变量名数组，返回值是变量的computed对象，所以需要用…展开；也可以传入一个对象，可以自定义名字：

...mapState({
  sCounter:state=>state.counter,
  name:state=>state.name
})

在composition API中使用

vuex提供了一个useStore方法让我们在setup中可以获取到store：

import { useStore } from 'vuex'
import { computed } from 'vue'
  export default {
    setup(props) {
      const store = useStore();

      const sCounter = computed(()=>store.state.counter)

      return {
        sCounter
      }
    }
  }

如果要使用mapState，需要进行一些处理：

setup(props) {
      const store = useStore();

      const storeStateFns = mapState(["counter","name"]);
      const storeState = {};
      Object.keys(storeStateFns).forEach(fnKey =>{
        const fn = storeStateFns[fnKey].bind({$store:store});
        console.log(fnKey);
        storeState[fnKey]=computed(fn);
      })

      return {
        ...storeState 
      }
    }

mapState返回的都是函数，在执行时需要用到$store属性，所以需要加上bind。

对以上的内容进行封装以便使用：

      const storeStateFns = mapState(["counter","name"]);
      const storeState = {};
      Object.keys(storeStateFns).forEach(fnKey =>{
        const fn = storeStateFns[fnKey].bind({$store:store});
        console.log(fnKey);
        storeState[fnKey]=computed(fn);
      })

getters

一些数据可能需要结果处理之后再进行显示（和computed类似，不用在每一个组件中写计算属性），定义方式如下：

const store = createStore({
  state(){},
  mutations:{},
  getters:{
    totalPrice(state){
      let totalPrice=0;
      for (const book of state.books){
        totalPrice+=book.count*book.price
      }
      return totalPrice;
    }
  }
});

使用方式：

<h2>总价值:{{$store.getters.totalPrice}}</h2>

getters中定义的函数的第一个参数是state，可以获取state中定义的变量，第二个参数是getters，可以用其调用getters中其它的函数：

  getters:{
    totalPrice(state,getters){
      let totalPrice=0;
      for (const book of state.books){
        totalPrice+=book.count*book.price
      }
      return totalPrice * getters.currentDiscount;
    },
    currentDiscount(state){
      return state.discount*0.9;
    }
  }

getter函数的返回值可以是一个值，在使用时就应该如同上面所示：

<h2>总价值:{{$store.getters.totalPrice}}</h2>

也可以返回一个函数，返回函数的一个目的是传入我们的自定义参数：

totalPriceForCountN(state,getters){
  return function(n){
    let totalPrice=0;
    for (const book of state.books){
      if (book.count>=n){
        totalPrice+=book.count*book.price
      }
    }
    return totalPrice * getters.currentDiscount;
  }
}

使用时需要在后面加上小括号表示函数调用：

<h2>总价值:{{$store.getters.totalPriceForCountN(4)}}</h2>

vue-router的基本使用和配置

首先要有两个组件Home.vue和About.vue，之后将这两个组件注册到路由中：

import Home from '../pages/Home.vue';
import About from '../pages/About.vue';

// 配置映射关系
const routes = [
  {path: '/', component: Home},
  {path: '/home', component: Home},
  {path: '/about', component: About}
];

创建一个路由对象，并传入配置：

import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
// 创建一个路由对象router
const router = createRouter({
  routes,
  history: createWebHashHistory()
})

在main.js中使用router：

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

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

此时路由已经添加成功，需要在app.vue中使用路由组件。

router-view是用于显示路由中组件的地方，router-link是一个控制路由路径的a元素，使用如下：

  <div>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>

vue-router知识点补充

在路由关系中：

const routes = [
  {path: '/', component: Home},
  {path: '/home', component: Home},
  {path: '/about', component: About}
];

默认的’/’，可以为其指定一个component，也可以重定向到一个页面：

  {path: '/', redirect: '/home'},

route还有两个属性：name是为一个route定义一个名字，路由是可以通过这个name跳转的；meta定义了这个路由的内部数据，可以通过route.meta来获取到。

对于route-link，默认使用的是history的popstate策略，为其增加replace属性后将使用replacestate策略。

  <div>
    <router-link to="/home" replace>首页</router-link>
    <router-link to="/about" replace>关于</router-link>
    <router-view></router-view>
  </div>

被选中的route-link，会自动添加上两个class属性：router-link-active和router-link-exact-active

可以利用这个class为其配置样式。其中router-link-exact-active与router-link-active的区别是，router-link-exact-active只有在精准匹配时才会加上这个class（嵌套组件的嵌套路由），而router-link-active是任何父组件也会加上。

这个默认的class可以通过active-class和extra-active-class来修改：

  <div>
    <router-link to="/home" replace active-class="home-active">首页</router-link>
    <router-link to="/about" replace active-class="about-active">关于</router-link>
    <router-view></router-view>
  </div>

路由懒加载

在路由配置的component属性中，将原来的组件替换为一个function（import的promise）：

// import Home from '../pages/Home.vue';
// import About from '../pages/About.vue';

const routes = [
  {path: '/', redirect: '/home'},
  {path: '/home', component: ()=>{
    return import("../pages/Home.vue")
  }},
  {path: '/about', component: ()=>{
    return import("../pages/About.vue")
  }}
];

利用webpack的魔法注释来为组件分包文件命名，格式为/* webpackChunkName: “” */：

const routes = [
  {path: '/', redirect: '/home'},
  {path: '/home', component: ()=>{
    return import(/* webpackChunkName: "home-chunk" */"../pages/Home.vue")
  }},
  {path: '/about', component: ()=>{
    return import(/* webpackChunkName: "page-chunk" */"../pages/About.vue")
  }}
];

动态路由

在route中可以加上/:params来表示动态路由：

// route
  {
    path: "/user/:username",
    component: ()=>{
      return import("../pages/User.vue")
    }
  }

在route-link中，必须要匹配到对应的格式才能正确路由：

// route-link
    <router-link :to="'/user/'+name">用户</router-link>

在组件中获取动态路由的参数：一是从this中获取，在this.$route中：

<template>
  <div>
    <h2>User: {{$route.params.username}}</h2>
  </div>
</template>

<script>
  export default {
    created() {
      console.log(this.$route.params.username);
    },
  }
</script>

二是使用vue-route 4的钩子函数useRoute直接获取这个组件的route：

<script>
import {useRoute, useRouter} from "vue-router"
  export default {
    setup(props) {
      const route = useRoute();
      console.log(route.params.username);
    }
  }
</script>

嵌套路由同理。

NotFound

定义一个类似于动态路由中的route，不过path是固定写法：

  {
    // 固定写法pathMatch
    path: "/:pathMatch(.*)",
    component: ()=>{
      return import("../pages/NotFound.vue")
    }
  }

由此可以导向我们编写的NotFound的组件。

获取NotFound时的路径的方法：从route.params.pathMatch中获取：

<h2>{{$route.params.pathMatch}}</h2>

如果在/:pathMatch(.*)后面再加上一个*，就会将路径按照每一个”/”为分隔符进行分割并返回一个数组。

嵌套路由

现在home组件下还有两个子组件HomeShops和HomeMessage，分别应该使用/home/shops和/home/message来访问之，在配置路由时，在home的路由下的children属性来为这两个组件配置。

  {
    path: '/home', 
    component: ()=>{
      return import(/* webpackChunkName: "home-chunk" */"../pages/Home.vue")
    },
    name: "home",
    meta: {
      name: "shopkeeper"
    },
    children: [
      {
        path:'shops',
        component: ()=> import("../pages/HomeShops.vue")
      },
      {
        path:'message',
        component:()=> import("../pages/HomeMessage.vue")
      }
    ]
  },

可以发现在children中的route，path缺省了父组件的”/home”，并且也不需要加上”/”。

在children中设置重定向，path直接填写空字符串即可，但是redirect内容要填写完整的重定向路径：

    children: [
      {
        path:"",
        redirect:"/home/message"
      },
      {
        path:'shops',
        component: ()=> import("../pages/HomeShops.vue")
      },
      {
        path:'message',
        component:()=> import("../pages/HomeMessage.vue")
      }
    ]

编程式导航

编程式导航是指通过代码来实现跳转逻辑。例如我们需要点击一个按钮来跳转到“关于”页，假设有如下的button：

    <button @click="jumpToAbout">关于</button>

对于jumpToAbout方法，如果是在methods的options中定义，可以直接使用this.$router对象：

  methods: {
    jumpToAbout(){
      // 首先要拿到router对象（不推荐直接导入）
      this.$router.push("/about");
    }
  },

如果是在setup中，需要使用一个和useRoute相似的钩子函数useRouter：

import {useRouter} from 'vue-router'
export default {
  components: {
  },
  setup(props) {
    const router = useRouter();
    function jumpToAbout(){
      // 首先要拿到router对象（不推荐直接导入）
      router.push("/about");
    }
    return {
      name: "shopkeeper"
    }
  },

在这个push方法中还可以传入一个对象（router-link的to属性也可以传入对象），对象中可以包含其它的一些配置，例如：

      router.push({
        path:"/about",
        query:{
          name: "shopkeeper",
          age:18
        }
      });

参数可以在子组件的$route.query中获取：

<h2>About: {{$route.query.name}}-{{$route.query.age}}</h2>

router还有的方法例如replace、go、forward、back等都和history中的用法相同。

router-link的v-slot

router-link实际上可以看作是一个插槽，在这个标签的内部可以写入我们想要展示的元素或者组件：

    <router-link to="/home" replace active-class="home-active">
      <nav-bar title="首页"></nav-bar>
    </router-link>

route-link中定义v-slot属性，可以获取其内部传来的一个对象：

    <!-- props：href 跳转的链接 -->
    <!-- props：route对象 -->
    <!-- props：navigate函数 -->
    <!-- props：isActive 当前是否处于活跃状态 -->
    <!-- props：isExactActive 是否是精确活跃状态 -->
    <router-link to="/home" replace active-class="home-active" v-slot="props" custom>
      <!-- <nav-bar title="首页"></nav-bar> -->
      <button>{{props.href}}</button>
      <p>{{props.route}}</p>
      <button @click="props.navigate">导航</button>
      <span :class="{'active': props.isActive}">{{props.isActive}}</span>
    </router-link>

如果再加上custom属性的话，router-link将不会给插槽中的组件外层嵌套一个a标签，即此时跳转需要我们手动执行（使用props.navigate函数）。

router-view的v-slot

router-view也可以使用插槽，在v-slot中可以获取props.Component属性，即当前要显示的组件，通过这种方式就可以结合transition、component、keep-live等组件使用

动态添加/删除路由

对于一些需要选择性注释的路由，可以动态添加：

// 动态添加路由
const categoryRoute = {
  path: "/category",
  component: ()=>import("../pages/Category.vue") 
}
const momentRoute = {
  path: "moment",
  component: ()=>import("../pages/HomeMoment.vue") 
}
// 添加顶级的路由对象
router.addRoute(categoryRoute);
// 添加二级的路由对象
router.addRoute("home",momentRoute);

动态删除一个路由有三种方式：

• 添加一个name相同的路由，之前的路由就会被替代
• 通过removeRoute方法，传入路由的名称
• 通过addRoute方法的返回值回调（返回的值是一个删除路由的函数）

路由的其它一些方法补充：

• router.hasRoute() 检查路由是否存在
• router.getRoutes() 获取一个包含所有路由记录的数组

路由导航守卫

路由的导航守卫有多种函数可以实现，现在以beforeEach为例，beforeEach种传入一个函数：

// to：Route对象，即将跳转到的route对象
// from：Route对象，从哪个路由对象导航过来的
/**
 * 返回值：
 * 1.false：不进行导航
 * 2.undefined或者不写返回值：进行默认的导航
 * 3.字符串：路径，跳转到对应的路径中
 * 4.对象：类似于router.push({path:"/login",component})
 */
router.beforeEach((to, from)=>{
  console.log(to.path,from.path);
  if (to.path.indexOf("/home")!==-1){
    return "/login"
  }
})

使用导航守卫实现一个简单的登录逻辑：假定login组件中，按下登录按钮就会在localStorage中保存一个token，

<template>
  <div>
    <button @click="loginClick">登录</button>
  </div>
</template>

<script>
import {useRouter} from 'vue-router'
  export default {
    setup(props) {
      const router=useRouter()
      const loginClick=()=>{
        window.localStorage.setItem("token","shopkeper")
        router.push({
          path:"/home"
        })
      }
      return {loginClick}
    }
  }
</script>

那么在导航守卫中，如果要跳转到一个非login的页面，都应该判断本地是否有token，如果没有就应该跳转到login组件中：

router.beforeEach((to, from)=>{
  if (to.path!== "/login"){
    const token = window.localStorage.getItem("token");
    if (!token){
      return "/login"
    }
  }
})

其它的导航守卫可以参考官网

到目前为止，当我们使用栅格数据（例如XYZ瓦片源）时，我们仅仅将其用于演示目的——即将数据直接渲染到地图上。然而对我们从数据中获取的像素值在渲染前进行处理也是可能的。Raster数据源提供一种对任意数量的输入的数据进行像素处理的方式。当数据源被使用在一个Image图层上市，栅格处理的结果可以被渲染到地图上。

在本次练习中，我们将要使用高程数据来作为XYZ瓦片。我们将在数据被渲染前对其进行逐像素的操作，而不是直接渲染编码过的高程数据。

在这个模块中我们将要学习OpenLayers所有与vector tiles相关的内容，并使用 ol-mapbox-style 工具来处理Mapbox样式的文件。

在这个模块中，我们将使用WebGL来对CSV文件的陨石撞击数据进行自定义渲染。

这个模块使用Canvas 2D的上下文来渲染带有法向量图层的点，然后我们使用新的点渲染工具去使用WebGL来渲染同样的数据。最后我们将开发一个自定义的片段着色器来展示如何动态设置数据样式。

在这个模块中,我们将创建一个显示用户地理位置与朝向的移动端地图.这个例子的目的是展示如何将OpenLayers与第三方工具结合.

使用浏览器的Geolocation API来获取GPS位置,用第三方库kompas来获取用户设备陀螺仪的朝向,并将结果通过vector layer展现到地图上.