nginx-proxy-manager 是基于 nginx 一个反向代理管理系统 Nginx 设置和 ssl 证书申请的 docker 神器，它可以让你轻松地部署到你的网站上运行，包括免费的SSL，而不需要知道太多关于 Nginx 或 Let's Encrypt 的信息 官方网站：https://nginxproxymanager.com/ # 工…

项目构建 首先我们看下 package.json 的脚本配置，本地开发的时候运行 npm run dev， "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build…

前言 在开发前端时，在服务端还未对接之前，需要通过模拟数据来验证接口的连通性，另外也需要一些模拟数据来填充页面，也能提供单元测试，因此造一些假数据往往也是项目重要的部分. 使用开源项目 mockjs https://github.com/nuysoft/Mock 在 vite 项目再结合插件 vite-plugin-mock，这里安装 mockjs…

本地开发和实际生产的服务器环境不同，为了减少代码的改动，一般会将变化的内容放在配置文件里，根据实际情况进行配置 vite 使用了 dotenv 这个第三方的库，对环境变量进行处理 vite 环境变量 官方文档 https://cn.vitejs.dev/guide/env-and-mode.html Vite 在一个特殊的 import.meta.…

前言 前端 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'…