随笔分类 - Nuxt2
摘要：区分普通页面/keep-alive缓存页面 1、普通页面 mounted: { this.setAddListener() }, destroyed() { window.removeEventListener('popstate', this.setBack, false) }, methods:
阅读全文
摘要：1、assets文件夹下新建 fonts 文件 2、assets 文件夹下新建 style文件夹，并在style下新建 fonts.scss 3、nuxt.config.js下引入 fonts.scss文件 4、页面内使用 p { font-family: Din; } 5、font变量使用方式如下
阅读全文
摘要：1、安装 npm i vue-video-player 或者 npm i vue-video-player@5.0.2（非vue3） 2、在plugins下新建 vue-video-player.js plugins->vue-video-player.js import Vue from 'vue
阅读全文
摘要：1、nuxt.config.js 文件内 注释 minimize: true ，上线前打开
阅读全文
摘要：一、安装 npm i -D @vueuse/nuxt @vueuse/core VueUse中文文档：https://www.vueusejs.com/guide/ 二、nuxt.config.js 配置 buildModules: [ ......, '@vueuse/nuxt', ], buil
阅读全文
摘要：1、fetch方法 用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。 类型：Function 如果页面组件设置了 fetch 方法，它会在组件每次加载前被调用（在服务端或切换至目标路由之前）。 2、作用 监听 query 变更、导
阅读全文
摘要：Nuxt执行顺序： 1、配置 nuxt.config.js （plugins） 2、中间件 middleware 3、匹配布局 layout（layout-created） 4、匹配页面 pages（page-created、mounted） 5、匹配布局 layout （layout-mounte
阅读全文
摘要：一、下载相应图标（以Symbol为例，其他两种差不多） 二、copy相关文件 三、Iconfont配置 1、将copy的文件放入 assets /fonts 文件夹下 2、nuxt.config.js下配置IconFont 四、使用 <svg class="icon" aria-hidden="tr
阅读全文
摘要：注：以下以按需引入为例 网址： swiper： https://www.swiper.com.cn/api/parameters/17.html vue-awesome-swiper： https://github.com/surmon-china/vue-awesome-swiper/tree/v
阅读全文
摘要：1、ui组件按需引入 （详见nuxt->vant按需引入） 2、请求分开服务端渲染及客户端渲染，并尽可能的减少请求 服务端渲染：需要 SEO 处理的，在 asyncData 内请求接口 客户端：不需要SEO处理的，在 mounted 内请求接口 3、no-ssr排除在服务端渲染的节点 页面内某部分不
阅读全文
摘要：1、下载按需引入插件 npm i vant -S npm i babel-plugin-import -D 2、配置 >>>plugins->vant.js import Vue from 'vue' import { Button, } from 'vant' Vue.use(Button) >>
阅读全文
摘要：1、安装 cnpm i babel-core babel-preset-es2015 babel-cli 2、根目录下新建 .babelrc 文件 { "presets":["es2015"] } 3、修改 package.json dev & build : 在后面添加 --exec babel-
阅读全文
摘要：1、安装 npm i lib-flexible -S npm install postcss-px2rem save 2、配置 >>>plugins->lib-flexible.js import 'lib-flexible' >>>nuxt.config.js plugins -> plugins
阅读全文
摘要：1、安装 postcss-px-to-viewport 2、配置 >>>nuxt.config.js build: { vendor: ['vant'], postcss: { plugins: { // "postcss-px-to-viewport": { // unitToConvert: "
阅读全文
摘要：1、安装 npm install --save-dev node-sass sass-loader@10 @nuxtjs/style-resources // 注：sass尽量指定版本，最新版本不兼容易出错 2、配置 >>>nuxt.config.js css: [ '~assets/style/m
阅读全文
摘要：添加文件大小分析代码 nuxt.config.js build: { ...... analyze: true, assetFilter: function (assetFilename) { return assetFilename.endsWith('.js'); } }
阅读全文
摘要：挂载组件 1、创建vue文件（以loading加载为例） <!-- * @description loading 加载 * @use <Loading :show='' :content=''/> 或 this.$loading(params) * @params 不传时默认 true * @par
阅读全文
摘要：1、Vue.use形式 1）、创建文件 plugins -> vant.js import Vue from 'vue' import Vant from 'vant' Vue.use(Vant) 2）、nuxt.config.js 内引入插件 2、Vue.prototype 形式 1）、创建文件
阅读全文
摘要：1、使用cookie的原因 nuxt是服务端渲染，不能获取到window、 localStorage等对象，故使用cookie进行存取数据 2、安装 npm i --save cookie-universal-nuxt 3、配置 nuxt.config.js modules: [ //有参数配置的
阅读全文
摘要：使用 asyncData 的理由： 使用 asyncData，会在服务端渲染数据，搜索引擎可以直接获取文本内容，有利于SEO 1、编写 xx.vue-> asyncData asyncData(context) { return context.$api.home.getMock().then(re
阅读全文
浙公网安备 33010602011771号