nuxt.js框架使用vue-waterfall-easy插件如何引入--语法引用

实话：我之前完全不知道vue-waterfall-easy这个插件，当我看到需求瀑布流+无限滚动的时候，我脑子里想的还是flex布局。。。
我们大佬说“你自己写的瀑布流+无限滚动肯定会出问题的”，然后我就果断放弃了（毕竟我是一个还没有入门的菜鸡），大佬给我普及了这个插件以及在vue中如何使用，让我自己找一找在nuxt里面的引入方法（这个任务，我也很果断，20分钟没有头绪，直接回头找大佬，哈哈哈哈哈哈）
所以在这里再总结一下引入的方法（使用方法我也是一知半解，探索中，所以不敢胡乱BB）。
这次在nuxt的引入，一开始也是使用了npm install，按照了官网的格式去引入了一下（其实就是觉得引入配置应该不会有那么多特殊的吧）然后，我真的服了！
常规方法失效，回头找大佬。
大佬跟我说：
在components文件夹下创建 vue-waterfall-easy.vue文件将vue-waterfall-easy的代码复制-粘贴（我放到这了，如果真的有人看，我也是为了自己以后有用的时候可以不用再去找，哈哈哈哈哈）

<!-- —————————————↓SCSS———————分界线————————————————————————— -->
<style lang="scss" scoped>
.vue-waterfall-easy-container {width: 100%;height: 100%;position: relative;.vue-waterfall-easy-scroll {position: relative;width: 100%;height: 100%;overflow-x: hidden;overflow-y: scroll;-webkit-overflow-scrolling: touch;}.vue-waterfall-easy {position: absolute;width: 100%; // 移动端生效@keyframes show-card {0% {transform: scale(0.5);}100% {transform: scale(1);}}& > .img-box {position: absolute;box-sizing: border-box;width: 50%; // 移动端生效}& > .img-box.default-card-animation {animation: show-card 0.4s;transition: left 0.6s, top 0.6s;transition-delay: 0.1s;}a {display: block;}a.img-inner-box {box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);border-radius: 4px;}.__err__ .img-wraper {background-image: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAeAAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk1M0JCM0QwNkVFNDExRThCNTJCQUQ2RDFGQzg0NzIxIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk1M0JCM0NGNkVFNDExRThCNTJCQUQ2RDFGQzg0NzIxIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTYwRUMyMDE2RUUzMTFFOEJCRTU5RTFDODg1ODgwMjYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTYwRUMyMDI2RUUzMTFFOEJCRTU5RTFDODg1ODgwMjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAQCwsLDAsQDAwQFw8NDxcbFBAQFBsfFxcXFxcfHhcaGhoaFx4eIyUnJSMeLy8zMy8vQEBAQEBAQEBAQEBAQEBAAREPDxETERUSEhUUERQRFBoUFhYUGiYaGhwaGiYwIx4eHh4jMCsuJycnLis1NTAwNTVAQD9AQEBAQEBAQEBAQED/wAARCACRAJEDASIAAhEBAxEB/8QAZQAAAwEBAQAAAAAAAAAAAAAAAAIDAQQHAQEAAAAAAAAAAAAAAAAAAAAAEAACAQMDBAEFAAMBAAAAAAAAAQIRMQMhQRJRYYEycZHBIkITsdFSYhEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A9AAAAAMFnNQWt9kAwkssVbV9CTnKb10XQVtLSyAd5ZuzURW27yfhmX9RlDI+wD4Vf/ZVi41SKCdeNI3YEnOXJtOiBZZr/wBGcMi2Ft7AXjli76PoOcqael0Mpyg9NV0A6QEhNTWl90MBoAAAAAAGGiTlxjXfZAZkycdEqyI3q26sOrd92CTm6bbsA1boh1i3lqPGKiqIZAYklYHY0x6tIDY2B3NdjEBgNJ3NACTxbx0E1TozoYsoqSowI2o06MtjyctGqSItODptsw6NX2YHSaJCXKNd90OAAAAYznnLnJvZWK5pUjRXloiNdwCjk0l9S0YqKohcSpGrvLUcDUBLK23x23FWNtVSAuHch/KXQP5PoBdqq77GJ1XfczFVKjVBcuPk6rXqBQCH8n0D+UugFwZD+bV1oNif5OOzQDyipKjI0cW0/qXYmVVjVXjqAkZcHXZ3OhHNXcthlWNHeOjAoAABDLKs6bISlWl1Busm+42Jfm30At2BmI1gRy+3gpD1XwTy+3gpH1QDASyt8uKdFuJRw1iwOjdBKy+TIutGbK3kAAxtJNuwiywdmA7s/glj9/BV04unQli9l8AWDsBjAhSja6D4pUnTZmZV+afUVOkk+4HUBgAc0bD4v2+fsJGw+L9vn7AVQMEDAjl9vBSHqvgnl9vBSHqvgDJwbfJC8JPSlEO5wTo3qMnUDEqNGz0jXoD08BRSXyBB/m6u2xvFPQ1qjoDAVNxqv1ZuJUnT5BGw9/AFQYAwJZf1+fsJKw+X9fn7CSsB0AAAc7VG13GxP82uoZFSbezFWkkwOgGCBgRy15adDZTaioq7QZPfwZQDFFfPc2MnB0vE1AwCc+WituPjaS4kzU6agPkS9hEVeqJJU0AAh7+ACHv4AqAAwI5X+aXQVKrS7g3WTY2ONZp7IC9AAAJ5lWNf+dSV1XqdL1VGc8lxk47bAUxyqqO60GIpuL5LyuxZNNVVtmAmVfkpbbi1RYAI1QVRYAI1QJ1aRYzdAbJ8Y1I1RZggI1SNxL8uW1NCoAYxckqKiu9Bm0lV23ZFtyfJ+F2Ayyr0K4VSNf8ArUnFcpKO250LRUQABoAYLkhzXdWHMA5u26uNGXF9tx8uOusfYlbTcC6aaqrdTTnTlHVfQrHJF6PRsBwAAC5i9vg0xbgaAIAAxtJVduosskVotWiTcpav6ANKXJ9the27sF9NyuLHTWXsA2OHBd3cYDQAAAAAAAwSeNS1syhgHNRxdJfUK10ujoaTuJLCrp0Amm1Ztdhv6z3Sfkxwmu4leqoBT+1P1f8AkZy4469daEaopllRqPRAH9ZOyp5Fbbu2+xmuyGUJvsAtaaWQUcnSP1Kxwq7dR0krALDGo63Y4GgAAAAAAAAAAAAAAAAAshJ7AAGK6B3YABsNx4gADAAAAAAAAAAAAAf/2Q==);background-repeat: no-repeat;background-position: center;background-size: 50% 50%;img {display: none;}}a.img-wraper {& > img {width: 100%;display: block;border: none;}}.over {position: absolute;width: 100%;text-align: center;font-size: 12px;line-height: 1.6;color: #aaa;}}& > .loading.first {bottom: 50%;transform: translate(-50%, 50%);}& > .loading {position: absolute;left: 50%;transform: translateX(-50%);bottom: 6px;z-index: 999;@keyframes ball-beat {50% {opacity: 0.2;transform: scale(0.75);}100% {opacity: 1;transform: scale(1);}}&.ball-beat > .dot {vertical-align: bottom;background-color: #4b15ab;width: 12px;height: 12px;border-radius: 50%;margin: 3px;animation-fill-mode: both;display: inline-block;animation: ball-beat 0.7s 0s infinite linear;}&.ball-beat > .dot:nth-child(2n-1) {animation-delay: 0.35s;}}
}
</style><!-- —————————————↓HTML————————分界线———————————————————————— -->
<template lang="pug">
.vue-waterfall-easy-container(:style="{width: width&&!isMobile ? width+'px' : '', height: parseFloat(height)==height ? height+'px': height }").loading.ball-beat(v-show="isPreloading_c", :class="{first:isFirstLoad}")slot(name="loading", :isFirstLoad="isFirstLoad").dot(v-if="!hasLoadingSlot", v-for="n in loadingDotCount",:style="loadingDotStyle")//- 为了防止loading 跟随滚动.vue-waterfall-easy-scroll(ref="scrollEl")slot(name="waterfall-head").vue-waterfall-easy(:style="isMobile? '' :{width: colWidth*cols+'px',left:'50%', marginLeft: -1*colWidth*cols/2 +'px'}").img-box(v-for="(v,i) in imgsArr_c",:class="[cardAnimationClass, {__err__: v._error}]":style="{padding: (isMobile ? mobileGap : gap)/2+'px', width: isMobile ? '' : colWidth+'px'}")component.img-inner-box(:is="isRouterLink  && linkRange=='card' ? 'router-link' : 'alink'",:data-index="i",:to="linkRange=='card' ? v[hrefKey] : false")component.img-wraper(v-if="v[srcKey]",:is="isRouterLink && linkRange=='img' ? 'router-link' :'alink'",:to="linkRange=='img' ? v[hrefKey] : false ",:style="{width:imgWidth_c + 'px',height:v._height ? v._height+'px':false}")img(:src="v[srcKey]")slot(:index="i",:value="v").over(v-if="over",ref="over")slot(name="waterfall-over") 被你看光了
</template><!-- ——————————————↓JS—————————分界线———————————————————————— -->
<script>
import alink from './components/alink.vue'
export default {name: 'vue-waterfall-easy',components: {alink},props: {width: { // 容器宽度type: Number},height: { // 容器高度type: [Number, String]},reachBottomDistance: { // 滚动触底距离，触发加载新图片type: Number, // selectordefault: 20  // 默认在最低那一列到底时触发},loadingDotCount: { // loading 点数type: Number,default: 3},loadingDotStyle: {type: Object,},gap: { // .img-box 间距type: Number,default: 20},mobileGap: {type: Number,default: 8},maxCols: {type: Number,default: 5},imgsArr: {type: Array,required: true,},srcKey: {type: String,default: 'src'},hrefKey: {type: String,default: 'href'},imgWidth: {type: Number,default: 240},isRouterLink: {type: Boolean,default: false},linkRange: { // card | img | custom 自定义通过slot自定义链接范围type: String,default: 'card'},loadingTimeOut: { // 预加载事件小于500毫秒就不显示加载动画，增加用户体验type: Number,default: 500},cardAnimationClass: {type: [String],default: 'default-card-animation'},enablePullDownEvent: {type: Boolean,default: false}},data() {return {msg: 'this is from vue-waterfall-easy.vue',isMobile: !!navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i), // 初始化移动端isPreloading: true, // 正在预加载中，显示加载动画isPreloading_c: true,imgsArr_c: [], // 待图片预加载imgsArr完成，插入新的字段height之后,才会生成imgsArr_c，这时才开始渲染loadedCount: 0,cols: NaN, // 需要根据窗口宽度初始化imgBoxEls: null, // 所有的.img-box元素beginIndex: 0, // 开始要排列的图片索引,首次为第二列的第一张图片，后续加载则为已经排列图片的下一个索引colsHeightArr: [],// 自定义loadingLoadingTimer: null,isFirstLoad: true, // 首次加载over: false, // 结束waterfall加载}},computed: {colWidth() { // 每一列的宽度return this.imgWidth + this.gap},imgWidth_c() { // 对于移动端重新计算图片宽度`return this.isMobile ? window.innerWidth / 2 - this.mobileGap : this.imgWidth},hasLoadingSlot() {return !!this.$scopedSlots.loading}},mounted() {this.bindClickEvent()this.loadingMiddle()this.preload()this.cols = this.calcuCols()this.$on('preloaded', () => {this.isFirstLoad = falsethis.imgsArr_c = this.imgsArr.concat([]) // 预加载完成，这时才开始渲染this.$nextTick(() => {this.isPreloading = falsethis.imgBoxEls = this.$el.getElementsByClassName('img-box')// console.log('图片总数', this.imgBoxEls.length)this.waterfall()})})if (!this.isMobile && !this.width) window.addEventListener('resize', this.response)if (this.isMobile && this.enablePullDownEvent) this.pullDown()this.scroll()},beforeDestroy() {window.removeEventListener('resize', this.response)},watch: {isPreloading(newV, oldV) {if (newV) {setTimeout(() => {if (!this.isPreloading) return // 500毫秒内预加载完图片则不显示加载动画this.isPreloading_c = true}, this.loadingTimeOut)} else {this.isPreloading_c = false}},imgsArr(newV, oldV) {if (this.imgsArr_c.length > newV.length || (this.imgsArr_c.length > 0 && newV[0] && !newV[0]._height)) {// console.log('reset')this.reset()}this.preload()},},methods: {// ==1== 预加载preload(src, imgIndex) {this.imgsArr.forEach((imgItem, imgIndex) => {if (imgIndex < this.loadedCount) return // 只对新加载图片进行预加载// 无图时if (!imgItem[this.srcKey]) {this.imgsArr[imgIndex]._height = '0'this.loadedCount++// 支持无图模式if (this.loadedCount == this.imgsArr.length) {this.$emit('preloaded')}return}var oImg = new Image()oImg.src = imgItem[this.srcKey]oImg.onload = oImg.onerror = (e) => {this.loadedCount++// 预加载图片，计算图片容器的高this.imgsArr[imgIndex]._height = e.type == 'load' ? Math.round(this.imgWidth_c / (oImg.width / oImg.height)) : (this.isMobile ? this.imgWidth_c : this.imgWidth)if (e.type == 'error') {this.imgsArr[imgIndex]._error = truethis.$emit('imgError', this.imgsArr[imgIndex])}if (this.loadedCount == this.imgsArr.length) {this.$emit('preloaded')}}})},// ==2== 计算colscalcuCols() { // 列数初始化var waterfallWidth = this.width ? this.width : window.innerWidthvar cols = parseInt(waterfallWidth / this.colWidth)cols = cols === 0 ? 1 : colsreturn this.isMobile? 2: (cols > this.maxCols ? this.maxCols : cols)},// ==3== waterfall布局waterfall() {if (!this.imgBoxEls) return// console.log('waterfall')var top, left, height, colWidth = this.isMobile ? this.imgBoxEls[0].offsetWidth : this.colWidthif (this.beginIndex == 0) this.colsHeightArr = []for (var i = this.beginIndex; i < this.imgsArr.length; i++) {if (!this.imgBoxEls[i]) returnheight = this.imgBoxEls[i].offsetHeightif (i < this.cols) {this.colsHeightArr.push(height)top = 0left = i * colWidth} else {var minHeight = Math.min.apply(null, this.colsHeightArr) // 最低高低var minIndex = this.colsHeightArr.indexOf(minHeight) // 最低高度的索引top = minHeightleft = minIndex * colWidth// 设置元素定位的位置// 更新colsHeightArrthis.colsHeightArr[minIndex] = minHeight + height}this.imgBoxEls[i].style.left = left + 'px'this.imgBoxEls[i].style.top = top + 'px'}this.beginIndex = this.imgsArr.length // 排列完之后，新增图片从这个索引开始预加载图片和排列},// ==4== resize 响应式response() {var old = this.colsthis.cols = this.calcuCols()if (old === this.cols) return // 列数不变直接退出this.beginIndex = 0 // 开始排列的元素索引this.waterfall()if (this.over) this.setOverTipPos()},// ==5== 滚动触底事件scrollFn() {var scrollEl = this.$refs.scrollElif (this.isPreloading) returnvar minHeight = Math.min.apply(null, this.colsHeightArr)if (scrollEl.scrollTop + scrollEl.offsetHeight > minHeight - this.reachBottomDistance) {this.isPreloading = true// console.log('scrollReachBottom')this.$emit('scrollReachBottom') // 滚动触底}},scroll() {this.$refs.scrollEl.addEventListener('scroll', this.scrollFn)},waterfallOver() {this.$refs.scrollEl.removeEventListener('scroll', this.scrollFn)this.isPreloading = falsethis.over = truethis.setOverTipPos()},setOverTipPos() {var maxHeight = Math.max.apply(null, this.colsHeightArr)this.$nextTick(() => {this.$refs.over.style.top = maxHeight + 'px'})},// ==6== 点击事件绑定bindClickEvent() {this.$el.querySelector(".vue-waterfall-easy").addEventListener('click', e => {var targetEl = e.target;if (e.target.className.indexOf('over') !== -1) returnif (targetEl.className.indexOf("img-box") != -1) returnwhile (targetEl.className.indexOf("img-inner-box") == -1) {targetEl = targetEl.parentNode;}var index = targetEl.getAttribute("data-index");this.$emit('click', e, {index,value: this.imgsArr_c[index],})})},// ==7== 下拉事件pullDown() {var scrollEl = this.$el.querySelector('.vue-waterfall-easy-scroll')var startYscrollEl.addEventListener('touchmove', (e) => {if (scrollEl.scrollTop === 0) {var t = e.changedTouches[0]if (!startY) startY = t.pageYvar pullDownDistance = t.pageY - startYif (pullDownDistance > 0) {e.preventDefault()}this.$emit('pullDownMove', pullDownDistance)}})scrollEl.addEventListener('touchend', (e) => {if (scrollEl.scrollTop === 0) {startY = NaNthis.$emit('pullDownEnd')}})},// otherloadingMiddle() {// 对滚动条宽度造成的不居中进行校正var scrollEl = this.$el.querySelector('.vue-waterfall-easy-scroll')var scrollbarWidth = scrollEl.offsetWidth - scrollEl.clientWidththis.$el.querySelector('.loading').style.marginLeft = -scrollbarWidth / 2 + 'px'},reset() {this.imgsArr_c = []this.beginIndex = 0this.loadedCount = 0this.isFirstLoad = truethis.isPreloading = truethis.scroll()this.over = false}}
}
</script>

如果有兴趣也可以去GitHub看下源文档的说明，代码也是从那里复制回来的。

在plugins文件夹下创建vue-waterfall-easy.js文件并进行配置：

import Vue from 'vue'
import VueWaterfallEasy from 'vue-waterfall-easy'Vue.use(VueWaterfallEasy)
export default {name: 'vue-waterfall-easy'
}

同样的，在plugins文件夹下创建alink.vue文件并进行配置：

<!-- —————————————↓SCSS———————分界线————————————————————————— -->
<style lang="scss">.alink {}</style><!-- —————————————↓HTML————————分界线———————————————————————— -->
<template><a class="alink" :href="to" target="_blank"><slot></slot></a>
</template><!-- ——————————————↓JS—————————分界线———————————————————————— -->
<script>//import XXX from './components/XXX'export default {name: 'alink',props: ['to'],data() {return {msg: 'this is from alink.vue'}},methods: {}}
</script>

注：在这次的引入中并没有配置nuxt.config.js文件，而是直接把vue-waterfall-easy.vue作为一个组件使用的，所以其实并没有使用到npm install的安装，至于大佬为什么这样操作，你问我我也不知道。同理alink.vue在这里的作用。。。。哈哈哈哈，我只想着怎么顺利使用vue-waterfall-easy了，如果有大佬可以解惑，感激不尽！！！

既然作为一个组件使用的话，必然需要在使用的页面中引入：

import vueWaterfallEasy from "~/components/vue-waterfall-easy.vue";

顺带注册一下：

components:{vueWaterfallEasy
}

至此vue-waterfall-easy引入结束，顺便贴上我试验的代码吧（URL是肯定给不起的）：

<template><div style="height:800px"><vue-waterfall-easy:imgsArr="sourceMaterialList"srcKey="image"@scrollReachBottom="getData"></vue-waterfall-easy></div>
</template>
<script>
import vueWaterfallEasy from "~/components/vue-waterfall-easy.vue";
import axios from "axios";
export default {components: {vueWaterfallEasy},data() {return {sourceMaterialList: [],total: 1};},methods: {getData() {axios.get("URL").then(res => {console.log(res);this.sourceMaterialList = this.sourceMaterialList.concat(res.data.rows);console.log(this.sourceMaterialList);this.total = res.total;});}},created() {this.getData();}
};
</script>
<style>
#canvas {background-color: gray;
}
</style>

自我总结。

nuxt.js框架使用vue-waterfall-easy插件如何引入--语法引用相关推荐

NUXT.JS框架打版后生成静态页面CSS太长解决方法
在开发我们公司的恒相产品画册项目时,使用VUE框架开发SEO就无法优化了,最后采用UNXT.JS框架开发此项目.项目第一阶段开发完毕后,打版上线也没有注意CSS的问题,在使用站长工具查询时,抓取页面数 ...
使用Nuxt.js框架开发(SSR)服务端渲染项目
(SSR)服务端渲染的优缺点优点: 1.前端耗时少,首屏加载速度快.因为后端拼接完了html,浏览器只需要直接渲染出来. 2.有利于SEO.因为在后端有完整的html页面,所以爬虫更容易爬取获得信息 ...
Nuxt.js框架启动报错✖ 224 problems (146 errors, 78 warnings) 146 errors and 74 warnings potentially fixab
项目运行报错执行npm run lint --fix报错 ✖ 224 problems (146 errors, 78 warnings) 146 errors and 74 warnings ...
使用Nuxt.js搭建VUE应用的SSR（服务端渲染）
Nuxt.js的介绍 Nuxt.js概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染) Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用V ...
老弟，来了？VUE+Nuxt.js+Koa+Vuex入门教程（一）仿写一个cnode网站
if(有工作){if(工作地址 == "深圳" || 工作地址 == "广州" ){do(请联系作者,qq:1172081598)} } 何为Nuxt.js N ...
Vue.js框架简介（1）
1.Vue.js框架简介 Vue(读音 /vju:/,发音类似于 view)是一套用于构建用户界面的渐进式的JavaScript框架. 1.1.为什么要学习Vue.js 什么是Vue.js Vue.j ...
开始使用Nuxt.js
Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(Server Side Render服务端渲染).再直白点说,就是Vue.js原来是开发SPA(Single Page App ...
nuxt.js的核心代码_Nuxt.js中的通用应用程序代码结构
nuxt.js的核心代码 by Krutie Patel 通过克鲁蒂·帕特尔(Krutie Patel) Nuxt.js中的通用应用程序代码结构 (Universal application code ...
SEO、SSR、Nuxt.js
目录 SEO SSR Nuxt 介绍 Nuxt环境搭建使用 Nuxt的默认模版和默认布局 Nuxt的错误页面和个性meta设置 asyncData方法获取数据静态资源和打包插件自定义axios ...
Nuxt.js 服务端渲染从安装到部署
Nuxt.js 服务端渲染方案了解 Nuxt.js 的作用掌握 Nuxt.js 中的路由掌握 layouts.pages 以及 components 的区别能够在 Nuxt.js 项目中使用第 ...

nuxt.js框架使用vue-waterfall-easy插件如何引入--语法引用

nuxt.js框架使用vue-waterfall-easy插件如何引入--语法引用相关推荐

最新文章

热门文章