无星的微前端之旅（一）——微前端选型
微前端是什么我觉得没有什么说的必要，可以百度到 微前端能解决什么也没有什么必要赘述 微前端能为我们带来什么不被时间所淘汰的技术选型！！！ 微前端的核心价值 选型开始备选库SingleSpa:可以说“万物基于SingleSpa”，当前流行的大量框架其实是SingleSpa的上层封装。 qiankungithub:阿里开源的一套，基于SingleSpa的上层封装，社区活跃。 bit:当前比较流行的一套 webpack5配合Module Federation:是的，没错，webpack5配合Module Federation也能达到相同目的，但是目前资料较少 piral |frint |luigi |puzzle-js 优势说明就当前看来，SingleSpa提供给较为基础的api，应用在项目中需要进行大量封装。 qiankun目前生态较好，中文文档齐全，有大量的先行者铺路。 bit生态发展较好，有大量使用者，英文文档齐全，并结合了webpack5的module federation。 选择结果这里建议选择qiankun作为框架实践，因为中文文档齐全，且国内生态很好。 接下来就要进行业务...
无星的微前端之旅（二）—— qiankun的一些预知项
这里是一些很浅很浅的东西，大佬们不要喷我=。=。 qiankun将应用分为两种：主应用，微（子）应用 一.主应用是一个基座主应用是一个基座，承载着各个子应用。 主应用负责各个应用之间的加载，通信和调度。 带🔥都说，这是微服务在前端的应用，不过我没做过服务端，对微服务不是很了解，因此不敢乱说。 我只做过客户端，从客户端的角度来看，这看上去就类似于iOS的组件化。将模块解耦后，通过主工程进行加载调用。这样一来有客户端背景的同学是不是就比较好理解了。 二.主应用通过注册好的配置表，去分别加载各自子应用的资源。12345678910111213141516171819202122232425262728import { registerMicroApps, start } from 'qiankun';registerMicroApps([ { // 子应用的名称，需要唯一 name: 'reactApp', // 需要加载资源的地址 entry: '/...
无星的前端之旅（十八）-Vue3+ts常见问题
第一次用Vue3+ts，采用了eslint（aribnb），遇到了一些问题，又不想用经常性使用any，只能逼迫自己解决问题。 本文只是记录一些自己遇到的检测问题 1.使用less并导出变量到ts使用，但是ts报错找不到报错内容： 1Cannot find module 'xxx.less' or its corresponding type declarations. 解决方法： CSS in Typescript 2.setup中获取proxy，但提示可能为null1const { proxy } = getCurrentInstance(); 提示报错内容： 1Property 'proxy' does not exist on type 'ComponentInternalInstance | null'. 解决方法： 1.直接强制确认，因为毫无疑问，在页面或组件中，CurrentInstance一定存在，因此可以使用!强制标记存在 但在aribnb的eslint规则下，仍然会报警告 1cons...
无星的前端之旅（十七）-typescript初探
之前干iOS的，写过一段时间swift，所以从js转到ts对我其实影响不太大。 只是有些知识点比较乱，没有串起来过。 首先我们需要上typescript的官方文档阅读一哈文档 中文网很久没有更新了，不过github有老哥一直在翻译zhongsp/TypeScript 实际上现在看官网也有中文语言这个选项了，但是翻译完成的文章不太多，今后应该会越来越多。 那么接下来就是把知识点串起来了 以下都是个人观点，如果有不对，望大牛指点 1.要不要全局安装typescript个人觉得不要，typescript也是有版本的，版本随着项目走，项目去安装typescript即可，完全没有必要全局安装。 2.tsc命令tsc options 安装typescript以后，就会有tsc命令了，tsc命令能做的事很多，ts转js等。 而tsc的可选项实际上是通过tsconfig传递的（当然也可以手动添加参数） 3.tsconfig文件tsconfig 实际上这才是整个项目的配置精髓，遇到的大部分配置性问题，都可以在文档查到。 整个ts项目的编译和静态检测都依赖于tsconifg文件的配置。 4...
无星的前端之旅（十六）——移动端调试技巧
背景常见的需求，开发移动端h5，在移动端浏览器或者移动端app上渲染。 前端不知道怎么在移动端调试，移动端不知道怎么调试网页。 经常出了问题不知道是找移动端解决还是找前端解决。 好了，我们举个例子： 公司小改改写了个页面，要在app的webview里加载，本地调试杠杠的，自己手机杠杠的，但是一上特意准备的测试机，就白屏了。 我号称是公司移动端里最会写前端的，前端里最会写移动端的。只能露一手了[LetMeSee] 如果你是前端，可以找个客户端，按此方法操作打开调试控制台，由你来调试网页上的问题 如果你是个移动端，你就可以按照这个方法，为前端同学准备好调试环境，剩下的网页调试工作交给他们 如何查找问题其实有两种方式可以去做。 一.VConsoleVConsole:如其描述，是一个轻量、可拓展、针对手机网页的前端开发者调试面板。 感谢腾讯，开源了这么好的一个工具。 但我总觉得，看日志不如打断点来的舒服。 二.远程调试移动端分为iOS和Android，所以我会分别演示，如何在两端上进行远程调试。 iOS篇1.准备：mac，iPhone或iPad。 2.使用移动设备加载网页比如我这举个例子...
无星的前端之旅（十五）——babel初探
背景其实很早我就知道，babel会帮助我们做一件事，就是把高版本的ES语法，转换为低版本的ES语法，以确保在低版本浏览器上能正确运行。 但是一直我都不知道怎么去操纵它，只知道需要一堆配置，配合webpack可以做这件事（甚至我一度认为必须使用webpack才能做这件事）。 集成(基本就是抄文档)其实如果用百度搜索，集成的东西有各种es版本的依赖，配置文件有js，rc，json文件，乱七八糟什么都有。 其实这是历史原因。但现在已经2021年了，咱们就直接按官网说的来。 1.下载依赖包12npm install --save-dev @babel/core @babel/cli @babel/preset-envnpm install --save @babel/polyfill 当然，我个人认为，如果不需要兼容IE的话，应该不需要下载polyfill了 2.添加依赖文件在项目的根目录下创建一个命名为 babel.config.json 的配置文件（需要 v7.8.0 或更高版本），并将以下内容复制到此文件中： 123456789101112131415161718{ &...
无星的nginx配置学习（二）——Vue router history配置引发的思考
啥是History模式文档 nginx配置前提：假设把打包后的文件放在根目录下（这个前提很重要!!!）从文档可以看到，nginx配置内容为 1234# nginxlocation / { try_files $uri $uri/ /index.html;} 实际上这是什么意思呢？ 根据以上前提 我们如果把对应文件放到根目录下，差不多是这个意思 1.把dist包内容放到根路径下比如我们在桌面新建一个文件夹Nginx,然后把dist包里的内容都放进来 大概长这样 2.nginx构造server文档只有一个location的配置，并且写了前提是放在根路径，所以这个前提很重要，我们需要先构造这么一个前提，需要把上面的Nginx文件夹设置为根路径 123456server { listen 8899; server_name localhost; root /Users/xing.wu/Desktop/Nginx; # 下面写location } 构造这样一个server，使localhost:...
无星的nginx配置学习（一）-基础配置
背景有个静态项目需要本地跑起来调试。这个项目还是前后端不分离的。 接口有发布好的开发环境。不想跑java，想直接跑前端调试。 所以用nginx nginx安装我是mac，brew是什么就不多说了。 1234# 安装brew install nginx# 查看信息brew info nginx 打开配置文件nginx.confbrew info命令会输出conf的地址，请仔细查看。 不要怕改错，同文件夹下有个default，随时可以用默认配置覆盖 默认配置长下面这样 12345678910111213141516171819202122232425262728worker_processes 1;events { worker_connections 1024;}http { include mime.types; default_type applocation/octet-stream; sendfile on; keepalive_timeout 65; server &#...
无星的前端之旅（十四）——巧用plop生成模板进行偷懒
背景在开发过程中，总会有一些模板代码需要编写，比如我是写vue的，vue2中的各种namespace，vue3中的各种引入。几乎是每个vue文件都需要的。 每次写都累的一批，也毫无技术含量。纯体力活，但还不得不做。 这时候大伙可能会用各自习惯的编辑器去编写各式各样的代码块来减轻工作量。 但是团队中编辑器并非统一的，众所周知，前端不仅语言众多，开发工具也多的一批，也没有什么好的跨编辑器跨机子的代码块存储方式（大厂统一云编辑器的往后稍稍，不包含你们） 这个时候就发现了plop（在跟着花裤衩手摸手学习vue-element-admin的时候学到的）。 Plop解决了什么问题？解决了上述的同一个项目跨编辑器跨机器编写前端代码块的问题。 如何集成一、集成plop到项目中1npm i plop -D 二、根目录下新建一个文件夹放置模板和脚本命令（这里只举个例子）12345678910111213141516171819202122232425262728293031323334353637383940<!-- plop-templates/views/index.hbs -->...
无星的前端之旅（十三）——require.context和vuex持久化
背景有些component需要全局注册的，但是在main.js中全局注册又太麻烦了。 store采用modules方式分包，使用的时候也要手动注册。 store刷新丢失，需要持久化。 这时候解决前两个问题，可以使用require.context 解决最后一个问题可以使用vuex-persistedstate require.context1.require.context是什么？Vue内置了webpack的部分配置，这个咱们就不多说了。 require.context是webpack的api。 2.require.context能干什么？通过执行require.context()函数可以获取一个特定的上下文，主要用来实现自动化导入模块。 它允许您传递要搜索的目录，指示是否也应搜索子目录的标志以及用于匹配文件的正则表达式，然后自动导入，使得不需要每次显式的调用import导入模块。 require.context()在构建时，webpack在代码中进行解析。 全局自动注册component新建一个放置全局组件的文件夹，例如：components 在components文件夹下新建一...
