前端
文章平均质量分 77
开发小猫
这个作者很懒,什么都没留下…
展开
-
Vuex4.0版本初学笔记(基于Vue3.0)
Vuex4.0版本初学笔记(基于Vue3.0)devtools 离线编译安装1、源码下载地址2、yarn install安装依赖yarn run build编译3、在chrom中打开开发者模式,点击“加载已解压的扩展程序”,选择源码目录packages/shell-chrome/Vuex的基础使用1、创建storeimport { createStore } from 'vuex'const store = createStore({ state() { r原创 2022-03-06 21:02:24 · 759 阅读 · 0 评论 -
Vue Router的学习笔记(基于Vue3.0)
Vue Router的学习笔记(基于Vue3.0)前端路由原理URL的hash变化实现URL的hash也就是锚点(#), 本质上是改变window.location的href属性。可以通过直接赋值location.hash来改变href, 但是页面不发生刷新。hash的优势就是兼容性更好,在老版IE中都可以运行,但是缺陷是有一个#,显得不像一个真实的路径<!DOCTYPE html><html lang="en"><head> <meta原创 2022-03-05 21:03:13 · 347 阅读 · 0 评论 -
React脚手架项目启动解析以及webpack配置
React脚手架项目启动解析以及webpack配置React项目一般都是利用脚手架来创建的,今天通过启动入口来分析一下这个过程以及了解React项目中的webpack是如何配置的。项目准备1、首先利用create-react-app创建一个Demo项目,但是默认的项目是看不到webpack的配置信息的。2、利用package.json中配置的脚本npm run eject导出更多详细的配置信息。3、这个时候在config目录下可以看到详细的配置webpack.config.js和webpack原创 2021-12-15 22:49:29 · 2764 阅读 · 0 评论 -
Vue脚手架创建的项目的启动流程
Vue脚手架创建的项目的启动流程当利用vue脚手架创建项目之后利用 npm run serve 启动开发环境,我们就从这里来开始分析。入口分析首先从package.json中的脚本配置来看,npm run serve调用的是vue-cli-service serve命令。这个时候就应该来到node_modules中的.bin查找vue-cli-service.js文件。但是在vue-cli-service.js文件中有一句代码const Service = require(’…/lib/Ser原创 2021-12-14 22:01:04 · 2568 阅读 · 0 评论 -
Webpack源码分析
Webpack源码分析在上一篇文章已经对webpack_cli启动过程进行了大致的分析,程序到最后就是执行webpack.run方法。现在对webpack的源码进行进一步的分析。准备工作:1、在github下载webpack的源码2、在源码目录创建需要编译的源码和webpack.config.js配置webpack/webpack-main/examples/demo// build.jsconst webpack = require("../../lib/webpack");cons原创 2021-12-03 21:46:05 · 1243 阅读 · 0 评论 -
webpack_cli运行流程解析
webpack_cli运行流程解析准备工作1、在github中下载webpack和webpack-cli的代码2、通过webpack源码中的package.json分析webpack的入口在bin/webpack.js中。流程分析查看bin/webpack.js源码文件分析流程:1、首先判断webpack-cli是否安装,没有安装就提示安装2、安装之后执行runCli()这里其实就是引入webpack-cli/bin/cli.js文件执行cli.jsconst runCli = cli原创 2021-11-30 22:03:02 · 1815 阅读 · 0 评论 -
Webpack 基础学习笔记
Webpack 基础学习笔记Webpack基础使用webpack的安装npm init -ynpm install webpack webpack-cli -Dwebpack配置文件的基础使用const path = require('path');module.exports = { // 入口 entry: './src/index.js', output: { // 输出目录 path: path.resolve(__d原创 2021-11-28 21:01:10 · 704 阅读 · 0 评论 -
基于React搭建Electron项目框架
基于React搭建Electron项目框架最近利用Electron来开发桌面端的项目,将项目搭建过程和遇到的问题做一个记录。项目基础搭建以及打包配置优化环境加速cat ~/.zshrc | grep ELECTRON// 配置export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"Electron本地加载React项目1、创建React项目create-react-app demo2、添加Electro原创 2021-11-07 16:06:32 · 1088 阅读 · 1 评论 -
前端常用基础以及布局方式学习笔记
前端常用基础以及布局方式学习笔记HTML常用标签标题标签:<h1></h1>~<h6></h6>段落标签:<p></p>换行标签:<br/>水平线:<hr/>文字斜体:<i></i> <em></em>加粗:<b></b> <strong></strong>下标:<sub></sub&原创 2021-11-07 15:30:49 · 284 阅读 · 0 评论 -
Node.js初学笔记
Node.js初学笔记Node.js学习笔记,包括原生模块、Express框架、Koa框架的基本使用。以及基于Koa项目的搭建以及Postman接口测试和一些使用技巧。Node.js http模块基础功能node.js版本是v14.17.3记录http模块常用功能:1、url解析2、headers数据获取3、请求方式获取(get/post等)4、响应状态码设置5、响应头设置6、从第三方服务器获取数据const http = require('http');const url = re原创 2021-09-27 21:24:56 · 3312 阅读 · 4 评论 -
重拾React框架学习笔记总结
重拾React框架学习笔记总结环境搭建nvmnvm用来管理node版本。brew install nvmnvm ls-remote // 查看所有的node可用版本nvm list // 查看已安装node版本nvm install 版本号 // 下载指定node版本,如nvm install v11.14.0nvm use 版本号 // 使用指定版本nvm alias default // 设置默认版本,每次启动终端都使用该版本yarnyarn管理依赖包npm原创 2021-08-23 21:55:40 · 276 阅读 · 0 评论 -
Redux、Redux-Thunk、Redux-Sagas、React-Redux学习笔记
Redux、Redux-Thunk、Redux-Sagas、React-Redux学习笔记React环境配置安装脚手架工具npm install -g create-react-app创建项目工程// demo是项目名称,不能有大写字母create-react-app demo安装浏览器调试工具在谷歌扩展程序中安装 React Develope...原创 2018-09-16 21:42:38 · 2197 阅读 · 1 评论