Nuxt的基础配置与自动导入函数 / nuxt#5

https://nuxt.com.cn/docs/guide/concepts/auto-imports

全局变量defineAppConfig

//app.config.ts
export default defineAppConfig({
    title: 'Hello Nuxt888',
    theme: {
      dark: true,
      colors: {
        primary: '#ff0000'
      }
    }
  })
 //app.vue
 {{ appConfig.title }}
 const appConfig = useAppConfig()

页面关键词配置

//nuxt.config.ts
app: {
  head: {
      titleTemplate: "%s - 固定标题",
      title: "这是首页",
      charset: "utf-8",
      htmlAttrs: {
          lang: "zh-cn"
      },
      meta: [
          { name: "description", content: "首页描述" },
          { name: "keywords", content: "首页关键词" },
      ]
  }
},

//index.vue 对单独页面的设置，会覆盖全局配置
useHead({
  title:"首页index",
  meta:[
      { name:"description",content:"首页描述2" },
      { name:"keywords",content:"首页关键词2" },
  ],
})

全局CSS

// 方法一
1. assets -> main.css
2. nuxt.config.ts中配置：
  css: [
    "@/assets/main.css"
  ], 

// 方法二
//在 app.vue 中引入样式。注意不是在<style>中！
<script setup>
import "@/assets/main.css";
</script>  

// 方法三
//或者直接在 `uno.config.ts`中定义 shortcuts，它也是相当于全局的
shortcuts: {
  // shortcuts to multiple utilities
  'containerX': 'w-[95%] mx-auto text-4.4 lg:w-[85%]'
  'btn': 'py-2 px-4 font-semibold rounded-lg shadow-md',
  'btn-green': 'text-white bg-green-500 hover:bg-green-700',
  // single utility alias
  'red': 'text-red-100'
}

全局函数utils

Nuxt使用 utils/ 目录在整个应用程序中使用auto-imports自动导入辅助函数和其他实用程序!

export function test2() {
    console.log(12793, "test.js2")
}

//也可以自定义导出目录
//nuxt.config.ts
imports: {
  dirs: ["apis"]
}

composables

在composables/目录中编写自己的自动导入可重用函数。但它只导入顶层函数，如有二级目录，则必须在config中配置！

export const newFun = (i) => {
    return i+5
  }

//composables/gets/foo.js
imports: {
    dirs: ["composables/**"] 
},  

Nuxt有些坑虽然让人很无语，特别是用习惯了Vue的人。但是Nuxt的强大和自动化程度真是太强大了。举个例子，以前用Vue时要写无数的import export来导入和导出包。到了Nuxt这，全自动化了，只管写就行，它会自动导入！

Nuxt的更新还是很快的，我用的这几个月中就从3.1更新到3.5了。有个[unhandled] [500] Body is unusable的问题一直没有解决，有时也会启动超慢，但瑕不掩瑜，优点还是很大嘀！

参考：
全局配置
配置