编程日志：Nuxt 一

[图片源自：https://www.pexels.com/]

作为一个IT运营团队的成员，编写程序本不是我的专业。不过在工程学院工作的这么多年里，赶鸭子上架做了不少软件工程的工作。

当年在React，Vue和Angular选择了Vue，从版本二到现在版本三，也做了不少的项目。不过我一直没有台阶处在Vue环境下的应用，比如说很流行的Nuxt。Hive.io就是用Nuxt脚本写的。

自从转到校IT部门之后，我再没有了开发的工作，所以也就渐渐放下了这方面的计划。不过这两天在家中陪女友养病，却给自己一个机会自学一下。

对于一个半路出家的人来说，每次学一种新框架都不得不吐槽一下：能不能把文档写全一点？不是所有人都能无缝接轨的。

更搞笑的是，我发现不管我在谷歌上搜索任何官方文档之外的教程的时候，总能搜索到一个不是印度人就是阿拉伯人的博客。这里就不提名字了，说说这哥们的丰功伟业。他基本上把各个脚本、框架、程序库Github上面的Readme抄了一边写成自己的文章。

我用的是Brave浏览器，不知道他的网站上有没有广告。估计应该是靠这种搬砖赚钱吧。会有人看吗？别说，我就看了。因为没记住他的名字，好几次还是点进去了，每次都在疑问为啥和官方写的一摸一样的时候，鼠标滚动到这哥们的照片。

不聊其他的了，写一点这几天学到的东西，保留下来。

---

基本设置

Nuxt和没有任何框架下写Vue最大的不同就是大部分需要规定导入的脚本都不需要自己定义了。在刚刚建立Nuxt代码库的时候，我浪费了半天的时间寻找main.ts或者main.js文件。

网上搜索，不小心误入了好几次刚才提到的那个不是印度就是阿拉伯小哥的博客。

所有需要添加的不同的组成部分直接加文件夹就好了，Nuxt能够自动读取。

---

字体图标

除了各个CSS框架自带的字体图标之外，最好用的应该是Fontawesome。在原版Vue环境下，定义字体图标是在main.ts或者main.js里面的：

/* Add font awesome library */
import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faChevronDown, faCopyright, faBars, faDatabase, faLanguage } from "@fortawesome/free-solid-svg-icons";
import { faBtc, faTwitterSquare, faGithubSquare, faYoutubeSquare } from "@fortawesome/free-brands-svg-icons";
library.add(faBtc, faChevronDown, faCopyright, faBars, faDatabase, faLanguage, faTwitterSquare, faGithubSquare, faYoutubeSquare);
dom.watch();

上面是我经常用的Vue环境下main.js中导入的方式。

在package.json文件中"devDependencies"里面加上下面这几行。

"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-brands-svg-icons": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/vue-fontawesome": "^3.0.3",

yarn或者npm安装之后就可以使用了。

在Nuxt中，自己添加的导入的插件都是在/plugins文件夹中。不需要寻找main.ts或者main.js。只要写一个JS或者TS文件放在/plugins便可。

import { library, config } from "@fortawesome/fontawesome-svg-core"
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
import { faTwitterSquare, faGithubSquare, faYoutubeSquare } from "@fortawesome/free-brands-svg-icons"
import { faChevronDown, faCopyright, faBars, faDatabase, faLanguage } from "@fortawesome/free-solid-svg-icons"

library.add(faBtc, faChevronDown, faCopyright, faBars, faDatabase, faLanguage, faTwitterSquare, faGithubSquare, faYoutubeSquare)

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("font-awesome-icon", FontAwesomeIcon, {})
})

我这里还是用的JS文件。即便Nuxt v3要求typescript，但是JS文件也照人不误。

其实仔细看，不难发现，在Vue和Nuxt中导入fontawesome字体图标的方法基本上一直。终究是覆盖在Vue上面的框架，Vue里做啥这里也能做啥。

Nuxt程序库里面所有的设置几乎都存在nuxt.config.ts`中。找到css部分，或者自己加上：

  css: [
    "@fortawesome/fontawesome-svg-core/styles.css",
    "bulma/css/bulma.min.css",
    "bulma/bulma.sass",
    "@/assets/css/main.scss"
  ],

这下子，我放心了不少。知道不用浪费太多的时间。

---

国际和本地本地语言

作为一个一个双语的人，练习编成少不了增加多国语言的功能。增加多种语言其实已经很标准化了。不管是什么环境，都是用i18n。

"@nuxtjs/i18n": "^8.0.0-beta.10"

安装方法和fontawesome一样。

在nuxt.config.ts中的设置则需要在文件最上方加上：

import en from "./locales/en.json";
import zh from "./locales/zh.json";

我每次都是利用JSON文件存放各种语言的数据的；我会建立一个文件夹，叫做locales，然后在下面放上自己想加入的语言。

不是啥语言天才，能会中文和英文就不错了；别的也不想。

然后找到module部分，没有的话就自己加一个。

  modules: [
    "@nuxtjs/apollo",
    "@nuxtjs/i18n",
  ],

这里告诉Nuxt我安装了@nuxtjs/i18n。

再在同一个文件中的最底下加上：

i18n: {
    locales: [
      { code: "en", name: "English" },
      { code: "zh", name: "中文" },
    ],
    defaultLocale: "en",
    vueI18n: {
      fallbackLocale: "en",
      messages: {
        en,
        zh,
      },
    },
  }

这里en和zh是两个变量。就是上面import导入的两种语言的JSON文件。生活在美国嘛，所以默认的语言就选择了英文en。

---

自定义元素

用Vue生成一个完整的网络应用基本上就是用Components。每个页面或者一个页面中的一个能够重复使用的部分都是存在Components里面。

在全裸的Vue程序库中，Components和Views里面没有规定必须把前端网页写在哪个文件夹下。只有最佳实践，没有硬性规定。

在Nuxt每一个网页要放在/pages文件夹下。重复使用的放在/components下面。

最好理解的方法就是有网址能够直接浏览的都在/pages里面。所有/pages里面的.vue文件都会自动编译成一个个网页，不需要自己手动。

布置每一个网页的格式的方法是在/layouts文件夹下面加一个default.vue文件。

<template>
  <div>
    <AppHeader />
    <NuxtPage class="container" />
    <AppFooter />
  </div>
</template>

这里面<AppHeader />和<AppFooter />是两个在/components下面的页眉页脚，而NuxtPage就是导入/pages下面的网页，相当于Vue里面的<router-view />。

---

好了就先写这么多了。学习的东西比这个多，但是没时间写了。还想在睡觉前再学点新的东西呢……