QRCode.js 是一个用于生成二维码图片的插件, 官方文档 . 我是在nuxt.js(vue官方的服务端渲染方式)项目里使用的QRCode.js: 第一步:看官方文档: 第二步:下载QRCode.js:http://code.ciaoca.com/javascript/qrcode/version/qrcodejs.zip, 解压并将qrcode.min.js文件放到项目的static目录下(static目录下的文件不会被编译), 比如你的服务器地址:https://www.aaa.com,

全局导入,适用于所有组件 在nuxt.config.js文件引 css:["~样式path"], 如:css:["~assets/css/main.css"],或css:["./assets/css/main.css"],或css:["@assets/css/main.css"], 局部导入 <style lang="css">@import "path"</style

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

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

缘起 哈喽大家好,今天周四啦,楼主明天要正式放假了,这里先祝大家节日快乐咯,希望在家里能继续研究点儿东西吧,今天呢是 nuxt 的最后一篇,主要是对权限登录进行研究,这一块咱们之前在说第一个项目的时候已经稍微说到了,具体的逻辑大家可以查看这篇文章<二十四║ Vuex + JWT 实现授权验证登录>,具体的运行原理和流程,以及什么是 vuex ,在那里已经说的很清楚了,今天咱们就是主要在 nuxt 框架中使用,主要的代码的形式,理论知识比较少了,大家可以歇一歇了.这几天写了这么多,好多人可能都没

1.页面 <div id="qrCode" ref="qrCodeDiv"></div> 2.导入插件 import QRCode from 'qrcodejs2' 3.使用生成: 注意 定时器得要,避免dom未生成报错 document.getElementById("qrCode").innerHTML = ""; setTimeout(() => { new QRCode(this.$ref

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

第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态html. 1.那服务器端渲染到底有什么好处呢? 主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作,Nuxt.js适合作新闻.博客.电影.咨询这样的需要搜索引擎提供流量的项目.如果你要作移动端的项目,就没必要使用这个框

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 基础知识这里不再重述,学习的话请自行到官网学习 https://vuex.vuejs.org/zh/ 文档最后有具体使用的实例,不想看基础的就直接下调页面~ 这里主要简单讲一讲Nuxt里怎么使用vuex, Nuxt.js 内置引用了 vuex 模块,所以不需要额外安装. Nuxt.js 会尝试找到应用根目录下的 store 目录,如果该目录

事先准备 注册账号并申请Key 1. 首先,注册开发者账号,成为高德开放平台开发者 2. 登陆之后,在进入「应用管理」 页面「创建新应用」 3. 为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 一.安装 1.npm安装(推荐) 通过 npm install  --save vue-amap 来安装 2.CDN 目前可通过 unpkg.com/vue-amap 获取最新版本的资源. 通过script引入 <script src="https://unpkg.

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

Mark一下: 在 Nuxt.js应用中使用Google统计分析服务,或者百度统计分析服务,推荐在 plugins 目录下创建 plugins/ga.js 文件.统计统计分析我们可以获取网站pv,uv数据,来判断网站的页面那些更受用户欢迎,有利于网站后期的发展,这里主要讲解nuxt.js应用中的添加方式 添加百度统计 ga.js页面内容如下: export default ({ app: { router }, store }) => { /* 每次路由变更时进行pv统计 */ router.a

本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 开源js绘图库,打造一个属于自己的在线绘图软件,最终效果:topology.le5le.com .如果你觉得好,欢迎给文章和开源库点赞,让我们更有动力去做好! 本系列教程源码地址:Github 一.创建项目框架 1. 使用Nuxt.js向导创建项目 yarn create nuxt-app topology-vue // 注意在后面提示中,上移下移,按空格选中 Element 复制代码 选择Element后,在

脚手架工具 create-nuxt-app 创建项目: $ npx create-nuxt-app <项目名> 启动项目: To get started: cd nuxt_demo npm run dev To build & start for production: cd nuxt_demo npm run build npm start nuxt 命令介绍 命令列表 "scripts": { // 只查看不符合规范的代码 "lint": &

前言 Nuxt.js 是一个基于 Vue.js 的通用应用框架. ssr 渲染服务端 可以看官方文档 https://zh.nuxtjs.org/guide/ nuxt 与平常 jsonp 不一样 ,jsonp点击跳转是跳转到新的页面 而 Nuxt 而是打开路由,在一个页面里 这就是 取了中间件 好处 1.不仅用于服务端渲染也可用于spa 应用开发2.异步记载,中间件支持3.nuxt可用网站静态化 这是流程: 创建 npm creat-nuxt-app <项目名> 运行: npm run de

我已经放弃百度地图了,为什么呢? 原因一: 百度地图api太乱不容易查阅 原因二: 百度给出的案例太少,可参考项太少 第三点也是最重要的,百度地图花钱,百度地图花钱,百度地图花钱, 很荣幸,作为国内唯一免费开源大型好用的高德地图成为我的第二个采坑对象. 说说我为什么用nuxt:其实出于私心,我想调研一下nuxt的seo,踩踩nuxt的坑,熟悉一些框架工作流程,以便于后续项目开发: 还有一点是我想把地图抽离出来,来满足公司的各种业务. 好吧,进入正题: 首先,安装nuxt框架: npx creat

主要知识点: 1.使用vuex/store管理数据 2.登录注册逻辑 3.Nuxt的本地存储 1.登录页面 1.1登录页面布局 替换pages/user/login.vue的代码如下 <template> <div class="container"> <!-- 主要内容 --> <el-row type="flex" justify="center" align="middle" c

页面效果: 1.初始化默认布局 nuxtjs提供了一个公共布局组件layouts/default.vue,该布局组件默认作用于所有页面,所以我们可以在这里加上一些公共样式,在下一小结中还会导入公共组件. 替换layouts/default.vue代码如下: <template> <div> <!-- 内容占位组件 --> <nuxt /> </div> </template> <script> export default

零.前言 最近参与了一个立足 seo 的移动端项目,公司前端工程主栈 vue,所以理所当然的用上了 nuxt,UI 主要选择了 Vant.   一.公共列表页的缓存 公共列表页由于数据量较大,故需要滚动触发分次加载以模拟分页,当客户端加载到了一定页数之后(>= 2),点击某条数据进去查看详情,然后返回列表页,这时候如果没有缓存的话,列表页会按照初始参数(即从分页 1 开始)发请求拉数据,并且丢失浏览位置.一方面,浪费请求资源,另一方面,用户体验不佳.因此,针对这两个问题,最后决定开启缓存. vu

方式一 | 通过嵌套路由实现 在pages页面根据nuxt的路由规则,建立页面 1. 创建文件目录及文件 根据规则,如果要创建子路由,子路由的文件夹名字,必须和父路由名字相同 所以,我们的文件夹也为index,index文件夹需要一个默认的页面不然nuxt的路由规则就不能正确匹配页面 一级路由是根路由 二级路由是index,user,默认进入index路由 下面是router页面自动生成的路由 { path: "/", component: _93624e48, children: [

Nuxt.js(一.介绍与安装) 1.为什么使用Nuxt 渐进式Vue.js框架给前后端分离带来无限的乐趣,越来越多的程序员选择Vue.在我们使用Vue框架的过程中不免会出现以下的一些问题: 如何更好的组合使用javascript和vue组件,使其有效地协同工作: 有没有一种统一的最佳实践文件结构可以让我们更好的管理应用的代码: 怎么处理SPA应用的SEO问题: 怎么加快某些重要页面的首屏时间: 一些有经验的程序员当然可以自己处理大部分问题,但是Nuxt.js为我们提供了平滑开箱即用,体验的更高