Nuxt2项目加入UI库-ElementUI | 并开发顶部导航 | 设置全局样式

概述

创建完nuxt2项目后，幽络源这里建议先引入UI库，便于后期开发，然后通过开发一个顶部导航测试是否正常。

引入ElementUI

1、安装 Element UI 到 Nuxt 2 项目

执行如下命令以安装ElementUI

npm install element-ui --save

如图

2、创建插件文件

在项目根目录创建plugins目录，新建 element-ui.js 文件，加入如下内容

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

如图

3、在 nuxt.config.js 中注册插件

代码如下

// nuxt.config.js
export default {
  plugins: [
    '@/plugins/element-ui' // 注册 Element UI
  ]

}

如图

开发顶部导航

幽络源这里开发顶部导航主要是用于测试UI库是否引入有效

1、创建顶部导航组件

根目录下创建 components 目录，创建 TopNavbar.vue 文件，代码如下

<!-- components/TopNavbar.vue -->
<template>
    <el-menu
      mode="horizontal"
      :default-active="$route.path"
      router
      :style="{ background: 'linear-gradient(to right, #755DF6, #9B59B6)', border: 'none' }"
      text-color="#fff"
      active-text-color="#ffd04b"
      style="display: flex; align-items: center; "
    >
      <!-- 左侧 Logo -->
      <div style="margin: 0 20px;">
        <img
          src="/幽络源网站PNG.png"
          alt="Logo"
          style="height: 40px;"
        />
      </div>
  
      <!-- 中间导航项 -->
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/about">关于我们</el-menu-item>
      <el-menu-item index="/products">产品中心</el-menu-item>
      <el-menu-item index="/contact">联系我们</el-menu-item>
  
      <!-- 中间占位，用于将右侧内容推到右边 -->
      <div style="flex-grow: 1;"></div>
  
      <!-- 右侧搜索框 -->
      <div style="margin-right: 20px; width: 200px;">
        <el-input
          placeholder="搜索..."
          v-model="searchQuery"
          @keyup.enter.native="onSearch"
          size="small"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="onSearch"
          ></el-button>
        </el-input>
      </div>
    </el-menu>
  </template>
  
  <script>
  export default {
    data() {
      return {
        searchQuery: ''
      }
    },
    methods: {
      onSearch() {
        if (this.searchQuery.trim()) {
          // 模拟搜索跳转（可替换为真实逻辑）
          this.$router.push(`/search?q=${encodeURIComponent(this.searchQuery)}`)
        }
      }
    }
  }
  </script>

2、在index.vue中引入顶部导航组件

代码如下

<!-- pages/index.vue -->
<template>
  <div>
    <!-- 引入顶部导航 -->
    <TopNavbar />

    <!-- 页面内容 -->
    <div style="padding: 40px; text-align: center;">
      <h1>首页内容</h1>
      <p>顶部导航已正常显示</p>
    </div>
  </div>
</template>

<script>
import TopNavbar from '~/components/TopNavbar.vue'

export default {
  components: {
    TopNavbar
  }
}
</script>

运行项目结果如下

设置全局样式

默认的页面body是自带 8px 的 margin 的，从上面的图中就能看到，边界有一部分留白

1、创建全局CSS

在根目录下创建 assets/css目录，创建 global.css，加入如下代码，使全局的 外边距和内边距设置为0

*{
    margin:0;
    padding:0;
}

如图

2、引入全局样式

在 nuxt.config.js 中引入我们自定义的全局 CSS 文件，主要代码为如下

export default {
  css: [
    '~/assets/css/global.css'
  ]
}

如图

最后可以看到我们的顶部导航栏边界不再留白，如图

结语

以上为幽络源的“Nuxt2项目加入UI库-ElementUI | 并开发顶部导航 | 设置全局样式”教程，如有疑问或对网站开发感兴趣，可加入我们的QQ群 307531422。