nuxt.js的学习 elementUI配置博客头部

Posted 2021-09-08 捡黄金的少年

1、修改项目head配置

在nuxt.js的nuxt.config.js配置head，进行全局的配置

 head: {
    title: '博客社区门户网',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'IT技术交流，java学习问答' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/meng.ico' }
    ]
  },

效果如下 

 2、Nuxt.js 整合 ElementUI

1、全局安装elementUI

npm i element-ui -S

2、以插件方式引入 ElementUI ：创建 plugins/element-ui.js

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

3、在 nuxt.config.js 内配置 css , plugins , build 如下：

css: [ // 全局css
 // 1. elementui各组件样式
 'element-ui/lib/theme-chalk/index.css',
 // 2. 自适应隐藏显示样式
 'element-ui/lib/theme-chalk/display.css'
 ],
 
 plugins: [ // 3. 插件
 '@/plugins/element-ui'
 ],
 build: {
 // 4. 将位于node_modules的模块导出
 transpile: [/^element-ui/],
 
 // webpack自定义配置
 extend (config, ctx) {
 }

 }

4、在pages下面的index.vue中测试如下

<template>
  <div class="container">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  


  </div>
</template>

效果如下： 

 3、安装配置axios

（一）安装 @nuxtjs/axios 模块

npm install @nuxtjs/axios

 （二）在nuxt.config.js中配置代理

 modules: [
    '@nuxtjs/axios',

  ],
  axios: { // 对象
    proxy: true, // 开启代理
    prefix: '/api' // 请求前缀
  },
  proxy: { // 对象
    // 将 /api 替换为 '', 然后代理转发到 target 指定的 url
    '/api': {
      target: 'http://mengxuegu.com:7300/mock/6111da6ad43427056756800a/blog-web',
      pathRewrite: { '^/api': '' }
    }

  }, // 逗号

4、配置显示头部

 

  <div class="mxg-header mxg-header-fixed">
    <div class="mxg-nav">
      <el-row type="flex" justify="space-between">
        <!-- !-- Logo， 任意宽度都是占4格 -->
        <el-col :span="4" :xs="4" :sm="4" :md="4" class="logo">
          <nuxt-link to="/">
            <img src="@/assets/images/logo.png" alt="" height="40px" />
          </nuxt-link>
        </el-col>
        <!-- 导航菜单， 手机与平板坚屏都占0格，也就是隐藏，其他10格-->
        <el-col class="hidden-sm-and-down" :md="10">
          <!-- 因为请求的是路由，所以default-active不用加： -->
          <el-menu
            default-active="/"
            mode="horizontal"
            active-text-color="#345Dc2"
            background-color="#fafafa"
            router
          >
            <el-menu-item index="/">博客</el-menu-item>
            <el-menu-item index="/question">问答</el-menu-item>
            <el-menu-item index="/lable"> 标签</el-menu-item>
          </el-menu>
        </el-col>
        <!-- 登录、注册/头像 手机与平板坚屏都占18格，其他占8格-->
        <el-col class="nav-right" :xs="18" :sm="18" :md="8">
          <div class="nav-sign">
            <el-button type="text">管理后台</el-button>
            <!-- 判断UserInfo里面有没有值的存在 -->
            <el-button
              type="text"
              v-if="!userInfo"
              @click="$store.dispatch('LoginPage')"
              >登录</el-button
            >
            <el-button v-if="!userInfo" size="small" round type="primary"
              >注册</el-button
            >
          </div>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <el-avatar
                icon="el-icon-user-solid"
                :src="userInfo ? userInfo.imageUrl : null"
              >
              </el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="article">写文章</el-dropdown-item>
              <el-dropdown-item command="question">提问题</el-dropdown-item>
              <el-dropdown-item command="user">我的主页</el-dropdown-item>
              <el-dropdown-item command="logout" v-if="userInfo"
                >退出</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>
  </div>

样式如下

/* 头部 */
.mxg-header {
  width: 100%;
  height: 60px;
  border-top: 3px solid #345dc2;
  background-color: #fafafa;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  z-index: 1501;
}
/* 固定头部 */
.mxg-header-fixed {
  position: fixed;
}
/* 导航 */
.mxg-header .mxg-nav {
  max-width: 1140px;
  /* 居中 */
  margin: auto;
  padding: 10px;
}
.el-menu.el-menu--horizontal {
  /* 去除底部边框 */
  border-bottom: 0px;
  margin-top: -10px;
}
/* 导航右侧 */
.nav-right {
  text-align: right;
}
.nav-sign {
  position: absolute;
  right: 0;
  margin-right: 50px;
}
/* 防止点击头像有边框 */
div:focus {
  outline: none;
}

 样式大致如下 

5、配置返回顶部组件

在layouts 下面的default.vue文件下面，引入头部header组件和底部footer的组件，还有返回顶部的element的组件，中间主要渲染内容<nuxt/>是pages下面index.vue中配置的

<template>
  <div>
    <mxg-header />
    <div class="main">
      <nuxt />
    </div>

    <mxg-footer />
    <!-- 回到顶部，bottom 下拉距离顶部多高时，显示回到顶部图标。注意不要加 :target -->
    <el-backtop :bottom="80"></el-backtop>
  </div>
</template>

<el-backtop>回到页面顶部

 <el-backtop :bottom="80"></el-backtop>