22-project
React综合案例一、概要1、开发背景因公司某项目的业务数据管理需要，公司决定安排开发人员组成项目小组，为该项目开发一个后台管理系统，实现该项目日常业务数据的展示和维护。 2、技术栈使用react框架来完成本次项目的实现，采用前后端分离式开发，使用前端技术有如下一些： react react-router-dom redux react-redux react-thunk immutable styled-components antd react-transition-group axios …… 后端技术有： PHP MySQL Redis Laravel …… 3、开发环境开发环境为：windows 开发工具：vscode + jsx插件 + eslint 开发调试工具：chrome浏览器 开发运行环境：node环境 上线环境为：linux + nginx + git 4、效果预览 5、项目初始化a. 首先找个位置创建一下react项目，命令如下： 1npx create-react-app backend b. 创建好项目后，进入项目 ...
21-Hooks
一、Hooks1、简介React中组建由函数组件与类组件，在 React Hooks 出现之前，我们可以使用函数和类组件来进行项目开发，但是如果组件中需要进行状态管理，函数组件就显得无能为力。React在v16.8 的版本中推出了 React Hooks 新特性，Hook是一套工具函数的集合,它增强了函数组件的功能，hook不等于函数组件，所有的hook函数都是以use开头。（以use开头的方法，称之为hook） 使用 React Hooks 相比于从前的类组件有以下几点好处： 代码可读性更强，原本同一块功能的代码逻辑被拆分在了不同的生命周期函数中，容易使开发者不利于维护和迭代，通过 React Hooks 可以将功能代码聚合，方便阅读维护 组件树层级变浅，在原本的代码中，我们经常使用 HOC/render/Props 等方式来复用组件的状态，增强功能等，无疑增加了组件树层数及渲染，而在 React Hooks 中，这些功能都可以通过强大的自定义的 Hooks 来实现 hook使用比使用类组件简单许多（仁者见仁智者见智） 2、hook的使用限制 hook只 ...
20-React
React一、概述官网：https://reactjs.org/ 中文网（个人翻译站）：https://react.docschina.org/ 1、介绍React起源于Facebook的内部项目，它是一个用于构建用户界面的javascript库，Facebook用它来架设公司的Instagram网站，并于2013年5月开源。 React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。认为它可能是将来Web开发的主流工具之一。 2、特点 声明式 你只需要描述UI看起来是什么样式，就跟写HTML一样，React负责渲染UI 基于组件 组件是React最重要的内容，组件表示页面中的部分内容 学习一次，随处使用 使用React可以开发Web应用—ReactJs 使用React可以开发移动端—react-native 可以开发VR应用—react 360 3、React与传统MVC的关系React用于构建用户界面的JavaScript 库，它不是一个完整的MVC框架，最多可以认为是MVC中的V（View）。可以简单地理解为：React将界面分成了各个独立的小块， ...
19-React全家桶
一、create-react-app全局安装create-react-app（旧版，不推荐，现已弃用） 1$ npm install -g create-react-app 创建一个项目 123456$ create-react-app your-app 注意命名方式Creating a new React app in /dir/your-app.Installing packages. This might take a couple of minutes. 安装过程较慢，Installing react, react-dom, and react-scripts... 如果不想全局安装，可以直接使用npx（新版，极力推荐） 1$ npx create-react-app your-app 也可以实现相同的效果 这需要等待一段时间，这个过程实际上会安装三个东西 react: react的顶级库 react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用react-dom react-scripts: 包 ...
18-项目打包与优化
项目打包一、打包介绍我们知道vue项目中有后缀为.vue的文件，是无法直接运行在浏览器中的。在开发中能在浏览器中打开，是因为vue项目中内置了编译的功能，将整个项目进行编译，然后引入到public的index.html文件中，然后通过服务器打开的。 编译的结果在内存中，并没有保存下来，因为处于开发过程中，所以需要时常进行调试，就不保存在磁盘中了。 当项目完成后，我们就需要将整个项目编译生成文件，才能上传到服务器上进行上线。 vue项目搭建好之后，vue就提供了两个命令： 开发阶段在浏览器中查看页面的命令 开发完成后，将整个项目打包成实际文件的命令 命令在package.json中： 所以在我们项目完成后，就需要使用下面的build命令进行打包： 1npm run build 运行结果： 在项目根目录下，会生成一个dist文件夹，用于存放打包后的所有文件： 其中的文件结构如下： 最终打包后的项目文件包含：css、js、图片、index.html、网站图标。 我们平常在浏览器上看到的其实就是dist中的index.html，其中的样式是引入css文件夹中的css文 ...
17-vite
vite由尤雨溪团队开发的打包工具，类似于webpack，专属于vue使用，目的在于替换掉webpack。 对比webpack： webpack打包如下图： vite打包如下图： 从上面两张图可以看出，为什么webpack打包的vue项目会很慢 ，而vite具备了更加优秀的用户体验感。 vite的实现原理是利用ES6的import会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去webpack冗长的打包时间。 创建项目命令： 1npm create vite@latest my-vue-app -- --template vue 第一次使用会提示，是否安装creat-vite，敲回车确定，这是vite的创建工具。 接下来vite会提示，让我们选择安装什么框架，然后再选择是否安装ts。 然后项目就安装好了。 启动命令： 12345"scripts": { "dev": "vite --open --port 8888", "build": "vite bui ...
16-pinia
piniapinia是新一代状态管理工具，适用于多个框架，但和vue3是黄金搭档。 我们可以理解为下一代的vuex。 下载安装： 1npm install pinia 使用步骤： 在main.js中，将pinia挂载到根实例上 创建仓库数据 123456789101112131415161718192021222324252627import { defineStore } from 'pinia'// useLoginStore是自定义的变量 - 通常都是用use开头的// defineStore是从pinia中解构的方法，固定的// loginStore是自定义的字符串 - 表示当前仓库的唯一标识符export const useLoginStore = defineStore('loginStore', { // state表示存放数据的地方 // state的值是一个函数，返回的对象中存放具体的数据 state: () => ({ count: 0, ...
15-ts
ts一、简介 TypeScript是由微软开发的一款开源的编程语言。 TypeScript是JavaScript的超集，遵循最新的es6、es5规范。TypeScript扩展了JavaScript的语法。 TypeScript更像后端java、C#这样的面向对象语言，可以让js开发大型企业项目。 谷歌也在大力支持TypeScript的推广，谷歌的angular2.x+就是基于TypeScript语法。 最新的vue、React也可以集成TypeScript。 nodeJs矿建Nestjs、midway中用的就是TypeScript语法。 简单来说，ts就是有严格的类型显示的js。 因为js是弱类型语言，写出来的代码不够严谨，用ts写来约束类型，当类型不对的时候，ts会报错，代码更严谨。 二、安装编译ts无法独立运行，必须将ts编译为js才能使用，编译工具叫typescript。 下载安装： 1npm i typescript -g 测试： 1tsc -v 编译命令： 12tsc ts文件名tsc 被编译的文件 --outFile 编译后的文件路径 例： ...
14-Vue3组合式API
组合式APIvue3的文件中，Vue不再是一个构造函数，而是一个对象，对象中封装了很多方法，每个方法都有其独立的作用。 我们在使用vue3的时候，需要从vue中解构各个用到的方法。 setupsetup是vue3提供的对象中的一个方法，也是vue3主要使用的方法。我们在模板中需要的数据，直接定义在这个函数中，然后返回即可。函数也是一样。 1234567891011121314151617181920212223242526<body><div id="app"> {{name}} <input type="text" v-model="name"> <button @click="btnOnclick()"> 按钮 </button></div></body><script src="./node_modules/vue/dist/ ...
13-Vue3选项式API
vue3选项式APIvue3提供了两个语法，一个叫选项式API；另一个叫组合式API。 选项式API跟vue2的使用方式一样的：面向对象的开发模式 大部分内容都跟vue2相同的： 插值表达式 指令一样 methods directives mixins computed watch 生命周期钩子函数前6个一样。 不一样的地方： 创建vue实例不一样： 1234567891011const {createApp} = Vueconst app = createApp({ // data不一样，必须是函数 data() { return { } }})// 没有el，只有mountapp.mount('el') v-if和v-for优先级不一样，vue2中v-for优先，vue3中v-if优先 vue3取消了filter过滤器 vue3自定义指令的钩子函数不一样，简写不一样 vue2简写代表：bind + update ...
