Naïve UI，上好的轮子 / nuxt#3

在UI的使用上，我其实一直用的Bootstrap，用得也顺手。这次要不是更换设计栈，也没想着要改UI框架。主要是Bootstrap在Nuxt上运行不了！

Bootstrap这种UI都是纯前端的，而Nuxt是服务端渲染，有时js调用window document这些是会出错的，因为服务端（Nodejs）是没有这些变量的。所以，这类的UI必须要适配后才能装在Nuxt上运行。很可惜，Bootstrap没有适配。我在折腾了大半个下午后也只能放弃Bootstrap。

https://www.naiveui.com/zh-CN/os-theme ，替补方案是Naïve UI

有开发的小伙伴做好了适配，虽然还没进官方的module, 但也足够好用了。"@huntersofbook/naive-ui-nuxt"]这个库很易用，简单三步就可使用。

1. yarn add @huntersofbook/naive-ui-nuxt  //^0.7.1 

2. 配置，nuxt.config.ts：
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ["@huntersofbook/naive-ui-nuxt"],
});
3. <n-button type="primary">
      Primary
    </n-button>

和所有的前端UI一样，用法都基本类似了。结构也相差不大，一般由div, css, js三部分构成，在Nuxt中导入后就可直接使用了。

利用栅格系统可以快速地做出响应式的网页！

习惯了响应式设计的范式，Naïve UI也提供了同样的方法。利用类Bootstrap的栅格，响应式也做得很易用。目前也就图片好像没有做到响应式，我找了半天也没找到类似的属性，估计要自己写啰！