关键词:
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>
如何在 Nuxt.js Nuxt/Content 博客中使用内容文件夹中的图像设置 og:image
】如何在Nuxt.jsNuxt/Content博客中使用内容文件夹中的图像设置og:image【英文标题】:Howtosetog:imageinNuxt.jsNuxt/Contentblogwithimagesincontentfolders【发布时间】:2021-11-1613:54:36【问题描述】:如何获取已部署图像的最终位置的字符串表示形... 查看详情
nuxt.js的学习路由组件的学习(代码片段)
目录1、异步加载数据asyncData 2、axios请求数据3、axios拦截器4、Vue-Router nuxt-link5、动态路由(一)vue的动态路由(二)文件夹动态路由 6、嵌套路由 7、中间件8、Nuxt生命周期流程图分析1、异步加载数据asyncDataasync... 查看详情
如何在 nuxt.js 中定义路由
...】:2019-04-2421:11:53【问题描述】:我有一个使用Nuxt.Js的博客网站,假设xyz.com并希望显示特定国家/地区代码的所有页面,例如xyz.com/en/home、xyz.com/en/about等。,目的是显示所有国家/地区的博客,它不是多语言网站仅用于显示特定... 查看详情
vue-awesome-swiper使用教程
...(error是关键字,只能取这个名字)Ⅵ.设置全局样式Ⅶ.ElementUI使用测试的时候不要范如下错误:Ⅷ.发送请求➀.生命周期函数:在nuxt中,只有created以 查看详情
nuxt.config.js文件
参考技术Anuxt.config.js文件用于组织Nuxt.js应用的个性化配置,以便覆盖默认配置。Nuxt.js允许你在自动生成的vendor.bundle.js文件中添加一些模块,以减少应用bundle的体积。如果你的应用依赖第三方模块,这个配置项是十分实用的。Nux... 查看详情
nuxt.js的学习markdown(代码片段)
主要样式如下,做的表单提交, 基础表单模块如下 1、整体表单,ref="formData"相当于表单ID,:rules表示绑定规则属性<el-formref="formData":model="formData"label-width="100px& 查看详情
nuxt的介绍以及入门(代码片段)
1.Nuxt.js服务器端渲染学习目标了解Nuxt.js的作用掌握Nuxt.js中的路由掌握layouts、pages以及components的区别能够在Nuxt.js项目中使用element-ui掌握Nuxt.js中异步获取数据的方式完成豆瓣电影小案例掌握SEO的优化1.1Nuxt.js入门1.1.1什么是Nuxt.jsVu... 查看详情
elementui结合createelement自定义table头部筛选
参考技术A用elementUI的table处理数据时经常要遇到筛选,但element官方对表格的筛选具有一定的局限性,所以自己结合createElement写了一个类似搜索的列筛选功能。如下图:利用elementUI自带render-header表格列操作的属性结合createElement... 查看详情
nuxt.config.js 中的条件属性
...用nuxt.js的网站,并且希望有条件地在nuxt.config.js中有一个配置选项:我想更改路由器我运行npmrungenerate时的基础(构建静态)这是开发环境的完整配置文件(npmrundev):constpkg=requ 查看详情
nuxt实现全局状态管理导航切换优化
参考技术A那么,Nuxt.js自动生成的路由配置大致如下:样式添加:nuxt路由自动生成,这个时候我们可以自己定义一个route插件在nuxt.config中添加插件这样就实现了我想要的效果了,有更好的方法欢迎交流学习。 查看详情
如何在 nuxt.js (vue.js) 中配置动态 og 标签?
】如何在nuxt.js(vue.js)中配置动态og标签?【英文标题】:HowdoIconfiguredynamicogtagsinnuxt.js(vue.js)?【发布时间】:2018-05-3112:59:18【问题描述】:我使用vueinitnuxt/expressmyprojectstart启动了nuxt应用程序。这是我的目录。page|-_project.vue|-project|-... 查看详情
在 Nuxt js 项目中配置 stylelint 文件
】在Nuxtjs项目中配置stylelint文件【英文标题】:configstylelintfileinNuxtjsproject【发布时间】:2019-07-2408:53:39【问题描述】:我是使用Nuxtjs的新手,因此与nuxt.config.js文件相同。我想知道如何在我的Nuxtjs项目上设置stylelint文件并在每次... 查看详情
Nuxt.js 和内容丰富的网站无法正确生成动态路由
...似乎不会生成所有路线或无法识别某些页面。示例-我将博客文章上传到内容,但它没有出 查看详情
pm2部署nuxt3.js项目并设置服务器重启时项目自动重启(代码片段)
...在开发中是如何部署的。我之前写过一篇vue和ssr+nuxt.js配置环境变量以及pm2进行服务部署,这两篇博客一定要结合起来看。。。这篇文章只是对配置环境变量做了详细介 查看详情
vue和ssr+nuxt.js配置环境变量以及pm2进行服务部署(代码片段)
前言分享一下自己的ssr+nuxt.js开发的跨境电商的配置的项目环境变量。nuxt.js配置环境变量第一步:安装cross-env插件npminstallcross-env--save第二步:根目录下创建env.js文件第三步:env.js文件配置环境变量配置各个环境下... 查看详情
将 nuxt.js 应用程序配置为在 Web 服务器上的子目录中工作
】将nuxt.js应用程序配置为在Web服务器上的子目录中工作【英文标题】:Configurenuxt.jsapplicationtoworkinasubdirectoryonawebserver【发布时间】:2018-11-2908:03:54【问题描述】:我想将静态nuxt.js应用程序(使用nuxtgenerate构建)部署到网络服务... 查看详情
vue和ssr+nuxt.js配置环境变量以及pm2进行服务部署(代码片段)
前言vue-ssr+nuxt.js开发的跨境电商的配置的项目环境变量。nuxt.js配置环境变量第一步:安装cross-env插件npminstallcross-env--save第二步:根目录下创建env.js文件第三步:env.js文件配置环境变量配置各个环境下的接口地址和... 查看详情
nuxt.js多线程生成命令
...""/></a>安装包添加生成脚本到您的package.json配置生成的选项到nuxt.config.js应该配置workers数量。因为它可能没有用来启动workers,然后在系统中使用处理器的数量。为了平衡workers之间的负荷,他们会被发送成批的线程... 查看详情