<WRM>的博客

package.json文件中已经记录了项目所用的所有依赖及其版本，所以打开cmd，定位到项目的根目录，运行如下代码即可：2.运行在打开package.json文件，查看“start”值是什么，将其输入到cmd中运行完之后，如果出现图片中的情况，说明运行成功。在本地浏览器中输入cmd给出的链接“http://localhost:8080”即可查看在运行完之后，报错如下出现问题的原因应该是版本不匹配解决办法：先卸载vue-template-compiler，再装匹配的版本（2）Modu

安装npm install postcss-px-to-viewport --save-dev配置在vue.config.js文件中添加如下代码： css: { loaderOptions: { postcss: { plugins: [ require('postcss-px-to-viewport')({ unitToCo.

什么是图片懒加载当页面用到该图片时再加载该图片使用vue-lazyload安装npm install vue-lazyload --save导入import VueLazyLoad from "vue-lazyload";Vue.useVue.use(VueLazyLoad);修改img:src-> v-lazy

什么是移动端300ms延迟移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。出现该问题的原因2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。这当中最出名的，当属双击缩放(double tap to zoom：用手指在屏幕上快速点击两次，iOS

本文章以封装toast组件为例（文章最后附有组件代码）1.新建index.js文件在对应组件的目录下新建index.js文件，添加代码如下// 引入想要封装的组件import Toast from "./Toast";const obj = {};obj.install = function(Vue) { // 1.创建组件构造器 const toastContrustor = Vue.extend(Toast); // 2.new的方式，根据组件构造器，可以创建出

基本思想：当页面加载完成后，点击标题后，获取对应标题内容的offsetTop值，利用scroll的scrollTo滚动到相应位置给各组件添加ref属性便于获取标题所对应的组件新添加data成员添加data成员：空数组获取各标题对应的内容的offsetTop，并将其推入数组...

创建混入对象并导出import {debounce} from "./utils";export default itemListenerMixin = { mounted() { let newRefresh = debounce(this.$refs.scroll.refresh,100) this.itemImgListener = () => { newRefresh; } this.$bus

bug：当组件被多个页面复用时，组件被触发时传递的事件可能会传递到多个页面。然而并非所有的页面都需要接收这个事件解决办法（两种）：判断路由：在组件触发事件往外传递之前先判断当前路由： imageLoad() { if (this.$route.path.indexOf("/home") !=-1) { this.$bus.$emit("itemImageLoad"); } else if (this.$route.path.indexOf("/deta

推荐使用better-scroll插件。本篇博客中的代码是vue与better-scroll的使用介绍它的核心是借鉴的 iscroll 的实现，它的 API 设计基本兼容 iscroll，在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。BetterScroll 是使用原生JS实现的。主要实现的功能：在滚动时，实现顺滑滚动以及弹簧效果（如果使用原生的滚动会出现卡顿的情况）起步BetterScroll 提供了一个类，实例化的第一个参数是一个原生的 DOM 对象。当然

获取到组件后，组件中有个属性：$el——获取组件中的元素例如：现在有一个category组件,给该组件添加ref=“category”。要获取组件中的元素this.$refs.category.$el

报错如下：原因：pullUpLoad没有设置为true

<back-top @click.native="backClick"></back-top> methods: { backClick() { console.log("----------"); }, },

在某一次上拉事件中添加this.scroll.finishPullUp();

使用BetterScroll监听上拉加载更多报错报错原因：没有安装pullup这个插件解决：npm install @better-scroll/pull-up@next --save使用import BScroll from '@better-scroll/core'import Pullup from '@better-scroll/pull-up'BScroll.use(Pullup)export default { name: "Category", data() {

对于vue来说，默认配置为“@\”代表src\下的的文件，如果还需要配置其他路径的别名，请参考下文vue-cli = 3.x在根目录下新建文件vue.config.js，添加如下代码:module.exports = { configureWebpack: { resolve: { alias: { 'assets': '@/assets', 'common': "@/common",

1.安装npm install axios

介绍有时候我们需要从 store 中的 state 中派生出一些状态（对state中的变量进行一些操作或者说是建立函数），并且将这函数应用到多个组件时，如果通过复制函数，或者抽取到一个共享函数然后在多处导入它，这样的代码不够理想。所以就需要用到gettersgetters类似于组件中的computed（计算属性），当它的依赖值发生了改变才会被重新计算使用getters中的函数有两个参数第一个是state，第二个是metters。在组件中展示如何向getters里的函数传递其他的参

Vuex的作用什么是Vuex？官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。我的理解就是：实现某些组件间变量的共享。为什么不用参数传递而用Vuex呢？先来看一个简单的单向数据流的示意：状态一般会在视图呈现，

keep-alive：保留组件的状态。换句话说，keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或者避免重新渲染。activated/deactivated函数需要在keep-alive下使用才能生效。

先补充几个生命周期函数，1.created当组件被创建的时候，就会回调这个生命周期函数2.mounted当组件被挂载到DOM上的时候，会被回调3.updated当界面发生更新的时候，会被执行

1. $route.params（1）新建组件新建一个User.vue文件，添加<template> <div> <h2>user（用户的相关内容）</h2> <p>userId:{{userId}}</p> </div></template><script>export default { name: "User", computed: { us

例如，需要在/home下嵌套food和clothes即/home/food和/home/clothes1.创建对应的子组件新建HomeFood.vue和HomeClothes.vue文件，添加对应的代码<!--HomeFood.vue--><template> <div> <div>我是HomeFood相关内容</div> <ul> <li>HomeFood</li>

情景：有的时候url是不确定的，比如user页面：/user/userName。最后一般跟着用户的姓名或者ID1.新建组件新建一个User.vue文件，添加<template> <div> <h2>user（用户的相关内容）</h2> <p>userId:{{userId}}</p> </div></template><script>export default

例如，点击button按钮实现路由的跳转

针对vue-cli>=3的版本，介绍两种修改方式：1.vue ui在终端执行：vue ui会打开页面可以导入要管理的项目，会打开页面如下2.在根目录下新建vue.config.js文件，添加要修改的配置

1.对CLI 的 介绍（1）脚手架可以快速搭建Vue开发环境以及对应的webpack配置（2）如果项目比较小，不需要Vue CLI；但是如果是大型项目，就需要使用Vue CLI。为什么？使用Vue.js开发大型项目时，需要考虑代码的目录结构、项目部署、热加载、代码单元测试等事情。如果每个项目都需要手动完成这些工作，效率太低，所以需要用到脚手架帮助我们完成2.脚手架使用前提：node、webpack3.安装npm install -g @vue/cli查看版本：vue --versio

两者的区别就在于main.js里面Vue个运行过程如下：先将template解析成抽象语法树（ast），然后再编译成render函数，通过render函数将之前的翻译成虚拟DOM，最后渲染为真实DOMRuntime + Compiler转换过程：tenplate -> ast -> render -> virtual DOM ->UIRuntime-only则跳过了前两步：render -> virtual DOM ->UI综上，Runtime-onl.

打开config/index.js文件，找到useEslint关键字，将true改为false就可以啦

很简单，只需要给<router-link>添加一个属性tag即可<router-link to="/home" tag="button">home</router-link><!--渲染成button--><router-link to="/about" tag="li">about</router-link><!--渲染成li-->...