修罗

Nuxt3、Windi CSS、NaiveUI项目创建
Nuxt3https://nuxt.com/docs/getting-started/installation创建...
扫描右侧二维码阅读全文
14
2023/03

Nuxt3、Windi CSS、NaiveUI项目创建

Nuxt3

https://nuxt.com/docs/getting-started/installation

  • 创建项目
npx nuxi init <project-name>

image-20230314110313702.png

  • 安装依赖
cd <project-name> && yarn
  • 启动项目
yarn dev --port 3001
  • 访问

image-20230314110721543.png

Windi CSS

https://windicss.org/integrations/nuxt.html

整合

  • 安装
yarn add nuxt-windicss -D
  • 修改nuxt.config.ts
export default defineNuxtConfig({
    modules: [
    'nuxt-windicss',
    ],
})

测试

修改app.vue

<template>
  <div id="app">
    hello nuxt3
  </div>
</template>

<style scoped>
#app{
  @apply flex justify-center items-center 
  h-[100vh] bg-pink-500 hover:bg-dark-50;
}
</style>

效果:

image-20230314112159814.png

NaiveUI

https://www.naiveui.com/zh-CN/light/docs/ssr

整合

1,安装 naive-ui@css-render/vue3-ssr

yarn add naive-ui @css-render/vue3-ssr

2,在 nuxt.config.ts 增添下列配置

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  build: {
    transpile:
      process.env.NODE_ENV === 'production'
        ? [
            'naive-ui',
            'vueuc',
            '@css-render/vue3-ssr',
            '@juggle/resize-observer'
          ]
        : ['@juggle/resize-observer']
  },
  vite: {
    optimizeDeps: {
      include:
        process.env.NODE_ENV === 'development'
          ? ['naive-ui', 'vueuc', 'date-fns-tz/esm/formatInTimeZone']
          : []
    }
  }
})

3,项目根目录下新建plugins/naive-ui.ts

import { setup } from '@css-render/vue3-ssr'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  if (process.server) {
    const { collect } = setup(nuxtApp.vueApp)
    const originalRenderMeta = nuxtApp.ssrContext?.renderMeta
    nuxtApp.ssrContext = nuxtApp.ssrContext || {}
    nuxtApp.ssrContext.renderMeta = () => {
      if (!originalRenderMeta) {
        return {
          headTags: collect()
        }
      }
      const originalMeta = originalRenderMeta()
      if ('then' in originalMeta) {
        return originalMeta.then((resolvedOriginalMeta) => {
          return {
            ...resolvedOriginalMeta,
            headTags: resolvedOriginalMeta['headTags'] + collect()
          }
        })
      } else {
        return {
          ...originalMeta,
          headTags: originalMeta['headTags'] + collect()
        }
      }
    }
  }
})

测试:

image-20230314113912797.png

Last modification:March 14th, 2023 at 11:52 am

Leave a Comment