分类：Nuxt

2021
07-01

Nuxt不同环境如何区分的方法

背景在一般情况下，我们的项目肯定需要区分不同环境，来决策其对应的策略，包括但不局限于接口转发地址、打包策略、日志输出策略等。那么抛开具体要设置哪些内容，我们需要先要有区分环境的能力才能做这些事情。那么Nuxt提供给我们这样的基本能力了么？答案是肯定的。下面我们以不同环境肯定会不一样的接口转发地址为例，进行相关的说明。nuxt.config.js用Nuxt框架开发的同学相信对这个配置文件都不陌生，那么本文也会涉及到这里面... 继续阅读 >

2021
01-14

vue element和nuxt的使用技巧分享

1.element的时间选择提交的格式转化例如FriSep07201800:00:00GMT+0800(中国标准时间)转化为2020-01-11的格式这记载datepicker中添加一句value-format=”yyyy-MM-dd”<el-date-pickertype="date"v-model="createdate"@change="formatTime"value-format="yyyy-MM-dd"placeholder="选择时间"></el-date-picker>2.动态循环复选框时，无法选中问题this.menulist[index].sonList.map((item)=>{this.$set(item,'checked',... 继续阅读 >

2020
11-08

Nuxt的动态路由和参数校验操作

其实动态路由就是带参数的路由。比如我们现在新闻模块下面有很多新闻详情页，这时候就需要动态路由的帮助了。新闻详细页面我们在news文件夹下面新建了_id.vue的文件，以下划线为前缀的Vue文件就是动态路由，然后在文件里边有$route.params.id来接收参数。/pages/news/_id.vue<template><div><h2>News-Content{{$route.params.id}}</h2><ul><li><ahref="/"rel="externalnofollow"rel="externalnofollow">Home</a></li... 继续阅读 >

2020
11-08

Nuxt 项目性能优化调研分析

性能优化，这是面试中经常会聊到的话题。我觉得性能优化应该因具体场景而异，因不同项目而异，不同的手段不同的方案并不一定适合所有项目，当然这其中不乏一些普适的方案，比如耳熟能详的文件压缩，文件缓存，CDN，DNS预解析，等等，但是我更希望听到的是因为不同的项目不同的需求，解决不同的问题而采取的不同的优化手段，比如BigPipe，分段输出页面的各个部分，对于SNS网站是非常合适的，减少了用户的等待时间；相对应的还有... 继续阅读 >

2020
11-06

nuxt 路由、过渡特效、中间件的实现代码

在pages下的文件.vue文件会被自动加载成路由0、声明式导航<nuxt-linkto="/">首页</nuxt-link>用法和router-link用法一致1、定义一级路由在pages下创建.vue文件,访问路径后加上/文件名,访问index.vue对应的路径为'/';2、创建多级路由在pages创建文件夹,文件夹内创建.vue文件访问路径:/文件夹名/文件名pages/--|user/-----|index.vue-----|one.vue--|index.vue将被转换成:router:{routes:[{name:'index',path:'/',... 继续阅读 >

2020
11-06

Nuxt的路由动画效果案例

路由的动画效果，也叫作页面的更换效果。Nuxt.js提动两种方法为路由提动动画效果，一种是全局的，一种是针对单独页面制作。全局路由动画全局动画默认使用page进行设置，例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个main.css文件。/assets/css/main.css.page-enter-active,.page-leave-active{transition:opacity2s;}.page-enter,.page-leave-active{opacity:0;}... 继续阅读 >

2020
11-06

在nuxt中使用路由重定向的实例

我们都知道，在写SPA的时候，我们可以通过配置vue-router来实现路由的重定向。官方文档（以及ts类型）的定义中给出了这一选项：interfaceRouteConfig={path:string,redirect?:string|Location|Function,}也就是说，我们可以定义这样一个路由：{path:"/foo",redirect:"/foo/bar",}这样，我们在访问/foo的时候，就会被重定向到/foo/bar。这些都是老生常谈了。然而，到了SSR的环境下，如果使用nuxt，因为nuxt采... 继续阅读 >

2020
11-06

Nuxt的路由配置和参数传递方式

学习前端框架都要学习路由机制，因为路由可以体现我们的业务逻辑，把模块串联起来，让程序换发光彩。那简单的说路由就是我们的跳转机制，也可以简单理解成链接跳转。Nuxt.js的路由并不复杂，它给我们进行了封装，让我们节省了很多配置环节。简单路由Demo我们现在在根目录的pages文件下新建两个文件夹，about和news(模仿关于我们和新闻的功能模块)在about文件夹下新建index.vue文件，代码如下：<template><div><h2>AboutInde... 继续阅读 >

2020
11-06

nuxt静态部署打包相对路径操作

以往在nuxt项目中，打包静态化部署的的文件如下：路径为绝对路径，当项目的域名为二级域名的时候，就不能打包为这绝对路径了。nuxt不同于vue项目，思索了许久，终于找到了配置的地方：nuxt项目中nuxt.config.js：module.exports={router:{base:'./'}}打包后的文件：补充知识：nginx部署，nuxt静态部署，路由跳转失效的问题nuxt静态部署问题静态部署：路由模式跳转失效的问题；不能使用历史模式，需要使用‘hash'模式... 继续阅读 >

2020
11-06

Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)

Nuxt嵌套路由官网上的API详解：点击链接看了官网上的api实现了官网的案例你会发现访问父页面中只能显示父页面中的内容，要想默认的在<nuxt-child>区域显示一个页面内容怎么办？自己案例代码：pages/parent.vue<template><div><h2>父组件的页面的内容</h2><ul><!--进行切换子页面，写法同vue.js--><li><nuxt-linkto='/parent/child'>child</nuxt-link></li><li><nuxt-linkto='/parent/child2'>child2</nuxt-link></li... 继续阅读 >

2020
11-06

nuxt 服务器渲染动态设置 title和seo关键字的操作

使用如下钩子即可，但是前提条件是没有默认配置head的titleasyncData({app},callback){app.head.title=‘newtitle'callback(null,{})},补充知识：vue每个页面动态切换titlekeywordsdescription（seo的设置）最近接触到需要使用到Seo,要求每个页面拥有不同的title,keywords,description！！！在这里先添加一步：html文件添加<metadata-n-head="1"data-hid="description"name="description"content=""><metadata-... 继续阅读 >

2020
11-06

nuxt 每个页面head标签内容设置方式

导读在前面几节课程中，我们已经完成对首页，jokes查询页，About页面的开发，接下来，我们来看一下每个页面的head标签内容，我们会发现这三个页面的标签一致，而且和nuxt.config.js配置文件的head配置保持一致；所以我们需要对这三个页面单独做一个head，更加方便于SEO优化，搜索引擎的爬取；好，我们打开index.vue，编辑如下：head(){return{title:'jokeshomepage',meta:[{hid:"description",name:"description",... 继续阅读 >

2020
11-06

nuxt 页面路由配置,主页轮播组件开发操作

在上一个章节内容中，我们开发了AppHeader公共顶部菜单导航栏组件，本章节呢，我们根据菜单导航的路由导航，来配置我们的page页面，去到pages目录，我们需要创建3个[nuxt_link_name].vue页面文件，用来匹配路由导航需要加载的页面；好，我们进入命令行，来创建页面文件，1、windows系统下可以使用如下命令：for/r%vin(index.vue,jokes.vue,about.vue)dotypenull>%v2、linux/mac系统下可以使用如下命令：touchind... 继续阅读 >

2020
11-06

Nuxt pages下不同的页面对应layout下的页面布局操作

有时候我们pages中不同的页面需要不同的个性化布局这时候layout就起作用了layouts根目录下的所有文件都属于个性化布局文件，可以在页面组件中利用layout属性来引用。pages文件下组件的layout属性值为layout文件下的所对应的布局组件的名称请确保在布局文件里面增加<nuxt/>组件用于显示页面非布局内容。举个例子1.layouts/custom_layout.vue:<template><div><divclass="title">这里是自定义也页面的头部(布局)</div>... 继续阅读 >

2020
11-06

nuxt引入组件和公共样式的操作

1，引入组件在components目录创建组件，在页面中引入组件例如引入公共导航栏创建组件components/Nav.vue引入组件layouts/default.vue2，引入公共样式assets/css/common.css在nuxt.config.js中引入若引入less或者sass：补充知识：在nuxt项目中使用component组件编写组件页面1.在components下新建一个新建组件页面，如下所示2.新建完成之后初始页面的代码如下所示：3.下面从element-ui上找一个顶部导航菜单写到组件页面。<el-menu:d... 继续阅读 >

2020
11-06

nuxt 实现在其它js文件中使用store的方式

前言在新建的js文件中想用store里面的数据，比如token想在封装的axios里面，请求头里面去使用，亦或者通过app的JS接口获取token并存储在store里面。我们都知道如何在vue中如何使用。代码/**@Description:*@Author:lxc*@Date:2019-07-0216:14:07*@LastEditTime:2019-08-1416:08:19*@LastEditors:lxc*///导出store的地方importVuefrom'vue'importVuexfrom'vuex'importstatefrom'./state'importaction... 继续阅读 >