nuxt3Js初体验

中文文档：https://nuxt.com.cn/

安装启动

官方方法：

# npx
npx nuxi init nuxt-app
# pnpm
pnpm dlx nuxi init nuxt-app

国内拉取不了官网的示例脚手架，可以采用手动克隆模板仓库的方法。

git clone -b v3 https://github.com/nuxt/starter.git nuxt3-demo

-b 是指定分支，现在最新的 nuxt 3 是在 v3 的分支上

拉取下来之后，yarn 一下安装依赖，然后启动即可。

遇到的坑

渲染方式

nuxt是ssr框架，所以js充当了服务端也充当了客户端，先渲染服务端再渲染客户端。所以在vue中写的js代码，会执行2遍。

配置文件

nuxt.config.ts文件可以配置

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },

  //运行时的一些全局变量
  runtimeConfig:{
    count:1, // 服务端才可以获取到
    public:{ // public下的配置客户端和服务端都可以获取
      baseURL:'http://127.0.0.1:8080',
    }
  }
})

vue

<template>
  <div>
   1
  </div>
</template>
<script setup>
  const config = useRuntimeConfig()
  console.log(config.count)
  console.log(config.public.baseURL)
  // 另外的写法，直接用import.meta.server 来判断是否是服务端，更加方便
  if (import.meta.server) {
    console.log('server')
  }else{
    console.log('client')
  }
</script>

css配置

整合sass

yarn add -D sass

新建文件 /assets/css/base.scss

$myColor:green;

h1{
  color: red;
}

修改配置

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    compatibilityDate: '2024-11-01',
    devtools: { enabled: true },

    /*引入css的两种写法，建议第二种，因为可以支持变量*/
    // css:["~/assets/css/base.scss"],
    vite:{
        css:{
            preprocessorOptions:{
                scss:{
                    additionalData: '@use "~/assets/css/base.scss" as *;'
                }
            }
        }
    },

    //运行时的一些全局变量
    runtimeConfig:{
        count:1,
        public:{
            baseURL:'http://127.0.0.1:8080',
        }
    }
})

app.vue

<template>
  <div>
   1
    <h1>xx</h1>
  </div>
</template>
<script setup>
  const config = useRuntimeConfig()
  console.log(config.count)
  console.log(config.public.baseURL)
</script>
<style scoped lang="scss">
    div{
      background: $myColor;
    }
</style>

引入element-ui plus

yarn add element-plus

全局引入

创建一个插件文件，例如 plugins/element-plus.js

import { defineNuxtPlugin } from '#app'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(ElementPlus)
})

在 nuxt.config.ts 中注册该插件：

export default defineNuxtConfig({
  // ...
  plugins: [
    '~/plugins/element-plus.js',
  ],
  // ...
})

使用 Element Plus 组件

<template>
  <el-button type="primary">Primary Button</el-button>
</template>