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

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中测试如下

效果如下： 

 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、配置显示头部

 

  

    

      
        
        
          
            
          
        
        
        
          
          
            博客
            问答
             标签
          
        
        
        
          

            管理后台
            
            登录
            注册
          
          
            
              
              
            
            
              写文章
              提问题
              我的主页
              退出
            
          
        
      
    
  

样式如下

/* 头部 */
.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的组件，中间主要渲染内容是pages下面index.vue中配置的

回到页面顶部