关于vue3:使用Nuxt3创建一个项目模版的相关配置以及遇到的一些问题

Arco Nuxt3 Admin

这四个应用 nuxt3 和 Arco Design 创立的简略我的项目模版，上面是一些创立我的项目的相干配置和遇到的一些问题

我的项目地址

初始化

创立

这里我应用 pnpm 创立，详情查看 Nuxt3 Installation

pnpm dlx nuxi init arco-nuxt3-admin

cd arco-nuxt3-admin

pnpm install

运行

启动 http://localhost:3001/

pnpm run dev

默认 3000 端口，能够在 nuxt.config.ts 中更改

export default defineNuxtConfig({
  devServer: {port: 3001,},
});

打包

打包后的我的项目在 .output 目录下

pnpm run build

装置库

arco-design

1. 装置

pnpm install @arco-design/web-vue

2. 配置

创立 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.ts
export default defineNuxtConfig({
  // 引入 arco-design 款式
  css: ["@arco-design/web-vue/dist/arco.css"],
  // 插件形式引入 arco-design 组件
  plugins: ["@/plugins/arco-design"],
});

引入 js 库

1. 判断客户端加载

在引入某些第三方 js 库时，会报错 ”window is undefined”，能够判断是否在客户端，应用到时再加载；

let library;
if (process.client) {const pack = await import("library");
  library = pack.default || pack;
}

2. 不启用 ssr

export default defineNuxtConfig({ssr: false,});

windicss

1. 装置 nuxt, nuxt-windicss

pnpm install nuxt nuxt-windicss -D

2. 配置 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"],
});

3. 配置 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

1. 装置 pinia

pnpm install pinia @pinia/nuxt

2. 配置 nuxt.config.ts

export default defineNuxtConfig({modules: ["@pinia/nuxt"],
});

3. 创立

新版的 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,
  };
});

4. 应用

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,
  };
});