目介绍

首先要介绍自己的项目，项目目标是什么，比如：

目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习vue3、vite、ts等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。

简单的介绍一下项目

编辑

添加图片注释，不超过 140 字（可选）

文档准备

准备一个文档用于介绍项目常用配置，项目主题，样式，组件等说明

需要掌握的基础知识

介绍项目中使用到的技术，比如下面的举例：

本项目需要一定前端基础知识，请确保掌握 Vue 的基础知识，以便能处理一些常见的问题。 建议在开发前先学一下以下内容，提前了解和学习这些知识，会对项目理解非常有帮助:

• Vue3 文档
• Vue-RFCS
• Vue2 迁移到 3
• TypeScript
• Vue-router
• Ant-Design-Vue
• Es6
• Vitejs
• WindiCss

浏览器支持

考虑到硬件支持等情况说明：

本地开发推荐使用Chrome 最新版浏览器，不支持Chrome 80以下版本。

生产环境支持现代浏览器，不支持 IE。

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

项目规范

项目内集成了以下几种代码校验方式

1. eslint 用于校验代码格式规范
2. commitlint 用于校验 git 提交信息规范
3. stylelint 用于校验 css/less 规范
4. prettier 代码格式化

ESLint

ESLint 是一个代码规范和错误检查工具，有以下几个特性

• 所有东西都是可以插拔的。你可以调用任意的 rule api 或者 formatter api 去打包或者定义 rule or formatter。
• 任意的 rule 都是独立的
• 没有特定的 coding style，你可以自己配置

手动校验代码

执行下面代码.能修复的会自动修复，不能修复的需要手动修改 yarn run lint:eslint

配置项

项目的 eslint 配置位于根目录下 .eslintrc.js 内，可以根据团队自行修改代码规范

编辑器配合

推荐使用 vscode 进行开发，vscode 自带 eslint 插件，可以自动修改一些错误。

同时项目内也自带了 vscode eslint 配置，具体在 .vscode/setting.json 文件夹内部。只要使用 vscode 开发不用任何设置即可使用

CommitLint

在一个团队中，每个人的 git 的 commit 信息都不一样，五花八门，没有一个机制很难保证规范化，如何才能规范化呢？可能你想到的是 git 的 hook 机制，去写 shell 脚本去实现。这当然可以，其实 JavaScript 有一个很好的工具可以实现这个模板，它就是 commitlint（用于校验 git 提交信息规范）。

配置

commit-lint 的配置位于项目根目录下 commitlint.config.js

Git 提交规范

• 参考 vue 规范 (Angular)
• feat 增加新功能
• fix 修复问题/BUG
• style 代码风格相关无影响运行结果的
• perf 优化/性能提升
• refactor 重构
• revert 撤销修改
• test 测试相关
• docs 文档/注释
• chore 依赖更新/脚手架配置修改等
• workflow 工作流改进
• ci 持续集成
• mod 不确定分类的修改
• wip 开发中
• types 类型修改

Stylelint

stylelint 用于校验项目内部 css 的风格,加上编辑器的自动修复，可以很好的统一项目内部 css 风格

配置

stylelint 配置位于根目录下 stylelint.config.js

编辑器配合

如果您使用的是 vscode 编辑器的话，只需要安装下面插件，即可在保存的时候自动格式化文件内部 css 样式

插件

StyleLint

Prettier

prettier 可以用于统一项目代码风格，统一的缩进，单双引号，尾逗号等等风格

配置

prettier 配置文件位于项目根目录下 prettier.config.js

编辑器配合

如果您使用的是 vscode 编辑器的话，只需要安装下面插件，即可在保存的时候自动格式化文件内部 js 格式

插件

Prettier

目录说明

说明目录使用规范：

.
├── build # 打包脚本相关
├── mock # mock文件夹
├── public # 公共静态资源目录
├── src # 主目录
│   ├── api # 接口文件
│   ├── assets # 资源文件
│   │   ├── icons # icon sprite 图标文件夹
│   │   ├── images # 项目存放图片的文件夹
│   │   └── svg # 项目存放svg图片的文件夹
│   ├── components # 公共组件
│   ├── design # 样式文件
│   ├── directives # 指令
│   ├── enums # 枚举/常量
│   ├── hooks # hook
│   │   ├── component # 组件相关hook
│   │   ├── core # 基础hook
│   │   ├── event # 事件相关hook
│   │   ├── setting # 配置相关hook
│   │   └── web # web相关hook
│   ├── layouts # 布局文件
│   │   ├── default # 默认布局
│   │   ├── iframe # iframe布局
│   │   └── page # 页面布局
│   ├── locales # 多语言
│   ├── logics # 逻辑
│   ├── main.ts # 主入口
│   ├── router # 路由配置
│   ├── settings # 项目配置
│   │   ├── componentSetting.ts # 组件配置
│   │   ├── designSetting.ts # 样式配置
│   │   ├── encryptionSetting.ts # 加密配置
│   │   ├── localeSetting.ts # 多语言配置
│   │   ├── projectSetting.ts # 项目配置
│   │   └── siteSetting.ts # 站点配置
│   ├── store # 数据仓库
│   ├── utils # 工具类
│   └── views # 页面
├── test # 测试
│   └── server # 测试用到的服务
│       ├── api # 测试服务器
│       ├── upload # 测试上传服务器
│       └── websocket # 测试ws服务器
├── types # 类型文件
├── vite.config.ts # vite配置文件
└── windi.config.ts # windcss配置文件

项目配置项

主要是提供不同环境的项目配置功能：

环境变量配置

项目的环境变量配置位于项目根目录下的 .env、.env.development、.env.production

.env                # 在所有的环境中被载入 
.env.local          # 在所有的环境中被载入，但会被 git 忽略 
.env.[mode] # 只在指定的模式中被载入 
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

其它配置

1、组件默认参数配置、组件，分页、弹窗等等、显示、隐藏；

2、缓存配置

3、配置多语言信息

4、主题色配置

5、css 前缀设置

6、用于预设一些颜色数组

路由

路由主要以meta配置为主。

Meta 配置说明：比如：

1、外部页面嵌套

2、外链

3、动态路由Tab自动关闭功能

4、这里的icon配置，会同步到菜单

5、新增路由

6、Redirect

7、如何开启页面缓存、如何让某个页面不缓存

export interface RouteMeta {
  // 路由title  一般必填
  title: string;
  // 动态路由可打开Tab页数
  dynamicLevel?: number;
  // 动态路由的实际Path, 即去除路由的动态部分;
  realPath?: string;
  // 是否忽略权限，只在权限模式为Role的时候有效
  ignoreAuth?: boolean;
  // 可以访问的角色，只在权限模式为Role的时候有效
  roles?: RoleEnum[];
  // 是否忽略KeepAlive缓存
  ignoreKeepAlive?: boolean;
  // 是否固定标签
  affix?: boolean;
  // 图标，也是菜单图标
  icon?: string;
  // 内嵌iframe的地址
  frameSrc?: string;
  // 指定该路由切换的动画名
  transitionName?: string;
  // 隐藏该路由在面包屑上面的显示
  hideBreadcrumb?: boolean;
  // 如果该路由会携带参数，且需要在tab页上面显示。则需要设置为true
  carryParam?: boolean;
  // 隐藏所有子菜单
  hideChildrenInMenu?: boolean;
  // 当前激活的菜单。用于配置详情页时左侧激活的菜单路径
  currentActiveMenu?: string;
  // 当前路由不再标签页显示
  hideTab?: boolean;
  // 当前路由不再菜单显示
  hideMenu?: boolean;
  // 菜单排序，只对第一级有效
  orderNo?: number;
  // 忽略路由。用于在ROUTE_MAPPING以及BACK权限模式下，生成对应的菜单而忽略路由。2.5.3以上版本有效
  ignoreRoute?: boolean;
  // 是否在子级菜单的完整path中忽略本级path。2.5.3以上版本有效
  hidePathForChildren?: boolean;
}

权限

1. 通过用户角色来过滤菜单(前端方式控制)，菜单和路由分开配置
2. 通过用户角色来过滤菜单(前端方式控制)，菜单由路由配置自动生成
3. 通过后台来动态生成路由表(后台方式控制)

前端角色权限

实现原理: 在前端固定写死路由的权限，指定路由有哪些权限可以查看。只初始化通用的路由，需要权限才能访问的路由没有被加入路由表内。在登陆后或者其他方式获取用户角色后，通过角色去遍历路由表，获取该角色可以访问的路由表，生成路由表，再通过 router.addRoutes 添加到路由实例，实现权限的过滤。

缺点: 权限相对不自由，如果后台改动角色，前台也需要跟着改动。适合角色较固定的系统

数据 mock&联调

提供不同环境的联调和测试功能

1、跨域处理

1、没有跨域时的配置

2、跨域原理解析

2、接口请求

1. 页面交互操作；
2. 调用统一管理的 api 请求函数；
3. 使用封装的 axios.ts 发送请求；
4. 获取服务端返回数据
5. 更新 data；

接口统一存放于 src/api/ 下面管理

3、axios 配置

1、更改参数格式

2、多个接口地址

3、删除请求 URL 携带的时间戳参数

4、Mock 服务

Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发进程所阻塞。

本地 Mock

本地 mock 采用 Node.js 中间件进行参数拦截（不采用 mock.js 的原因是本地开发看不到请求参数和响应结果）。

线上 mock

由于该项目是一个展示类项目，线上也是用 mock 数据，所以在打包后同时也集成了 mock。通常项目线上一般为正式接口。

项目线上 mock 采用的是 mockjs 进行 mock 数据模拟。

组件注册

提供组件注册功能，丰富全局注册，异步注册等方式；

1、按需引入

2、全局注册

3、全局按需注册

样式

主要介绍如何在项目中使用和规划样式文件。

引入外部模块

考虑2个点：

1、全局使用

2、局部使用

构建&部署

构建

项目开发完成之后，执行以下命令进行构建

yarn build

构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件

旧版浏览器兼容

在 .env.production 内

设置 LEGACY=true 即可打包出兼容旧版浏览器的代码

LEGACY = true

预览

发布之前可以在本地进行预览，有多种方式，这里介绍两种

不能直接打开构建后的 html 文件

• 使用项目自定的命令进行预览(推荐)

先打包在进行预览 yarn preview

直接预览本地 dist 文件目录 yarn preview:dist

压缩

1、开启 gzip 压缩（开启 gzip，并配合 nginx 的gzip_static功能可以大大加快页面访问速度）

2、开启 brotli 压缩（brotli 是比 gzip 压缩率更高的算法，可以与 gzip 共存不会冲突，需要 nginx 安装指定模块并开启即可。）

发布

简单的部署只需要将最终生成的静态文件，dist 文件夹的静态文件发布到你的 cdn 或者静态服务器即可，需要注意的是其中的 index.html 通常会是你后台服务的入口页面，在确定了 js 和 css 的静态之后可能需要改变页面的引入路径。

前端路由与服务端的结合

项目前端路由使用的是 vue-router，所以你可以选择两种方式：history 和 hash。

• hash 默认会在 url 后面拼接#
• history 则不会，不过 history 需要服务器配合

高兴铁铁们能来看html网页设计第二期~~~~撒花~~~~~

哎呀呀~实在是抱歉备注标签我记错了QAQ

<!--内容打这里-->这个才是备注标签不是//

首先我们先来学习上节课留下的剧透，分别是:

1.标题标签h1~h6

有人就说了标题标签上次剧透不就只有h1标签吗?

嘿嘿，其实他还有兄弟姐妹啦~

看图，代码是从上往下从左往右执行的请记住这个顺序哦~

还有,左边是代码右边是网页上面的效果哦~

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>页面标题</title>

</head>

<body>

<!--标题标签是h1~h6-->

<h1>1</h1><!--最大-->

<h2>2</h2>

<h3>3</h3>

<h4>4</h4>

<h5>5</h5>

<h6>6</h6><!--最小-->

</body>

</html>

如图所示，h1标签是最大的，h6标签是最小的

是不是很简单呀,现在已经学会了一个知识点了哦~

2.段落标签 p标签

源代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<!--千万要记住内容是写在标签里面的哦~-->

<!--段落标签是独占一条的哦-->

<p>第一条p标签</p>

<p>第二条p标签</p>

<p>第三条p标签</p>

</body>

</html>

3.链接标签 a标签

链接标签是什么?顾名思义就是一个链接看代码：

<a href="https://www.baidu.com">百度</a>

href是什么东西啊？是a标签的属性啦~里面用来输入你需要跳转到的网页的链接

属性里面的东西是不会出现在网页上面的出现的只有在a标签里面的内容哦

当我点击百度这两个字后就给我跳转到了我们href属性里面的https://www.baidu.com

当然我们也可以跳转到我们自己制作的网页上面但要求是同一个项目下面的网页

是不是很有趣~

看视频:

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

视频中我们点击链接后就跳转到了山这个网页出现了一张山的图片，是不是有点小意思~

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<a href="new_file3.html">跳转到山的网页</a><!--只有同一个项目下面的网页才能相互跳转-->

</body>

</html>

4.图像标签 img标签

图像标签标签如其意，就是用来上传图像的一个标签~~

我们这里介绍一下img的两个属性:

<img src="img/OIP-C.jpg" alt="山"/>

src就是用来放图片的地址的，他会根据地址去找图片然后把图片放到网页上面。

alt有什么用啊就是当图片显示失败的时候就会显示alt里面的文字

看视频:

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

我们把图片的地址破坏后，就会显示一个图片错误的图标和alt里面的内容

怎么拖图片到img文件下，老师~~~我不知道

看视频

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

嘿嘿就直接把文件拖进来就ok了是不是很简单~

okk，好快啊怎么一下就学完了今天的知识点~~~

嘻嘻今天可是有作业的~

请根据下面的网页仿写一下:

完成后作业发再评论区哦，有什么不懂的可以留言包回答的。

加油呀，每天学一点争取做出属于自己的一个网页~

上一期

ni-app 是公司常用的一个框架，随着 vue3 的普及，好多公司的项目都已经开始使用 vue3 + uni-app + vite 开发项目，顺手记录和分享一下我在这过程中遇到的问题。

一、npx 与 npm 区别

npm 都很熟，可是与 npm 如此相似的 npx 是干嘛的呢？我们为甚要介绍 npx ?

由于 uni-app 官方提供创建命令使用的是 npx，所以我们先来了解下 npx 是干什么的？它与 npm 的区别。

npx 是 npm 的高级版本，它从 npm v5.2 版本开始引入的，与 npm 绑定在一起，无需额外安装，具有更大的功能。npx 是 npm exec 的别名，如果没有时，可以手动：npm install -g npx 进行安装。

区别：

• npm 只能通过 package.json 里定义然后执行命令，npx 可以直接执行 node_module 包中的命令。
• npx 可以指定 node 、命令的版本，解决不同项目使用不同版本的命令问题。
• 临时安装可执行依赖包，不用全局安装，也不用担心长期的污染。

二、使用 Vue3/Vite 版创建项目

2.1、创建 js 开发的项目：

npx degit dcloudio/uni-preset-vue#vite my-vue3-js

执行命令后会自动创建项目，然后执行：

cd my-vue3-js  // 进入my-vue3-js项目

执行：

npm install

依赖下载完成之后，就可以使用命令：

npm run dev:h5

启动网页服务。至此，项目就创建完成，并可进行预览：

2.2、创建以 typeScript 开发的项目

创建命令：

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

回车开始创建的时候会报错：could not fetch remote https://github.com/dcloudio/uni-prset-vue，由于网络或者域名拦截引起的错误。

可以直接打开 github 地址：https://github.com/dcloudio/uni-preset-vue

或者 gitee 下载地址：https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip

下载 zip 压缩包。

解压之后，运行：

npm install

安装依赖完成之后，可以使用：

npm run dev:h5

就可以正常运行项目了。

如果不熟悉 uni-app 项目的同学，可以自己在官网看看它的运行命令都有哪些以及它们的意义。

官方创建文档地址：https://uniapp.dcloud.io/quickstart-cli.html#%E5%88%9B%E5%BB%BAuni-app

三、项目结构及作用

以 uni-app + vue3 + vite + ts 项目为例，项目结构目录如图：

• index.html 首页入口文件。
• package.json 项目配置文件。
• tsconfig.json typescript 配置文件。
• vite.config.ts vite 的配置文件。

src 存放开发资源文件，基本要做的事情都在这个目录内，里面又包含了几个目录文件：

• pages 存放所有页面文件，我们创建的页面组件都放入该文件夹。
• static 存放静态资源的文件夹。
• App.vue 页面入口文件，所有页面都在 App.vue 下进行切换。
• env.d.ts 第三方模块的类型声明文件。
• main.ts 项目入口文件，因为使用 ts 语法，所以后缀是 .ts
• mainfest.json 应用配置文件，用于指定应用名称、图标、权限等。
• pages.json 全局配置文件，可以配置页面文件路径、窗口样式、原生的导航栏、底部tab栏等。
• uni.scss 是uni-app的样式包，在其他文件中可以快速引用样式包内的样式。