前言 前端 http 请求，我们使用最流行的 axios 库，资源比较多，成熟稳定 安装 axios npm install axios axios 基本使用 方式1 默认的写法，将 axios 作为函数的形式进行调用，这种方式使用默认的 axios 实例，即使用默认的实例配置 // 发起一个post请求 axios({ method: '…
前言 使用 naive UI 框架，如果是在组件内部使用，需要将组将放在 n-message-provider 里面，如下面的例子，在 content 组件内使用，则必须在组件外加上 n-message-provider <n-message-provider> <content /> </n-message-prov…
前言 导航组件是界面必须的内容，一般导航上面有Logo、菜单链接、登录等信息，另外还要实现暗黑主题和明亮主题的切换 这里用路由和状态管理插件来实现一个 Header 组件，最终的样式大概是这个样子，点击按钮能切换主题 安装依赖 路由 Router npm install vue-router 安装 Pinia npm install pinia 安…
一下是一个基于 vue3、vite、ts 封装的一个 svg 组件 插件安装 pnpm add vite-plugin-svg-icons -D 插件配置 svgIcons.ts iconDirs 配置 icon 图标的目录 symbolId 指定 symbolId 格式 import { createSvgIconsPlugin } from &…
插件使用 在项目根目录下创建一个 config 目录，这里用来放置项目配置相关的内容。例如 vite 的插件都可以放在这里 新建 index.ts，这个是插件的主配置 import type { Plugin } from 'vite'; import vue from '@vitejs/plugin-vue'…
前言 开发项目时，为了统一代码的格式，需要调整代码的缩进、换行、空格等细节，使整个项目保持一致的代码风格。 Prettier 是一个代码格式化工具，它可以根据自定义的规则自动格式化代码 这里要说明一下，暂时不会使用另外一个流行的代码检测工具 ESLint，主要是觉得在入门学习阶段使用这个没什么必要，反而增加了学习的成本，对于 eslint 检测到各…
前言 为什么我们运行 npm run dev 就能启动一个前端项目了？ 启动的过程发生了什么?本文会简单介绍几个入口文件 入口文件 每一个 vue 项目在根目录下都有一个 index.html <!doctype html> <html lang="en"> <head> <meta c…
docker 安装 1、更新系统软件包： sudo yum update 2、添加Docker官方存储库： sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo 3、安装Docker引擎： sudo yum install…
在 JavaScript 中，对数组进行排序有以下几种方式 使用 Array.prototype.sort() 方法： sort() 方法会原地修改数组，根据指定的排序规则对数组元素进行排序，默认是将元素转换为字符串进行比较。可以传入一个比较函数来定义排序规则。 array.sort((a, b) => a - b); // 数字从小到大排序…
前言 开发前端的时候，如果我们没有什么经验，那么怎么知道要用什么样的技术来开发我们的项目呢? 使用什么样的工具能够方便我们进行开发，尽可能少的踩坑，出问题也能找到解决方案 核心技术选型 路由管理工具：vue router 状态管理工具：pinia UI 组件库 vue router 官方路由 https://router.vuejs.org/zh/…