关于typescript:Leafage-诞生记三

上一篇 记录了 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"
  }