Arco Nuxt3 Admin
这四个应用 nuxt3 和 Arco Design 创立的简略我的项目模版，上面是一些创立我的项目的相干配置和遇到的一些问题
我的项目地址
初始化
创立
这里我应用 pnpm 创立，详情查看Nuxt3 Installation
pnpm dlx nuxi init arco-nuxt3-admincd arco-nuxt3-adminpnpm install运行
启动 http://localhost:3001/
pnpm run dev默认 3000 端口，能够在 nuxt.config.ts 中更改
export default defineNuxtConfig({ devServer: { port: 3001, },});打包
打包后的我的项目在 .output 目录下
pnpm run build装置库
arco-design
- 装置
pnpm install @arco-design/web-vue- 配置
创立 plugins/arco-design.ts 文件；
import ArcoVue from "@arco-design/web-vue";// 此处引入css则不须要在nuxt.config.ts配置import "@arco-design/web-vue/dist/arco.css";export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(ArcoVue);});在 nuxt.config.ts 配置 plugins；
css 在一个中央引入即可
//nuxt.config.tsexport default defineNuxtConfig({ // 引入arco-design款式 css: ["@arco-design/web-vue/dist/arco.css"], // 插件形式引入arco-design组件 plugins: ["@/plugins/arco-design"],});引入 js 库
- 判断客户端加载
在引入某些第三方 js 库时，会报错"window is undefined"，能够判断是否在客户端，应用到时再加载；
let library;if (process.client) { const pack = await import("library"); library = pack.default || pack;}- 不启用 ssr
export default defineNuxtConfig({ ssr: false,});windicss
- 装置 nuxt, nuxt-windicss
pnpm install nuxt nuxt-windicss -D- 配置 nuxt.config.ts
没有 windicss 参数不失效，官网配置阐明没有写，但我不写不失效，在官网 Nuxt v3 + WindiCSS Demo 里看到配置了
在 css 中引入 windi.css 无奈失效，不晓得为什么，可能还须要配置其余，间接配置 windicss 就能够失效，不须要在引入 windi.css
export default defineNuxtConfig({ windicss: { config: { attributify: true, }, }, // 只引入windi.css不能失效 // css: ["virtual:windi.css"], modules: ["nuxt-windicss"],});- 配置 windi.config.ts
import { defineConfig } from "windicss/helpers";export default defineConfig({ preflight: false, extract: { include: ["src/**/*.{vue,html,jsx,tsx}"], exclude: ["node_modules", ".git"], }, darkMode: "class", attributify: true, theme: { extend: { backgroundColor: { // 暗黑背景色 "v-dark": "var(--dark-bg-color)", }, }, },});引入 pinia
更多配置查看pinia nuxt3 installation
- 装置 pinia
pnpm install pinia @pinia/nuxt- 配置 nuxt.config.ts
export default defineNuxtConfig({ modules: ["@pinia/nuxt"],});- 创立
新版的 pinia 反对函数的写法，能够间接在函数外部申明 ref 对象
import { defineStore } from "pinia";import { IS_DARK } from "~~/constants";export const useAppStore = defineStore("app", () => { const isDark = ref(false); function setIsDark(bool: boolean) { var str = bool ? "dark" : ""; isDark.value = bool; document.body.setAttribute("arco-theme", str); } return { isDark, setIsDark, };});- 应用
import { useAppStore } from "~/store/user";const appStore = useAppStore();const isDark = computed(() => appStore.isDark);function onChange(bool: boolean) { appStore.setIsDark(bool);}我的项目
layouts
layouts 中提供页面的布局模版，默认应用 default.vue
切换其余模版在具体页面中应用 definePageMeta 进行配置, 比方登录页
<script setup>definePageMeta({ title: "登录", layout: "login",});</script>components
components 提供通用组件，在页面中应用时不须要自行引入
composables
composables 提供通用 hook，在页面时应用时也不须要自行引入
server
更多 server 相干查看官网文档Nuxt3 Guide (Server)
在 server/api 下的文件会主动生成文件名对应的 api，比方 server/api/Login.ts
- 具体代码查看Login.ts
export default defineEventHandler(async (event) => { // 获取用户参数 const query = getQuery(event); return { code: ErrorCode.OK, data: { user, token, }, };});在前端只须要调用 /api/Login 接口即可失去返回数据
const res = await $fetch("/api/Login", { params: { username: "admin", password: "123456", },});这样获取到的数据是写死的，怎么使 api 返回的数据是动静的呢？
nuxt3 提供了一个内置的存储层，能够形象文件系统或数据库或任何其余数据源；
这里应用本地 json 保留的形式。
- 配置 storage
export default defineNuxtConfig({ nitro: { storage: { db: { driver: "fs", base: "./db", }, }, devStorage: { db: { driver: "fs", base: "./db", }, }, },});- 在 api 中应用
创立一个 GetUser.ts 文件，应用 useStorage 读取 user.json 内的数据将其返回，前端在拜访 api/GetUser 时就能失去数据
- 具体代码查看GetUser.ts
export default defineEventHandler(async () => { let data = await useStorage().getItem("db:user.json"); return { code: ErrorCode.OK, data: data, };});- 具体代码查看CreateUser.ts
export default defineEventHandler(async (event) => { const query = getQuery(event); let data = await useStorage().getItem("db:user.json"); data.push(query); await useStorage().setItem("db:user.json", data); return { code: ErrorCode.OK, data: data, };});