02 2021 档案
摘要：一，首页页面功能 pages-->welcome页面组件 注意；顶部颜色在welcome.json中配置， 2.每个页面组件都有个影藏的page标签包裹在外头，需要给page也设置颜色 welcome.wxml <!--pages/welcome/welcome.wxml--> <view clas
阅读全文
摘要：1，ctrl+p，全局搜索 2.项目设置，增强编译（使用es7,async,await），使用npm模块，不校验合法域名(开发基于 3, /代表根路劲，<image src="/images/avatar/1.png" src="width:200px;heigth:200px"></image>
阅读全文
摘要：一，地点详情页 product.vue组件，点击h3标题，跳转到对应地点的详情detail路径 <template> <dl class="s-item"> <dt> <img :src="meta.img" alt="商品图片"> </dt> <dd> <h3><nuxt-link :to="{p
阅读全文
摘要：一,地点详情页功能开发 1.在searchbar.vue组件，点击热门景点，跳转到景点详情页，keyword中文需要编码下 <template> <div class="search-panel"> <el-row class="m-header-searchbar"> <el-col :span=
阅读全文
摘要：一，城市服务功能 components-->新建changeCity目录--》新建isselect.vue组件 <template> <div class="m-iselect"> <span class="name">按省份选择:</span> <el-select v-model="pvalue
阅读全文
摘要：转载：https://blog.csdn.net/weixin_43675447/article/details/99232258 一、Object.keys(obj) 参数：要返回其枚举自身属性的对象 返回值：一个表示给定对象的所有可枚举属性的字符串数组 处理对象，返回可枚举的属性数组 let p
阅读全文
摘要：一，通过SSR渲染，将城市服务的数据传给客户端，不是通过异步请求接口获取数据 store-->新建modules目录--》新建geo.js nuxt之vuex中使用nuxtServerInit方法 官网介绍nuxtServerInit方法 https://zh.nuxtjs.org/guide/vu
阅读全文
摘要：官网介绍nuxtServerInit方法 https://zh.nuxtjs.org/guide/vuex-store/#nuxtserverinit-%E6%96%B9%E6%B3%95 vuex中模块化使用示例 挂载vuex中state模块及nuxtServerInit方法， store-->i
阅读全文
摘要：一，注册和登录功能 pages-->新建register.vue 注册组件 注：md5加密，crypto-js加密库 <template> <div class="page-register"> <article class="header"> <header> <a href="/" class=
阅读全文
摘要：在nuxt引入element插件，报错， 翻译：[Vue warn]：客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由于不正确的HTML标记造成的，例如在<p>中嵌套块级元素，或者缺少<tbody> 上图中出现的这个问题是element-ui没有允许在服务端使用导致的。 在这elemen
阅读全文
摘要：转载：https://www.cnblogs.com/jofun/p/13234973.html Nuxt 使用 create-nuxt-app 创建项目时，选择使用 Element-UI 为默认组件库，发现 Nuxt 没有开启 Element-UI 的按需引入配置，需要自行配置。 安装依赖 在 c
阅读全文
摘要：在项目开发过程中，遇到vuex报错 Classic mode for store/ is deprecated and will be removed in Nuxt 3. 在nuxt官网查了一下发现是不建议使用这种语法 在 nuxtjs 升级到2.4之后，采用旧的 store 配置方式，配置 vu
阅读全文
摘要：原文链接：https://www.jianshu.com/p/b0626ba924c9 为什么使用nuxt.js? vue单页面应用渲染是从服务器获取所需js，在客户端将其解析生成html挂载于 id为app的DOM元素上，这样会存在两大问题。 由于资源请求量大，造成网站首屏加载缓慢，不利于用户体验
阅读全文
摘要：在项目根目录下的prettier.config.js文件中写入即可 module.exports = { semi: false, singleQuote: true, endOfline: 'auto', } 每次出现eslint错误，都要在这个文件重写下就可以了，心累 或者yarn run li
阅读全文
摘要：nuxt项目的文件夹目录 1.nuxt-link组件和router-link组件一样 2.pages文件夹中文件名就是路由路径名（无需配置路由路径），是页面组件。 laouts文件夹,是公共的模板的内容组件，公共的组件<Nuxt />，必须要加 不过在 Nuxt.js 框架中，我们有了新的变化，la
阅读全文
摘要：1. 利用Vue.js的通用 应用框架nuxt安装项目 命令行输入；npx create-nuxt-app 包名 （node中自带npx）,最新的nuxt是3.2，不会自动搭建服务端server文件了，2.92版本有 最新的版本的服务搭建详情：https://www.cnblogs.com/fsg6
阅读全文
摘要：卸载已安装版本 npm uninstall node-sass安装 npm install node-sass@4.14.1
阅读全文
摘要：一.报错结果 出现错误: this.getResolve is not a function 进行sass-loader,node-loader的安装后 $ npm install sass-loader node-sass -D (-D是 --save-dev 的简写) 1 重新运行项目 npm
阅读全文
摘要：1、支持ES6+语法，以server/index.js为例，将require修改为ES6的import模式： 初始化： 解决方法： （1）修改package.json文件，在“dev”和“start”命令后面新增：--exec babel-node （2）项目根目录下新增babel配置文件“.bab
阅读全文
摘要：转载来源：https://blog.csdn.net/jokerjiaojiao/article/details/108041009 本文参考官方文档的具体位置： dev配置属性：https://www.nuxtjs.cn/api/configuration-dev nuxt命令：https://w
阅读全文
摘要：最近在学习基于vue全家桶+ssr+koa仿M团PC端网站，因为里面的中间件版本比较旧，于是自己就搭建了新版本的中间件，以下是期间遇到的坑，希望能帮助到正在学习这个项目到人。 创建项目通过npx命令，npm5+版本自带到命令,这里注意要指定create-nuxt-app版本，目前最新版本是3.2.0
阅读全文
摘要：1、官方没有 Windows版本的 Redis，官网介绍： Redis项目不正式支持Windows。但是，微软开发并维护了针对Win64的Windows版本。 2、Windows版本下载地址：https://github.com/MicrosoftArchive/redis/releases 下载
阅读全文
摘要：Koa 中间件采用的是洋葱圈模型，每次执行下一个中间件传入两个参数 ctx 和 next，参数 ctx 是由 koa 传入的封装了 request 和 response 的变量，可以通过它访问 request 和 response，next 就是进入下一个要执行的中间件。 自定义中间件m1, m2,
阅读全文
摘要：const router = require("koa-router")(); router.get("/", async (ctx, next) => { global.console.log("index8"); await ctx.render("index", { title: "Hello
阅读全文
摘要：1、安装脚手架 npm install -g koa-generator 2、创建目录 koa2 -e koa2-learn e为ejs 3、cd koa2-learn 4、npm install (安装依赖) 5、npm start 看到 > node bin/www 表示已经成功运行 local
阅读全文
摘要：最近在做一个有关监听scroll的功能, 发现我添加监听之后一直不起作用: mounted() { window.addEventListener("scroll", this.setHeadPosition); //this.setHeadPosition方法名 }, 后来发现要在后面添加一个tr
阅读全文
摘要：一、安装依赖 使用vue封装的vue-awesome-swiper轮播图插件，不是原生的swiper插件 安装，npm install vue-awesome-swiper@4.1.1 --save npm install swiper@5 --save 在main.js全局注册 import Vu
阅读全文
摘要：学习连接；http://wmm66.com/index/article/detail/id/193.html
阅读全文
摘要：现在我们安装 vue-router 版本的时候，默认还是安装的 3.x 版本的，由于 vue3 的更新发生很大的变化，所以为了兼容处理，vue-router 也将发布最新版 4.x 版本了 学习连接：http://wmm66.com/index/article/detail/id/224.html
阅读全文
摘要：1. 现在安装的脚手架vue-cli是4.4了，vue-router也是4.x, 现在我们安装 vue-router 版本的时候，默认还是安装的 3.x 版本的，由于 vue3 的更新发生很大的变化，所以为了兼容处理，vue-router 也将发布最新版 4.x 版本了，router当中的一些东西变
阅读全文
摘要：原文链接；https://www.cnblogs.com/hjk1124/p/12672859.html mapMutations是vuex的mutation的辅助函数，用于在组件中映射mutation内的方法，以便在该组件中直接使用mutation里的方法 (说白了，就是一语法糖) 1.在组件中导
阅读全文
摘要：转载连接：https://blog.csdn.net/feifanzhuli/article/details/90489488 vue与better-scroll作者文档：https://zhuanlan.zhihu.com/p/27407024 中文文档：https://better-scroll
阅读全文
摘要：1，热销组件开发 注，关于开启flex，flex子项开始省略号样式不生效情况，需要在flex:1的子项添加min-width:0,省略号即可生效 原因 flex: 1的用处 在一个大的div中已知一个或多个内部div元素的宽度 为某个未知宽度的div元素设置flex:1 将沾满剩余空间 一般情况下，
阅读全文
摘要：一，利用FastClick第三方插件来解决移动端click事件300毫秒延迟情况 1，安装，npm i fastclick -S 在main.js中引入 import FastClick from "fastclick"; FastClick.attach(document.body); 2，安装s
阅读全文
摘要：今天用webpack打包项目，安装了less-loader模块之后报错，如下图： 原因： less-loader安装的版本过高解决方案： 1.npm uninstall stylus-loader2.npm install stylus-loader@3.0.2 --save-dev
阅读全文
摘要：一， 在正常情况下，如果不进行特殊处理，移动端在触发点击事件时，会有300ms的延迟。换句话说，当我们在点击移动端页面后不会立即做出反应，而是会等待300ms才会触发click事件。在移动web兴起初期，用户对300ms的延迟没有太大的感觉，但随着用户对交互体验的要求的提高，如今，移动端的300ms
阅读全文
摘要：一，运行npm run build, 会自动生成dist文件夹，有两个静态的js资源 1.，chunk-vendors.js是第三方的插件的js文件， app.js是自己定义的组件等写的文件，哈希的文件，如果跟新文件，浏览器有缓存，不需要用户再去请求，直接用本地资源 增量发布 2.，vue-cli3
阅读全文
摘要：下面看下vue component动态组件（详情看vue.js官网动态组件） 动态组件 通过component标签 的is属性来进行组件的切换 is的属性值决定要显示的组件，所以将is的属性值设置为data中的值，以便于动态变化 1 2 3 4 5 6 7 <template> <div class
阅读全文
摘要：一，安装，cube-ui 安装cube-ui vue add cube-ui (针对vue-cli3),安装会有一些配置提示， 以后会直接使用cube组件了，按需引入，Use post-compile? 后编译 y部分引用 Import type自定义主题 Custom theme yUse rem
阅读全文
摘要：注意： better-scroll会将点击事件去掉，如果滚动部分需要有点击事件，需要在参数里加上click：true。 同时，在PC上或某些手机端，由于未成功将touchend事件move掉，点击事件会执行两次。 better-scroll派发的event事件和原生js的event有属性上的区别，其
阅读全文
摘要：用该属性获取页面 URL 地址(http://localhost:8080/?id=12345&a=b#/sellers)： window.location 对象所包含的属性 属性描述 hash 从井号 (#) 开始的 URL（锚） host 主机名和当前 URL 的端口号 hostname 当前
阅读全文
摘要：better-scroll是一个页面滚动插件，用它可以很方便的实现下拉刷新，锚点滚动等功能。 实现原理：父容器固定高度，并设置overflow：hidden，子元素超出父元素高度后将被隐藏，超出部分可滚动且没有滚动条。 立即使用： <body> <div id="wrapper" ref="wrap
阅读全文
摘要：对于iphone6，宽度正好适配，但是对于iphone5,宽度就不够，需要做下媒体适配 .overview-left flex: 0 0 137px padding : 6px 0 border-right : 1px solid rgba(7, 17, 27, 0.1) text-align :c
阅读全文
摘要：v-on:before-enter=“beforeEnter”入场动画之前执行beforeEnter方法 v-on:enter=“enter”入场过程中执行的方法 v-on:after-enter=“afterEnter”入场后执行的方法 v-on:after-leave=“afterLeave”离
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum
阅读全文
摘要：关于flex:1详解；https://blog.csdn.net/qq_40138556/article/details/103967529 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 CSS属性 flex
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum
阅读全文