Nuxt、Naive UI、Unocss，前端开发三件套 / nuxt#2

经过一段时间的开发测试，在框架上Nuxt比较适合，在UI上，NaiveUI不错，在CSS上，Unocss就可以。这三者结合起来，可以组成前端开发的三件套。Nuxt有一种模块的机制，可以很方便地拓展它的功能。在前端方面主要是UI 和 CSS，我也选了两个比较适合的。

nuxt

Nuxt安装

"nuxt": "^3.4.3" nodejs: v18.16.0

1. npx nuxi init nuxt-app 
  运行可能会出错，解决：
  首先要打开小梯子，然后在CMD中输入：
  set http_proxy=http://127.0.0.1:1080
  set https_proxy=http://127.0.0.1:1080
 
 也可以直接到github下载模板， https://github.com/nuxt/starter/tree/v3

 更改配置： package.json  devDependencies -> dependencies

2.  cnpm install --global yarn   //yarn --version  1.22.19
    yarn install

3. yarn dev -o

//安装 vs code插件
Volar  --vs code    //vue插件,代码高亮
Naive Ui Snippets   //代码提示
UnoCSS              //代码提示

naive UI

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>

Unocss安装

这是一个按需原子化 CSS 引擎，比起直接使用 TailwindCSS 更轻更快！
它的预设样式可以直接使用 TailwindCSS 和 Windicss 的样式。

yarn add @unocss/nuxt   //^0.51.12

//配置模块，nuxt.config.ts：
  modules: [
    '@unocss/nuxt',
  ],

// 根目录创建 uno.config.ts
import {
  defineConfig, presetAttributify, presetIcons,
  presetTypography, presetUno, presetWebFonts,
  transformerDirectives, transformerVariantGroup
} from 'unocss'

export default defineConfig({
  rules: [
      //...
  ],
  shortcuts: [
    // ...
  ],
  theme: {
    colors: {
      // ...
    }
  },
  presets: [
    presetUno(),  //工具类预设
    presetAttributify(),  //属性化模式支持
    presetIcons(),    //icon支持
    presetTypography(),
    presetWebFonts({
      fonts: {
        // ...
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
})

三者安装好后，yarn dev跑起来试试，能正常打开页面即OK!