ilovethesunshine的博客

原创 vue-cli项目整合qiankun实现微服务架构

1. 创建主应用和微应用vue create potal // 创建基座项目vue create vue-app-one // 创建微应用1vue create vue-app-two // 创建微应用21.1 通用的qiankun接入准备1.1.1 微应用生命周期函数添加import Vue from "vue";import VueRouter from "vue-router";import App from "./App.vue";import routes from "./

原创 基于create-react-app的团队代码规范化

1. 创建项目首先安装vscode插件prettier, stylelint, eslint, EditorConfig for VS Code1.1 使用create-react-app创建项目npx create-react-app demo --template typescript1.2 添加eslintyarn add eslint --devyarn run eslint --init1.3 添加prettier格式化代码yarn add prettier --dev --e

原创 前端追梦人Babel学习教程

1. Babel是什么?Babel 是一个 JavaScript 编译器Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。1.1 babel能做的事情1. 语法转换2. 通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块, 在main.js中通过import方式进行引入即可)3. 源码转换 (codemods)...

原创 前端追梦人Webpack教程

什么是Webpack

原创 前端追梦人Immutable.js教程

一. 基本概念immutable 是 Facebook 开源的一个项目，用于实现 javascript 的不可变数据(修改对象属性会返回一个新的对象，基于结构共享，而不是对象deepClone)，解决引用带来的副作用(好多地方引用了同一个对象，某一处改变了对象的属性值导致了某些不可预测的问题发生)。二. 常用数据类型List: 有序索引集，类似JavaScript中的Array。Map: 无序索引集，类似JavaScript中的Object。OrderedMap: 有序的Map，根据数据的set

原创 前端追梦人react-router-dom教程

1. 安装及入门使用npm install react-router-dom1.1 HelloWorldimport React from "react";import { BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";export default function App() { return ( <Router> <div>

原创 前端追梦人Redux Toolkit教程(简化redux的使用)

一. 简介

原创 前端追梦人React技术栈教程(基础知识部分)

一. react基础知识部分我们在使用react开发网页时,会下载两个包,一个是react,一个是react-dom,其中:react包是react的核心代码,react-dom则是React剥离出的涉及DOM操作的部分最简单的HelloWorld程序如下:ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root'));1.1 重要概念1.1.1 JSXJavaScript

原创 前端追梦人Redux教程

为什么要用Redux?

原创 前端追梦人HTML知识点整理

原创 前端追梦人HTML5知识点思维导图

原创 前端追梦人Uniapp教程

title: Uniapp教程date: 2020-10-21 16:51:18categories: 前端tags: Vue框架基础MVC模式Model 模型层, 数据的增删改查View视图层，前端页面Controller控制层， 处理业务MVVM模式项目目录结构components存放自定义组件pages存放页面文件static存放静态文件pages.json为项目的配置文件(配置项参考https://uniapp.dcloud.io/collocation/pag.

原创 前端追梦人Vuex教程

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。什么情况下使用?Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vue

原创 前端追梦人VueRouter教程

将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"> <h1>Hello App!&

原创 前端追梦人MIME类型参考手册

MIME 类型MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。官方的 MIME 信息是由 Internet Engineering Task Force (IETF) 在下面的文档中提供的：RFC-822 Standard for ARPA Internet text messagesRFC-2045 MIME Part 1: Format of Int

原创 前端追梦人NodeJS教程

一. 什么是NodeJS独立运行JS的一个解析器NodeJS创造的目的是为了构建高性能的Web服务器运行node server.js模块在编写每个模块时，都有require、exports、module三个预先定义好的变量可供使用。require函数用于在当前模块中加载和使用别的模块，传入一个模块名，返回一个模块导出对象。模块名可使用相对路径（以./开头），或者是绝对路径（以/或C:之类的盘符开头）。另外，模块名中的.js扩展名可以省略。可以使用以下方式加载和使用一个JSON文件。var

原创 前端追梦人Vue教程

1. Vue概述及入门1.1 框架的渐进式声明式渲染->组件系统->客户端路由->集中状态管理->项目构建1.2 Vue的基本使用// Vue也是把数据填充到页面的标签里var vm = new Vue({ el: '#app', // 元素的挂载位置(CSS选择器或者DOM元素) data: { // 模型数据(值是一个对象) msg: 'hello vue' }});<!-- 插值表达式, 支持简单的表达式(只要符合JS的

原创 前端追梦人ECMAScript6教程(2)

14.8 Generator的异步应用ES6 诞生以前，异步编程的方法，大概有下面四种。回调函数事件监听发布/订阅Promise 对象Generator 函数将 JavaScript 异步编程带入了一个全新的阶段。基本概念异步所谓"异步"，简单说就是一个任务不是连续完成的，可以理解成该任务被人为分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。比如，有一个任务是读取文件进行处理，任务的第一段是向操作系统发出请求，要求读取文件。然后，程序执行其他任务，等到

原创 前端追梦人ECMAScript6教程(1)

1. let, const1.1 块级作用域在ES5中只存在全局作用域和函数作用域，这会导致函数作用域覆盖了全局作用域，亦或者循环中的变量泄露为全局变量。如for(var i = 0; i < 10; i++){ console.log(i);}console.log(i); // 10 循环变量泄露为全局变量ES6新增了块级作用域，块级作用域外无法访问块级作用域内的变量，且存在暂时性死区(TPD){ console.log(a); // a is not defined

原创 前端追梦人正则表达式教程

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。1. 什么是正则表达式？正则表达式是由一个字符序列形成的搜索模式。当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。正则表达式可以是一个简单的字符，或一个更复杂的模式。正则表达式可用于所有文本搜索和文本替换的操作。2. 语法/正则表达式主体/修饰符(可选)其中修饰符是可选的。

原创 前端追梦人JavaScript教程

一. 基础知识1.1 JavaScript之HelloWorld<script> console.log("hello world!!!")</script>script可以内联代码，也可以通过src属性来引入外部指定脚本代码1.2 运算符运算元： 指的是运算符作用的对象一元运算符： 作用于一个运算元二元运算符： 作用于两个运算元JavaScript中运算符主要用于连接简单表达式，组成一个复杂的表达式。常见的有算数表达式、比较表达式、逻辑表达式、赋值表达式

原创 前端追梦人前端资源整理

JavaScript相关JavaScript语法兼容性查询网站ES语法兼容性查询网站JavaScript现代教程ES6阮一峰教程NodeJS入门JavaScript书籍推荐

原创 前端追梦人响应式网页设计

一. 响应式元素及媒介1.1 基于宽度百分比的图像缩放<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&g

原创 前端追梦人TypeScript教程

一. TypeScript的存在价值？为JavaScript提供类型系统，弥补其弱类型导致的问题TypeScript为JavaScript的超级，兼容所有JavaScript目前及未来所有的特性编辑器基于类型系统可以给予开发者更多的智能提示类型系统有利于提高代码的质量和可维护性,有利于代码重构在编译期间捕获错误，避免很多以往在运行期才能发现的错误可以在代码层面提供良好的文档用TypeScript书写的代码最终会被编译成JavaScript代码与Flow等类型检查系统相比，TypeScri

原创 前端追梦人Cytoscape.js教程

一. Cytoscape.js简介与安装1.1 Cytoscape.js是什么？cytoscape.js是一个做网页可视化的常用工具 。cytoscape.js包含图论模型和可选的渲染器，用于显示交互式图形。该库旨在使程序员和科学家尽可能轻松地在他们的应用程序中使用图形理论，无论是用于Node.js应用程序中的服务器端分析还是用于丰富的用户界面。1.2 Cytoscape.js安装及HelloWorld1.2.1 使用包管理工具进行安装npm : npm install cytoscapebo

原创 前端追梦人CSS教程

一. 基础概念1.1 什么是CSS层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。1.2 语法选择器 { color: blue; font-size: 12p;}1.3 选择器根据规则选取页面中的dom元素, 包含以下选择器分类:.class.intro选择所有class=“intro”的元素1#id#firstname选

原创 vue父组件向子组件传递动态的值，子组件保持实时更新

data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console.log(newValue) } } 这种方式只能watch基础类型的变量，我传递的是个object啊总...