🔴Nuxt3学习

安装

使用npx创建项目时pnpm安装需添加参数--shamefully-hoist使用同npm的依赖安装模式

npx nuxi init <demo-name>
npm i
# yarn
# pnpm i --shamefully-hoist

# 或
pnpm dlx nuxi init <demo-name>
pnpm i

nuxi CLI

pages

nuxi add page index
nuxi add page about
nuxi add page User/index

pages(路由直接使用的组件)只允许有一个根组件

插件

Nuxt提供了定制的插件，下面安装windicss插件，在插件页面会提供帮助与官方文档Windicss Module · Nuxt

pnpm add nuxt-windicss -D

为windicss配置引入ts类型提示(不使用windicss额外配置可以不引入)

tsconfig.json

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "types": [
      "nuxt-windicss",
    ]
  }
}

在nuxt.config.ts文件中声明nuxt-windicss模块,使用windicss属性进行windicss配置

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-windicss'],
  windicss: {
    config: {
      attributify: {
        prefix: 'w:',
      },
    },
  },
})

更多插件

Modules · Nuxt