前提准备 1. node 版本 Node.js 版本 >= 12，如果有老项目需要旧版本的，推荐用 nvm 管理 node 版本。 PS C:\Windows\system32> nvm --version 1.1.12 PS C:\Windows\system32> nvm list 20.5.0 * 16.20.2 (Currently using 64-bit executable) 10.17.0 PS C:\Windows\system32> nvm use 20.5.0 Now using node v20.5.0 (64-bit) 2. vscode 推荐使用 vscode 编辑器，安装插件以下插件： EditorConfig for VS Code， Volar，TypeScript Vue Plugin，Prettier - Code formatter，ESl...
tsconfig.json { "compilerOptions": { "target": "ESNext", // 将代码编译为最新版本的 JS "useDefineForClassFields": true, "module": "ESNext", // 使用 ES Module 格式打包编译后的文件 "lib": ["ESNext", "DOM", "DOM.Iterable"], // 引入 ES 最新特性和 DOM 接口的类型定义 "skipLibCheck": true, // 跳过对 .d.ts 文件的类型检查 "esModuleInterop": true, // 允许使用 import 引入使用 export = 导出的内容 "sourceMap": true, // 用来指定编译时是否生成.map文件 "allowJs": false, // 是否允许使用js "baseUrl": ".", // 查询的基础路径 "paths": { // 路径映射...
在逛 CloudFlare 的时候看到了 Turnstile，觉得好奇就去看了下文档才知道它是 CloudFlare 家的人机验证，刚好部署了图床管理就想着能不能试试接入它，做下记录。 1. 创建 Turnstile 组件 在 src/components 目录中创建一个新的 Turnstile 组件，比如 Turnstile.vue： <template> <div> <div id="cf-turnstile" :data-sitekey="siteKey"></div> </div> </template> <script setup lang="ts"> import {onMounted, ref} from "vue"; const props = defineProps<{ sitekey: { type: String, required: true } }>() const turnstileResponse = ref<string>('') const emit =...
初始内容 项目初建后，vite.config.ts 的默认内容如下： import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], }) 配置别名 安装 @types/node npm i @types/node -D 修改 vite.config.ts import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import {resolve} from 'path' // 路径查找 const pathResolve = (dir: string): string => { return resolve(__dirname, ".", dir); }; // 设置别名，还可以添加其他路径 const alias: Record<string, string> = { "@": pathResolve("src"), "@views": pathResolve("src/views"), "@store": pathResolve("src/store/modules") }; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias }, }) 使用 比如，修...