新的单文件组件(SFC)功能

<script setup>

<script setup> 是一种编译时语法糖，可在 SFC 内使用 Composition API 时极大地改善开发者体验，提升工作效率。vue3.2中的setup语法糖

示例：

1
2
3
4
5
6
7
8
9

<script setup>
  import { ref } from "vue";

  const color = ref("red");
</script>

<template>
  <button @click="color = color === 'red' ? 'green' : 'red'"> Color is: {{ color }} </button>
</template>

1
2
3
4
5
6
7

// chrome
new Date(1989, 4, 23);
// Tue May 23 1989 00:00:00 GMT+0900 (中国夏令时间)

// safari
new Date(1989, 4, 23);
// Tue May 23 1989 00:00:00 GMT+0800 (CST) = $6

中国夏时制实施时间规定(夏令时)

我国解放前几年在部分地区也曾实行过夏令时。1986 年 4 月，中央有关部门发出“在全国范围内实行夏时制的通知”，具体作法是：每年从四月中旬第一个星期日的凌晨 2 时整（北京时间），将时钟拨快一小时，即将表针由 2 时拨至 3 时，夏令时开始；到九月中旬第一个星期日的凌晨 2 时整（北京夏令时），再将时钟拨回一小时，即将表针由 2 时拨至 1 时，夏令时结束。从 1986 年到 1991 年的六个年度，除 1986 年因是实行夏时制的第一年，从 5 月 4 日开始到 9 月 14 日结束外，其它年份均按规定的时段施行。1992 年起，夏令时暂停实行。

1935 年至 1951 年，每年 5 月 1 日至 9 月 30 日。
1952 年 3 月 1 日至 10 月 31 日。
1953 年至 1954 年，每年 4 月 1 日至 10 月 31 日。
1955 年至 1956 年，每年 5 月 1 日至 9 月 30 日。
1957 年至 1959 年，每年 4 月 1 日至 9 月 30 日。
1960 年至 1961 年，每年 6 月 1 日至 9 月 30 日。
1974 年至 1975 年，每年 4 月 1 日至 10 月 31 日。
1979 年 7 月 1 日至 9 月 30 日。

1986 年至 1991 年，每年 4 月中旬的第一个星期日凌晨 2 时起至 9 月中旬的第一个星期日凌晨 2 时止。
具体如下：
1986 年 4 月 13 日至 9 月 14 日，
1987 年 4 月 12 日至 9 月 13 日，
1988 年 4 月 10 日至 9 月 11 日，
1989 年 4 月 16 日至 9 月 17 日，
1990 年 4 月 15 日至 9 月 16 日，
1991 年 4 月 14 日至 9 月 15 日。

import 语句和 import()属于 ES6 语法，而 require()属于 node 中的。其中 import()是 ES2020 引入函数，支持动态加载模块。

import 命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。

import 是静态加载资源，编译时放到代码块最顶层。

import()函数则是动态按需加载返回 Promise 对象。import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。

import()函数它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。

ES6(2015)

let 和 const

ES6常用语法

1
2
3

let name = '小豪'；// 这是值引用类型
const arr = [];   // 这是对象引用类型
arr[0] = '1'

模板字符串

模块化打包工具的由来

• ES-Mdule 的浏览器兼容性问题

  在浏览器支持 ES 模块之前，JavaScript 并没有提供的原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。

• 模块文件过多导致频繁发送网络请求的问题

  其次就是通过模块化的方式，划分出的模块文件会比较多，而我们前端应用又是运行在浏览器当中的。那每一个我们在应用中所需要的文件，都需要从服务器当中请求回来，这些零散的模块文件就必将会导致浏览器频繁发出请求，从而影响我们应用的工作效率。

• 资源文件模块化问题

  就是我们在前端应用开发过程当中，不仅仅只有 JavaScript 代码需要模块化。因为随着我们应用的日益复杂，我们的 html，css 这些资源文件同样也会面临相同的问题。

  

vite 的由来

当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。我们开始遇到性能瓶颈 —— 使用 JavaScript 开发的工具通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用 HMR，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。

Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。

一个 Promise 必然处于以下几种状态之一：

• 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
• 已兑现（fulfilled）: 意味着操作成功完成。
• 已拒绝（rejected）: 意味着操作失败。

方法

Promise.resolve

1
2
3
4
5
6
7
8

Promise.resolve("Success").then(
  function (value) {
    console.log(value); // "Success"
  },
  function (value) {
    // 不会被调用
  }
);

vue 剪切板功能

安装

1

npm install --save vue-clipboard2

在 main.js 中引入

1
2

import VueClipboard from "vue-clipboard2";
Vue.use(VueClipboard);

vue 整屏滚动

安装

1

npm install --save vue-fullpage.js

在 main.js 中引入

1
2
3

import VueFullPage from "vue-fullpage.js/dist/vue-fullpage.min.js";
import "./assets/css/fullpage.css";
Vue.use(VueFullPage);

vue 移动端网站的内容触摸滑动

在 vue 中如何引入 swiper

1
2

"swiper": "5.x",
"vue-awesome-swiper": "4.1.1",

配置

配置通 swiper 官网，api 链接

前言 - 课程介绍

课程背景

大前端时代背景下，前端开发人员掌握单一的 Web 端开发能力已经远远不够了，微信小程序、安卓 APP、IOS APP，甚至是 Windows 桌面端，还有最近出的鸿蒙系统开发，都成了我们成长需要掌握的技能。所以呢，市面上各种「跨平台」开发解决方案层出不穷，比较有代表性的就是： UniAPP 、 Flutter、 React Native、Taro、Weex 等等。

UniAPP 是基于「 Vue + 微信小程序 」语言体系，开发人员学习成本低上手快，同时随着如今 UniAPP 生态也逐步趋于成熟。所以，基于 UniAPP 开发多端项目，已经是很多中小型企业常用的技术解决方案。

那么，今天呢，我们就从 UniAPP 基础开始，对照企业级实践标准，从零到一，一步一步打造一个 多端（微信小程序 + H5 + 安卓 APP + IOS APP）的社区论坛类项目。