Nuxt的大坑小坑

构建项目

首先根据官网的Nuxt的安装方式

npx nuxi@latest init <project-name>

就有可能出现下面这样

 ERROR  Error: Failed to download template from registry: 
 Failed to downloadhttps://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: 
 TypeError: fetch failed

网上很多方法都试了，但是都没解决😭

最后尝试手机开热点下居然成功了。

这个还是看玄学网络，在有些地方的网就是可以，有些地方就是不可以，手机热点我反正可以的，各种方法都试了的小伙伴不行就试试开热点。

content模组

最开始用content模组读取markdown文件，死活读不出来样式，全是一个大小的文字，也不分标题啥的。

试了下，原来是Tailwindcss会把h1-h2之类的标签全部初始化，官方文档有写

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

原话是：

It helps you avoid accidentally deviating from your type scale.

In UI development, headings should often be visually de-emphasized.

就摘录了两段的第一句，确实用上Tailwindcss基本就是用一个div标签就基本够用了，但是奈何我们的content模组靠着h1之类的标签展示markdown文件，所以这就有了矛盾，现在是两个解决方法：

1. content和Tailwindcss两个只使用一个（简单粗暴，哈哈）
2. 用Tailwindcss提供的Typography插件
   首先在已经安装Tailwindcss是基础下安装：

   npm install -D @tailwindcss/typography
   

   
   然后再 tailwind.config.js 文件里加入:

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     theme: {
       // ...
     },
     plugins: [
       require('@tailwindcss/typography'),
       // ...
     ],
   }
   

   
   如果你没有tailwind.config.js文件，用这个初始化（你用Nuxt写Tailwindcss没有提示可能也是因为没有这个文件）:

   npx tailwindcss init
   

   
   最后用<article>标签包裹<ContentDoc>，之后markdown就能正常显示了，置于这个插件还有属性可以调，看看官方文档就可以了:

   <article>
       <ContentDoc />
   </article>