nuxt3 配置

官网地址

https://nuxt.com/

1、设置环境变量 和 RunTimtConfig 配合使用

1、根目录下创建 .env.development 和 .env.production 文件

2、内容

// 必须 以 NUXT 开头

// .env.development 文件
NUXT_BASE_URL = http://development:10011

// .env.production文件
NUXT_BASE_URL = http://production:10011

3、nuxt.config.ts 文件中

export default defineNuxtConfig({
   
    // 定义 运行时的全局变量（public 对象里面的在服务端和客户端都可以访问到， 但是定义在外面的（count）只能在服务端获取到）
    runtimeConfig: {
   
        public: {
   
            baseURL: process.env.NUXT_BASE_URL
        }
    }
})

4、配置 package.json 脚本

"build": "nuxt build --dotenv .env.production --exec",
"dev": "nuxt dev --dotenv .env.development --exec",

组件中使用

const runtime = useRuntimeConfig()

console.log(runtime.public.baseURL)    // 开发环境和生产环境就区分开了

2、引入全局样式

1、npm i sass --save
2、在项目的根目录项创建 assets/css/base.scss， assets目录是固定写法

3、在nuxt.config.ts 配置

// 引入css 全局样式，和 runtimeConfig 平级
css: [
     "@/assets/css/base.scss"
 ]

到此， 写在 base.scss 的样式就生效了， 但是我们经常会使用scss 定义变量， 上面的引入方式就不能使用了
需要在 nuxt.config.ts 配置成

// 引入 scss 中定义变量的样式( 下面这样配置，public.scss 文件中一定要有 $primaryColor：red; 这样的变量才行 )
vite: {
   
     css: {
   
         preprocessorOptions: {
   
             scss: {
   
                 additionalData: "@use '@/assets/css/public.scss' as *;"  // 分号后面可以写多个scss 文件
             }
         }
     }
 }

然后直接在 样式表使用定义的变量即可

h1{
    color: $primaryColor; }

3、使用elementPlus、vant

参考element plus 官网
1、npm install -D @element-plus/nuxt
2、nuxt.config.ts 文件

// 引入模块化（和 css、vite 平级）
modules: ['@element-plus/nuxt'],

3、组件中就可以正常使用了

移动端使用 vant 组件库就可以，配置按照