head: { title: 'nuxt', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0' }, { hid: 'description', name: 'description', content: 'Nuxt.js project' } ], link: [ { rel: '

gen1.首先进入nuxt的官网跟着步骤实现内容. https://zh.nuxtjs.org/guide/plugins 2.在我们的项目目录中找plugin 根据图片中的表示引入内容: import Vue from 'vue'import ElementUI from 'element-ui'Vue.use(ElementUI)3.然后找nuxt.config.js 文件夹 根据上图中的红线引入element-ui 以上和官网的上的差不多,但是如果你用的是element-ui的2.0.11

第一次移动端开发,UI方面选择了使用vant框架,但是vant官网写的使用,在nuxt项目中照搬官方的实例,各种报错,所以还得靠自己(使用方法在最后) 官方实例: 方法一:直接复制粘贴的时候,报错Notify未定义 方法二:直接复制粘贴,报错显示资源未找到 最后的解决方案 <template> <div> <van-button type="primary" class="mt-10" @click="toNotify&quo

介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. 引入步骤 1.进入Font Awesome官方网址,下载字体库,官方网址:http://fontawesome.dashgame.com/ 2.下载完成之后,对压缩包进行解压,放置项目中的assets文件夹下 3.在nuxt.config.js中添加配置 { src: '~assets/font-a

介绍 对于一个前端小白来说,使用一套已有的框架作为基础,可以达到事半功倍的效果,在这里我们选择Element.Element,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库(官方文档中的叙述),下面我们将开始在之前搭建好的nuxt项目中引入element-ui. 准备 1.首先用webstorm工具打开之前建好的nuxt项目,按住Alt+F12快捷键,打开Terminal终端,输入npm run dev启动项目,记住必须在当前项目的路径下. 2.打开Element的中文

背景 在本地开发vue项目的时候,当你习惯了proxyTable解决本地跨域的问题,切换到nuxt的时候,你会发现,添加了proxyTable设置并没有什么作用,那是因为你是用的vue脚手架生成的vue项目,它里面已经帮你写好了相关的proxyTable的设置代码. build/dev-server.js // proxy api requests Object.keys(proxyTable).forEach(function (context) { var options = proxyTa

npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div> <div v-if="hasNoData()"> <p >{{ emptyText }}</p> </div> <div :id="id" v

采用异步的方式进行存储数据,更高效快速,使用localforage是你最好的选择 具体转载自博客 Heap Stack Blog(pingbook.top) Nuxt storage data in nuxt project,how

首先就是引入swiper import Swiper from 'react-id-swiper': 一个轮播图首先要考虑到一种情况就是当只有一张图的时候是不是需要按轮播图来处理 一般情况下,一张图是不需要按轮播图来处理的,只需要放一张图片即可. 对传入的图片地址.是否自动播放.高度进行类型规定其中url是数据中所带的点击图片要跳转的地址featureImage为图片的url地址   static propTypes = {     data: PropTypes.arrayOf(       

在plugins/iview.js中修改 初始代码如下 import Vue from 'vue' import iView from 'iview' import locale from 'iview/dist/locale/en-US' // Change locale, check node_modules/iview/dist/locale Vue.use(iView, { locale }) 修改成如下代码 import Vue from 'vue' import './iview-u

一.安装 npm install @nuxtjs/axios    @nuxtjs/proxy  -S 二.nuxt.config.js进行配置 modules:[ '@nuxtjs/axios' '@nuxtjs/proxy' ], axios:{ //是否可以跨域 proxy:true }, proxy:{ '/api':{ target:'需要代理的接口路径', pathRewrite:{ '^/api':'', } } }

asyncData作用于页面pages,在组件中不能使用,并且asyncData中没有this,如果想要给data中的数据赋值,要在asyncData函数中return出去 fetch 作用于组件中components,并且可以使用this

官方 github 网址:https://github.com/koajs/session 自己做的demo:https://github.com/cag2050/nuxt_session_demo session 是一个对象,可以添加属性值.

在使用vue或者nuxt中,我们需要使用axios去发送多个http请求,参考了axios的官方说明你也许会想到使用axios.all发送请求,但是这样可能会出现一些异常错误: (node:9360) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: __WEBPACK_IMPORTED_MODULE_2__plugins_axios__.a.all is not

一.基本需求:使用nuxt框架,需要在移动端网页中播放视频.  二.文中解决的基本问题:      1.vue-video-player在nuxt中怎么使用.      2.由于为了适配移动端,使用了postcss-px2rem插件,如何解决vue-video-player的样式与postcss-px2rem插件的冲突.      3.如何播放m3u8的视频.  三.解决方案:      1.vue-video-player在nuxt中的使用:        1) npm i vue-video

Nuxt是解决SEO的比较常用的解决方案,随着Nuxt也有很多坑,每当突破一个小技术点的时候,都有很大的成就感,在这段时间里着实让我痛并快乐着.在这里根据个人学习情况,所踩过的坑做了一个汇总和总结. Nuxt开发跨域 项目可以使用Nginx来反向代理,将外来的请求(这里也注意下将Linux的防火墙放行相应端口)转发的内部Nuxt默认的3000端口上,最简单的配置文件如下: nuxtjs.config.js { modules: [ '@nuxtjs/axios', '@nuxtjs/proxy'

服务端预渲染之Nuxt - 使用 现在大多数开发都是基于Vue或者React开发的,能够达到快速开发的效果,也有一些不足的地方,Nuxt能够在服务端做出渲染,然后让搜索引擎在爬取数据的时候能够读到当前页面. 首先要说明一点,我们可以认为我们所编写的Vue项目是一个服务端的项目,虽然编写的还是Vue项目,但是Nuxt是基于服务器环境的. 就简单的说一下Nuxt使用.基础只是还是以官方文档为主,如果博客中哪里有问题,欢迎留言指正. 说了这么多,进入正题. 路由 与传统的Vue项目不同的是,我们在使用

上期回顾 说接上文<二九║ Nuxt实战:异步实现数据双端渲染>,昨天咱们通过项目二的首页数据处理,简单了解到了 nuxt 异步数据获取的作用,以及亲身体验了几个重要文件夹的意义,整篇文章也一直在往如何实现服务端渲染的方向讲解,因为我个人感觉这个是一个重点,如果是只会如何使用的话,大家就可以走马观花的看看就行了,昨天呢,遗留了几个问题,我也想了想,还没有想好如何通过浅显的话来概括,如果要是搬出来教科书似的讲解,感觉又不是很清晰,我就在以后的领悟中补充吧,这里就先说下其中的三个问题: 1.我们通

SSR: 服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端. 一.那为什么要使用SSR呢? 我用一句话理解的就是降低SPA(Single Page Application)首屏渲染的时间,解决SPA不利于SEO(Search Engine Optimization)的优化. 那Nuxt是什么呢?跟SSR有什么关系呢? Nuxt.js 是一个基于 Vue.js 的通用应用框架. 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的

一.创建项目 1.使用如下命令生成项目 vue init nuxt-community/starter-template testPro --testPro为项目名称 2.进入到项目根目录下,使用npm install 安装依赖 3.npm run dev 在开发环境下运行项目 二.修改项目的host 和 port 在package.json文件中新增如下代码: "config": { "nuxt": { "host": "0.0.0.

nuxt.js 追求完美,相信大家都是这样的.因为前后端分离的弊端性,在项目构建时,浏览器并不会捕捉到项目的内容,所以开始,笔者决定引入nuxt.js文件来配合vue完成Server Slider Render博客系统开发.服务端渲染以下简称SSR,不知道nuxt的童鞋可以去nuxt官网了解一哈. 声明:一下代码案例结合vue理解. 第三方插件的使用? 刚入坑,感觉寸步难行.想运来的使用方式,编辑器并不会报错.但是浏览器却报的nuxt错误. 后来经过几十根头发的代价换来了插件的正确使用方式 de