随笔分类 - 工具
摘要：比如我们经常使用固定的代码格式来生成代码片段。 第一步，编写需要生成代码片段的代码，代码示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
阅读全文
摘要：初识 create-vue create-vue类似于Vue CLI脚手架，可以快速创建vuejs 3项目，create-vue基于Vite。Vite支持Vue CLI中的大多数配置，并且Vite以极速启动服务、快如闪电的热重载，提供了更好的开发体验。 与Vue CLI 不同的是，create-vu
阅读全文
摘要：安装Vue CLI (1) 全局安装Vue CLI 方式一（推荐方式）：在终端安装指定版本 npm i @vue/cli@5.0.8 -g 注：目前5.0.8应该是最新的版本了。 方式二：在终端通过命令安装最新版本 npm i @vue/cli -g (2) 升级Vue CLI到最新版本（可选） n
阅读全文
摘要：Auto Close Tag 自动添加HTML/XML关闭标签。例如，在输入<div>时，输入完最后一个尖括号>时，会自动添加对应的闭合标签</div> Auto Rename Tag 自动重命名成对的HTML/XML标记。例如，在将<div></div>标签重命名为<span></span>标签时
阅读全文
摘要：以下工具来源于互联网，可能会失效，请参考使用 网红工具 名称 链接 说明 GPT-4 https://chat.openai.com/ 需要梯子，需要付费。功能最强大的聊天机 器人。 文心一言 https://yiyan.baidu.com/welcome 国内版 GPT，需要申请账号。回答问题、协
阅读全文
摘要：第一步，注册七牛云账号 打开 七牛开发者平台，选择 注册,注册后登录系统然后实名认证。 第二步，创建七牛云空间 七牛对象存储将数据文件以资源的形式上传到空间中。您可以创建一个或者多个空间，然后向每个空间中上传一个或多个文件。通过获取已上传文件的地址进行文件的分享和下载。您还可以通过修改存储空间或文件
阅读全文
摘要：参考地址：https://github.com/mermaid-js/mermaid 原生使用方式： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/mermaid.min.
阅读全文
摘要：基础使用 完整使用参考地址：https://www.npmjs.com/package/babel-upgrade 使用方式： # npx lets you run babel-upgrade without installing it locally npx babel-upgrade --wri
阅读全文
摘要：创建版本库 git clone url 克隆远程版本库 git init 初始化本地版本库 配置 git config --global user.name 'chengcp' 配置global级别的用户名 git config --global user.email '1326895569@qq.
阅读全文
摘要：依赖环境 安装node.js：node.js下载可以从其官方界面开始https://nodejs.org/zh-cn/ 安装git：git下载则可以从其官方界面开始https://git-scm.com/ Hexo安装 新一个blog文件夹，单机右键启动Git Bash Here，输入如下命令： n
阅读全文
摘要：nginx通用配置 http { # nginx负载均衡配置 upstream dynamic_balance { #ip_hash; server 192.168.100.123: 8081; } # 省略其他 server { listen 80; server_name localhost;
阅读全文
摘要：vue+webpack使用ProvidePlugin插件引入jquery 先看一个实例，webpack+vue引入jquery并全局使用，这儿指通过配置，不是在静态页面使用script标签直接引入jquery。 在webpack配置中跟module同级中添加plugins,代码如下： const w
阅读全文
摘要：如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用（一般都以import方式引用使用），那就可以通过配置externals。 这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包，
阅读全文
摘要：快速创建 使用官方推荐的vue-cli创建项目如下： # 安装 Vue Cli npm install -g @vue/cli # 创建一个项目 vue create vanttest # 创建完成后，可以通过命令打开图形化界面 vue ui 下面记录下创建一个项目中需要选择的配置及相关说明。 创建
阅读全文
摘要：Tapable源码解析图，如图所示： 一个webpack plugin由一下几个步骤组成： 一个JavaScript类函数。 在函数原型 (prototype)中定义一个注入compiler对象的apply方法。 apply函数中通过compiler插入指定的事件钩子,在钩子回调中拿到compila
阅读全文
摘要：学习资料介绍 github地址：mcg-helper代码生成工具 什么是 FreeMarker? - FreeMarker 中文官方参考手册 视频学习地址： 第一节、视频教程内容介绍 探讨研发工作中典型的重复繁杂工作，可通过流程自动化实现代替的常见场景。第二节、mcg-helper初步认识教程 mc
阅读全文
摘要：mode 和 plugin 前边我们介绍 mode 时提过，mode 不同值会影响 webpack 构建配置，其中有一个就是会启用 DefinePlugin 来设置process.env.NODE_ENV 的值，方便代码中判断构建环境。 除此之外，development和 production两个不
阅读全文
摘要：loader 基本上都是第三方类库，使用时需要安装，有一些 loader 还需要安装额外的类库，例如 less-loader 需要 less，babel-loader 需要 babel 等。 loader 匹配规则 loader的配置是放在 module 字段下,如下代码前面提到过： module.
阅读全文
摘要：module webpack 的初衷是让 js 支持模块化管理，并且将前端中的各种资源都纳入到对应的模块管理中来，所以在 webpack 的设计中，最重要的部分就是管理模块和模块之间的关系。 在 webpack 支持的前端代码模块化中，我们可以使用类似 import * as m from './i
阅读全文
摘要：webpack 本质上是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们把多个模块的代码打包。 一切文件：JavaScript、CSS、SCSS、图片、模板，在 Webpack 眼中都是一个个模块，这样的好处是能清晰的描述出各个模块之间的依赖关系，以方便 Webpack 对模块进行组合和打包。
阅读全文
