本地开发和实际生产的服务器环境不同，为了减少代码的改动，一般会将变化的内容放在配置文件里，根据实际情况进行配置 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'…
前言 开发项目时，为了统一代码的格式，需要调整代码的缩进、换行、空格等细节，使整个项目保持一致的代码风格。 Prettier 是一个代码格式化工具，它可以根据自定义的规则自动格式化代码 这里要说明一下，暂时不会使用另外一个流行的代码检测工具 ESLint，主要是觉得在入门学习阶段使用这个没什么必要，反而增加了学习的成本，对于 eslint 检测到各…
前言 为什么我们运行 npm run dev 就能启动一个前端项目了？ 启动的过程发生了什么?本文会简单介绍几个入口文件 入口文件 每一个 vue 项目在根目录下都有一个 index.html <!doctype html> <html lang="en"> <head> <meta c…
前言 FreshRSS 是一个 RSS 源聚合器。 开源仓库地址： https://github.com/FreshRSS/FreshRSS docker-compose 部署 在服务器目录下新建 docker-compose 文件 vi docker-compose.yml version: "3" services: fre…
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…