🔴Nuxt3学习

本文最后更新于：2023年7月28日 凌晨

安装

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

1
2
3
4
5
6
7
8
npx nuxi init <demo-name>
npm i
# yarn
# pnpm i --shamefully-hoist

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

nuxi CLI

pages

1
2
3
nuxi add page index
nuxi add page about
nuxi add page User/index

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

1

插件

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

1
pnpm add nuxt-windicss -D

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

tsconfig.json 

1
2
3
4
5
6
7
8
{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "types": [
      "nuxt-windicss",
    ]
  }
}

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

nuxt.config.ts 

1
2
3
4
5
6
7
8
9
10
11
export default defineNuxtConfig({
  modules: ['nuxt-windicss'],
  windicss: {
    config: {
      attributify: {
        prefix: 'w:',
      },
    },
  },
})

更多插件

Modules · Nuxt

Vue > SSR框架 > NUXT
#SSR #NUXT
🔴Nuxt3学习
https://qingshaner.com/Nuxt3学习/
作者
清山
发布于
2023年1月2日
许可协议