分类 学习笔记 下的文章

环境变量实际开发中，有多种环境，如：development 模式用于 vue-cli-service serveproduction 模式用于 vue-cli-service build 和 vue-cli-service test:e2etest 模式用于 vue-cli-service test:unit注意点：一个模式可以包含多个环境变量每个模式都会将环境变量中 NODE_ENV 的值设置为模式的名称可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量为一个特定模式准备的环境文件（如：.env.production）将会比一般的环境文件（如：.env）拥有更高的优先级....

简介Taro 是一个遵循 React 语法规范的开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用，内置了UI组件，还有物料市场，只编写一套代码就能够适配到多端。Tara 遵循 React 语法，集成的是 Nerv 框架。Nerv 是一款基于 virtual dom 技术的类 React UI 框架，它基于 React 标准，拥有和 React 一致的 API 与生命周期。得益于与 React 保持一致 API 的特性，Nerv 可以无缝兼容到 React 的相关生态，例如 react-route...

框架环境和基本使用Umi 是蚂蚁金服的底层前端框架， 是可扩展的企业级前端应用框架， 内置了路由、构建、部署、测试， 包含组件打包、文档工具、请求库、hooks 库、数据流等 ， 通过框架的方式简化 React 开发知识结构图官网：https://v3.umijs.org/zh-CN环境准备，快速上手准备工作：由于国内网络和前端的特殊性，在安装依赖等方面可能会失败或导致无法启动，浪费大量的时间，推荐使用 yarn 作为包管理器，并且使用国内镜像，推荐 yrm 这个工具管理 yarn 镜像# 安装 npm install -g yrm # 查看 yarn 镜像源 yrm ls # 切换...

mock 的使用安装 mockjsbower install --save mockjs文件中导入 mockjs 返回有个 mock 对象const Mock = require('mockjs')mock 对象中有一个 mock 函数 mock 会根据自己编写的模板自动生成模拟数据官网：http://mockjs.com初体验 const Mock = require('mockjs') /** * 返回的模拟数据都是对象类型 * 返回对象的 key list */ const data = Mock.mock({ // 生成的随机数组的长度是 5-10 "...

uni-app 简介uni-app 是一个使用 Vue.js 开发所有前端应用的框架。开发者编写一套代码，可发布到 iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。详细的 uni-app 官方文档，请翻阅 https://uniapp.dcloud.net.cn开发工具uni-app 官方推荐使用 HBuilderX 来开发 uni-app 类型的项目。主要好处：模板丰富完善的智能提示一键运行当然，你依然可以根据自己的喜好，选择使用 VS Code、Sublime、记事本... 等自己喜欢的编辑器！安装 scss/sass 编...

使用 npm 包小程序对 npm 的支持与限制目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用 npm 包有如下 3 个限制：不支持依赖于 Node.js 内置库的包不支持依赖于浏览器内置对象的包不支持依赖于 C++ 插件的包虽然 npm 上的包有千千万，但是能供小程序使用的包却 “为数不多”。Vant WeappVant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，助力开发者快速搭建小程序应用。它所使用的是 MIT 开源许可协议，对商业使用比较友好。官方文档地址：https://youzan.github.io/vant-...

自定义组件创建组件在项目的根目录中，鼠标右键，创建 components -> test 文件夹在新建的 components -> test 文件夹上，鼠标右键，点击 “新建 Component”键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中，例如：引用组件组件的引用方式分为 “局部引用” 和 “全局引用”，顾名思义：局部引用：组件只能在当前被引用的页面内使用全局引用：组件可以在每个小程序页面中使用局部引用组件在页面的 .json 配置文件中引...

页面导航页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种：<a> 链接location.href小程序中实现页面导航的两种方式声明式导航在页面上声明一个 <navigator> 导航组件通过点击 <navigator> 组件实现页面跳转编程式导航调用小程序的导航 API，实现页面的跳转声明式导航导航到 tabBar 页面tabBar 页面指的是被配置为 tabBar 的页面。在使用 <navigator> 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：url 表...

WXML 模板语法数据绑定数据绑定的基本原则 在 data 中定义数据在页面对应的 .js 文件中，把数据定义到 data 对象中即可：// pages/index.js Page({ data: { // 字符串类型数据 info: 'init data', // 数组类型的数据 msgList: [ { msg: 'hello' }, { msg: 'world' } ], imgSrc: 'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg'...

小程序简介文档：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/小程序与普通网页开发区别1. 运行环境不同网页运行在浏览器环境中；小程序运行在微信环境中2. API 不同由于运行环境的不同，所以小程序中，无法调用 DOM 和 BOM 的 API。但是，小程序中可以调用微信环境提供的各种 API，例如：地理定位扫码支付3. 开发模式不同网页的开发模式：浏览器 + 代码编辑器小程序有自己的一套标准开发模式：申请小程序开发账号安装小程序开发者工具创建和配置小程序项目第一个小程序注册开发账号https:/...

Pinia官网：https://pinia.vuejs.org/zh/一个全新的用于 Vue 的状态管理库介绍pinia 最初是 一个实验，目的是在2019年11月左右重新设计 Vue 状态管理在 Composite API 上的样子，也就是下一代 Vuex之前的 Vuex 主要服务于 Vue2，选项式 API如果想要在 Vue3 中使用 Vuex，需要使用它的版本4只是一个过渡的选择，还有很大缺陷所以在 Vue3 伴随着组合式 API 诞生之后，也设计了全新的 Vuex：Pinia，也就是 Vuex5提案链接：https://github.com/vuejs/rfcs/pull/271...

一. 简介react-router ：核心模块，包含 React 路由大部分的核心功能，包括路由匹配算法和大部分核心组件和钩子。react-router-dom：React 应用中用于路由的软件包，包括 react-router 的所有内容，并添加了一些特定于 DOM 的 API，包括但不限于 BrowserRouter、HashRouter 和 Link。react-router-native： 用于开发 React Native 应用，包括 react-router 的所有内容，并添加了一些特定于 React Native 的 API，包括但不限于 NativeRouter 和 Li...

十五、Mobxhttps://cn.mobx.js.org/npm i mobx@51. Mobx 介绍Mobx 是一个功能强大，上手非常容易的状态管理工具Mobx 背后的哲学很简单: 任何源自应用状态的东西都应该自动地获得Mobx 利用 getter 和 setter 来收集组件的数据依赖关系，从而在数据发生变化的时候精确知道哪些组件需要重绘，在界面的规模变大的时候，往往会有很多细粒度更新（vue类似）2. Mobx 与 redux 的区别Mobx 写法上更偏向于 OOP对一份数据直接进行修改操作，不需要始终返回一个新的数据并非单一 store，可以多 storeRedux 默认以 J...

八、React 生命周期1. 初始化阶段2. 运行中阶段3. 销毁阶段老生命周期的问题componentWillMount，在 ssr 中这个方法将会被多次调用，所以会重复触发多遍，同时在这里如果绑定事件，将无法解绑，导致内存泄漏，变得不够安全高效逐步废弃componentWillReceiveProps 外部组件多次频繁更新传入多次不同的 props，会导致不必要的异步请求componetWillupdate，更新前记录 DOM 状态, 可能会做一些处理，与 componentDidUpdate 相隔时间如果过长，会导致状态不太信新生命周期的提替代getDerivedStateFrom...

一、React 介绍1. React 起源与发展React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。2. React 与传统 MVC 的关系轻量级的视图层库！A JavaScript library for building user interfacesReact 不是一个完整的 MVC 框架，最多可以认为是 MVC 中的 V（View），甚至 React 并不非常认可 MVC 开发模式；React 构建页...

使用 CRA 创建支持 TS 的项目React 脚手架工具 create-react-app（简称：CRA）默认支持 TypeScript创建支持 TS 的项目命令：npx create-react-app 项目名称 --template typescript当看到以下提示时，表示支持 TS 的项目创建成功： 更多：在已有项目中使用 TS相当于非 TS 项目目录结构主要以下三个变化：项目根目录中增加了 tsconfig.json 配置文件：指定 TS 的编译选项（比如，编译时是否移除注释）React 组件的文件扩展名变为：*.tsxsrc 目录中增加了 react-app-env.d.t...

概述几乎所有的 JavaScript 应用都会引入许多第三方库来完成任务需求这些第三方库不管是否用 TS 编写的，最终都要编译成 JS 代码，才能发布给开发者使用我们知道是 TS 提供了类型，才有了代码提示和类型保护机制但在项目开发中使用第三方库时，就会发现它们几乎都有相应的 TS 类型，这些类型是怎么来的呢类型声明文件：用来为已存在的 JS 库提供类型信息这样在 TS 项目中使用这些库时，就像用 TS 一样，都会有代码提示、类型保护等机制了TS 的两种文件类型.ts 文件既包含类型信息又可执行代码可以被编译成 .js 文件，然后执行代码用途：编写程序代码的地方.d.ts 文件只包含类型...

class 类TypeScript 全面支持 ES2015 中引入 class 关键字，并为其添加了类型注解和其他语法（比如，可见性修饰符等）class 基本使用，如下：根据 TS 中的类型推论，可以知道 Person 类的实例对象 p 的类型是 PersonTS 中的 class，不仅提供了 class 的语法功能，也作为一种类型存在类的实例属性初始化：class Person { age: number gender = '男' // gender: string = '男' }声明成员age，类型为 number（没有初始值）声明成员 gender，并设置初始值，此时可...

TypeScript 常用类型类型例子描述number1, -33, 2.5任意数字string'hi', `"hi", ´hi´任意字符串booleantrue、false布尔值 true 或 false字面量其本身限制变量的值就是该字面量的值any*任意类型unknown*类型安全的 anyvoid空值（undefined）没有值（或 undefined）never没有值不能是任何值object{ name: '孙悟空' }任意的 JS 对象array[1, 2, 3]任意 JS 数组tuple[4, 5]元素，TS 新增类型，固定长度数组enumenum{ ...

TypeScript 介绍TypeScript（简称TS）是 JavaScript 的超集（JS有的TS都有）TypeScript = Type + JavaScript（在JS基础之上，为 JS 添加了类型支持）TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行// TypeScript 代码：有明确的类型，即 : nmber (数值类型) let age1: number = 18 // JavaScript 代码：无明确的类型 let age2 = 18 TypeScript 为什么要为 JS ...

React Router 6 快速上手1.概述React Router 以三个不同的包发布到 npm 上，它们分别为：react-router: 路由的核心库，提供了很多的：组件、钩子。react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter>等 。react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:<NativeRouter>等。与React Router 5.x 版本相比，改变了什么？内置组...

件通信方式总结组件间的关系：父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）几种通信方式：props：children propsrender props消息订阅-发布：pubs-sub、event 等等集中式管理：redux、dva 等等conText:生产者-消费者模式比较好的搭配方式：父子组件：props兄弟组件：消息订阅-发布、集中式管理祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)

1. setStatesetState 更新状态的2种写法 (1). setState(stateChange, [callback]) ------ 对象式的 setState 1.stateChange 为状态改变对象(该对象可以体现出状态的更改) 2.callback 是可选的回调函数, 它在状态更新完毕、界面也更新后(render 调用后)才被调用 (2). setState(updater, [callback]) ------ 函数式的 setState ...