ArcoNuxt3Admin这是四个使用nuxt3和ArcoDesign创建的简单项目模板。下面是一些相关的配置以及在创建项目中遇到的问题。项目地址初始化创建。这里我使用pnpm来创建。详见Nuxt3安装pnpmdlxnuxiinitarco-nuxt3-admincdarco-nuxt3-adminpnpminstallrunstarthttp://localhost:3001/pnpmrundev默认端口3000，可以在nuxt.config.ts中更改exportdefaultdefineNuxtConfig({devServer:{port:3001,},});将打包好的工程打包到.output目录下pnpmrunbuildinstalllibraryarco-designinstallpnpminstall@arco-design/web-vueconfigurationcreateplugins/arco-design.ts文件;importArcoVuefrom"@arco-design/web-vue";//这里引入css不需要在nuxt.config.ts中配置import"@arco-design/web-vue/dist/arco.css";export默认defineNuxtPlugin((nuxtApp)=>{nuxtApp.vueApp.use(ArcoVue);});在nuxt.config.ts中配置插件；css可以在一处导入//nuxt.config.tsexportdefaultdefineNuxtConfig({//importarco-designstylecss:["@arco-design/web-vue/dist/arco.css"],//importarco-按插件设计组件插件：["@/plugins/arco-design"],});导入js库判断客户端加载引入一些第三方js库时，会报错“windowisundefined”，可判断为客户端没有，用的时候加载；让库；如果（process.client）{constpack=awaitimport（“库”）；图书馆=pack.default||pack;}禁用ssrexport默认defineNuxtConfig({ssr:false,});windicssinstallnuxt,nuxt-windicsspnpminstallnuxtnuxt-windicss-Dconfigurenuxt.config.ts不带windicss参数不生效，官方没写配置说明，不过我不写不生效，在官方Nuxtv3+在WindiCSSDemo中看到css中引入windi.css没有生效。我不知道为什么。您可能需要配置其他配置。直接配置windicss即可生效。不需要导入windi.cssexportdefaultdefineNuxtConfig({windicss:{config:{attributify:true,},},//只导入windi.css不会生效//css:["virtual:windi.css"],模块:["nuxt-windicss"],});配置windi.config。tsimport{defineConfig}来自“windicss/helpers”；exportdefaultdefineConfig({preflight:false,extract:{include:["src/**/*.{vue,html,jsx,tsx}"],exclude:["node_modules",".git"],},darkMode:"class",attributify:true,theme:{extend:{背景颜色:{//深色背景色"v-dark":"var(--dark-bg-color)",},},},});介绍pinia更多配置检查pinianuxt3安装安装piniapnpm安装pinia@pinia/nuxt配置nuxt.config.tsexportdefaultdefineNuxtConfig({modules:["@pinia/nuxt"],});新建一个版本的pinia支持函数编写，可以直接在函数内部声明ref对象,()=>{constisDark=ref(false);functionsetIsDark(bool:boolean){varstr=bool?"dark":"";isDark.value=bool;document.body.setAttribute("arco-theme",str);}return{isDark,setIsDark,};});使用import{useAppStore}from"~/store/user";constappStore=useAppStore();constisDark=computed(()=>appStore.isDark);functiononChange(bool:boolean){appStore.setIsDark(bool);页面的布局模板在项目layoutslayouts中提供，默认使用default.vue切换其他模式该版本使用definePageMeta在特定页面进行配置，比如登录页面在页面中使用需要引入composablescomposables来提供通用的hooks，在页面中使用时不需要自己引入server更多服务器相关官方文档Nuxt3Guide(Server)server/api下的文件会自动生成文件名对应的api，比如server/具体代码见api/Login.tsLogin.tsexportdefaultdefineEventHandler(async(event)=>{//获取用户参数constquery=getQuery(event);return{code:ErrorCode.OK,data:{user,token,},};});前端只需要调用/api/Login接口获取返回数据constres=await$fetch("/api/Login",{参数:{用户名:"admin",密码:"123456",},});这种方式获取的数据是硬编码的，如何让api返回的数据动态化呢？Nuxt3提供了一个内置的存储层，可以抽象文件系统或数据库或任何其他数据源；这里使用本地json存储。配置存储导出默认defineNuxtConfig({nitro:{storage:{db:{driver:"fs",base:"./db",},},devStorage:{db:{驱动程序：“fs”，基础：“./db”，}，}，}，}）；在api中创建一个GetUser.ts文件，使用useStorage读取user.json中的数据并返回，前端在访问api/GetUser时，即可获取到数据。具体代码见GetUser.tsexportdefaultdefineEventHandler(async()=>{letdata=awaituseStorage().getItem("db:user.json");return{code:ErrorCode.OK,data:data,};});参见CreateUser.tsexport默认defineEventHandler(async(event)=>{constquery=getQuery(event);letdata=awaituseStorage().getItem("db:user.json");data.push(query);awaituseStorage().setItem("db:user.json",data);return{code:ErrorCode.OK,data:data,};});
