上一篇 记录了nuxtjs中两个函数的应用，本篇将持续介绍nuxtjs的相干应用以及我在开发Leafage过程中遇到的问题及解决办法。
首先来看一下nuxt.config.js,这个配置文件，是nuxtjs的外围配置文件，nuxtjs将依据这个配置文件里的配置项来生成.nuxt目录下的文件。
export default { // 全局页头配置 (https://go.nuxtjs.dev/config-head) head: { title: 'leafage-ui', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: '' }, // 这里能够增加网站验证码信息 { name: 'google-site-verification', content: 'xxx' }, // 实测百度无奈通过验证，此问题还没解决 { name: 'baidu-site-verification', content: 'code-xxx' }, ], link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }], }, // 全局css (https://go.nuxtjs.dev/config-css) css: [ '~/node_modules/highlight.js/styles/github.css' // 例如：引入highlight.js的github款式 ], // 配置后，会在页面渲染之前加载 (https://go.nuxtjs.dev/config-plugins) plugins: [ '~/plugins/mock', '~/plugins/axios' ], // 主动引入组件 (https://go.nuxtjs.dev/config-components) // components: true, // nuxtjs 2.15版本之前的形式 // 2.15版本及之后应用此形式 components: [ '~/components/global' // 扫描此门路，global目录下的.vue文件，作为组件，可主动引入，不须要在应用的时候，手动import ] // 用于开发和构建的modules (recommended) (https://go.nuxtjs.dev/config-modules) buildModules: [ // https://go.nuxtjs.dev/typescript '@nuxt/typescript-build', // https://go.nuxtjs.dev/tailwindcss '@nuxtjs/tailwindcss', ], // 工具module (https://go.nuxtjs.dev/config-modules) modules: [ // https://go.nuxtjs.dev/axios '@nuxtjs/axios', // https://go.nuxtjs.dev/pwa '@nuxtjs/pwa', ], // nuxt 加载进度条配置 (https://zh.nuxtjs.org/api/configuration-loading) loading: { color: 'black' }, // 如果增加了@nuxt/axios则会须要此配置来笼罩默认的一些配置 (https://go.nuxtjs.dev/config-axios) axios: { https: true, progress: true, // 是否显示加载进度条 credentials: true, // 申请携带cookie baseURL: 'https://www.abeille.top/api', proxy: true // 申请代理，开发中跨域问题解决办法 }, // 打包配置 (https://go.nuxtjs.dev/config-build) build: { // 例如：增加css宰割配置 extractCSS: true, },}以上为nuxt.config.js的根本配置项及应用示例和阐明，对于更多配置请参考相干 modules 的文档。
下面介绍了通过 components 配置项来开启主动引入，在应用时就不须要手动import了，示例如下：
<template> <section class="container mx-auto"> <div class="grid grid-flow-row grid-cols-1 lg:grid-cols-3"> <div class="lg:col-span-2"> <TopPosts /> <div class="mb-12"> <ul class="flex justify-between items-center text-center border border-black" id="myTab" role="tablist" > <li class="w-1/3 hover:bg-black hover:text-white" :class="{ 'bg-black text-white': order == 'likes' }" > <button @click="retrieve('likes')" class="w-full h-10 text-xs font-bold uppercase focus:outline-none" > Trending </button> </li> <li class="w-1/3 hover:bg-black hover:text-white" :class="{ 'bg-black text-white': order == 'viewed' }" > <button @click="retrieve('viewed')" class="w-full h-10 text-xs font-bold uppercase focus:outline-none" > Most View </button> </li> <li class="w-1/3 hover:bg-black hover:text-white" :class="{ 'bg-black text-white': order == 'comment' }" > <button @click="retrieve('comment')" class="w-full h-10 text-xs font-bold uppercase focus:outline-none" > Popular </button> </li> </ul> <p v-if="$fetchState.pending">Fetching mountains...</p> <p v-else-if="$fetchState.error">An error occurred :(</p> <ListItem v-else :datas="datas" /> </div> <Pagation @retrieve="retrieve" /> </div> <SideBar /> </div> </section></template><script lang="ts">import { defineComponent } from "@vue/composition-api";import { SERVER_URL } from "~/assets/request";export default defineComponent({ name: "Main", async fetch() { this.datas = await this.$axios .get(SERVER_URL.posts.concat("?page=0&size=10&order=", this.order)) .then((res) => res.data); }, data() { return { datas: [], order: "likes", }; }, methods: { retrieve(order: string) { this.order = order; this.$fetch(); }, },});</script>能够看到，在<script></script>模块中没有import引入TopPosts、Pagation、SideBar组件，也没有 components 项呈现，因为在nuxt.config.js中开启了主动引入解决。
可能你留神到layout.vue中有一个<Nuxt>的组件，它的作用是用来展现我的项目中其余组件的，会被pages目录下的.vue文件替换为展现内容。
那对于路由的应用，nuxtjs提供了，<nuxt-link> 来替换vue中的 <router-link>, <nuxt-child> 来替换vue中 <router-view> 相干应用办法与之对应。
后面介绍过，nuxtjs是依据pages目录下的构造生成路由信息，例如：pages/index.vue 生成的路由如下：
{ "name": "index", "path": "/", "component": "D:\\\\other\\\\leafage-ui\\\\pages\\\\index.vue", "chunkName": "pages/user" },pages/posts/index.vue 将生成:
{ "name": "posts", "path": "/posts", "component": "D:\\\\other\\\\leafage-ui\\\\pages\\\\posts\\\\index.vue", "chunkName": "pages/posts/index" }那如何配置能力生成动静路由呢，例如：posts/detail/:slug?，这样的动静路由须要应用下划线结尾的文件命名形式，如下所示：
{ "name": "posts-detail-slug", "path": "/posts/detail/:slug?", "component": "D:\\\\other\\\\leafage-ui\\\\pages\\\\posts\\\\detail\\\\_slug.vue", "chunkName": "pages/posts/detail/_slug" }以上示例，体现在目录构造如下所示：
注： 有没有留神到，这里都是用的小写名称来命名文件。
其实也可应用首字母大写（而且应用全小写的门路匹配也能匹配到），然而举荐时应用全小写的独立单词，因为路由信息是依据文件夹和文件名来创立的，如果页面首字母大写生成的，那么生成的路由信息中，path也是首字母大写，这个其实不太标准。示例如下：
{ "name": "User", "path": "/User", "component": "D:\\\\other\\\\leafage-ui\\\\pages\\\\User.vue", "chunkName": "pages/User" }