NUXT3学习日记二（样式配置、引入组件库、区分在服务端还是在客户端渲染）

上一章已经给大家分享官网下载的nuxt3了，下面正式进入我所要说的内容吧

一、初始化样式

想必大家从我的git下载下来的nuxt3，能看到nuxt.config.ts这个文件了吧。

这里我们有两种css配置方式

1、css:['~/assets/base.scss']

这种方式不能在scss文件中定义变量

2、下面这种方式可以使用变量，变量以$开头

使用scss的方式和在vue3中一样：

 

二、引入element plus/nuxt

通过下载命令：npm i element-plus @element-plus/nuxt -D 下载组件库

组件库网址：https://nuxt.com/modules/element-plus#exclude

由于我们没有main.js，所以我们需要在nuxt.config.ts文件中进行配置组件库

如下：

三、另外，怎么区别是服务端还是客户端渲染呢？

if里是服务端，else中是客户端，另外在控制台输出的带有SSR标志的服务端渲染输出的结果，同时服务端渲染也能在vscode终端输出，如图所示：

 

好了，今天就到这里，之后我会给大家分享nuxt3中路由的基本使用，敬请期待！