小皮咖的博客

提出问题 最近在做项目发现一个问题，当我使用了 keep-alive 标签后，进入了某个路由进行一系列操作，再点击浏览器后退，再次进入刚才的路由，页面被操作的数据没有初始化！分析问题 这是因为 keep-alive 将路由页面缓存，所以该路由没有完成整个生命周期，没有 destroyed，因此重新进入也没有触发其他生命周期钩子，如 created 等。解决问题（1）. 查看官方文档

1. 前言由于 Parcel 打包工具的影响，webpack4 也追求零配置搭建项目。而前阵子出现的 vue-cli 3.0也是基于 webpack4 零配置的思想创建的。对于一些习惯webpack3 的开发者难免有些不习惯。本文就带你绕过 vue-cli，用 webpack4 一步步搭建 vue 项目。注：（本文讲述的是webpack4基础配置，文章有点长，请耐心看完。或者直接查看项目源...

最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件，今天带大家一步一步实现 DatePicker 的 vue 组件。原理 DatePicker 的原理是——计算日历面板中当月或选中月份的总天数及前后月份相近的日子，根据点击事件计算日历面板显示内容，以及将所选值赋值给<input/>标签。实现CSS 代码于文章末...

开发一个简单的脚手架工具前言像我们熟悉的 vue-cli，create-react-app 等脚手架，只需要输入简单的命令 vue init webpack project，即可快速帮我们生成一个初始项目。在实际工作中，我们可以定制一个属于自己的脚手架，来提高自己的工作效率。为什么需要需要脚手架？减少重复性的工作，不再需要复制其他项目再删除无关代码，或者从零创建一个项目和文件...

先介绍一下一般网页如何实现 quill 富文本编辑器引入 quill.js 文件<script src="https://cdn.quilljs.com/1.3.3/quill.js"></script>引入主题 css 文件 <link href="https://cdn.quilljs.com/1.3.3/quill.snow.css" rel="stylesheet">本文操作基于 J

前沿parcel 工具的优点：1、 Parcel 使用工作进程启用多核编译，并具有文件系统缓存，即使在重新启动后也可快速重新构建。2 、Parcel 支持JS，CSS，HTML，文件资源等等 - 不需要安装任何插件。3、在需要时，代码使用 Babel，PostCSS 和 PostHTML 自动转换 - 即使是 node_modules。4、Parcel 使用动态 import(...

1.安装better-scroll在根目录中package.json的dependencies中添加："better-scroll": "^0.1.15"然后 npm i 安装。2.封装代码将better-scroll封装成两个基础组件slider和scroll放于src/base文件夹中。 slider.vue 代码<template> <div class="slider" ref="sl

首先安装npm install vue-i18n然后在main.js 中引入：import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n)配置相关文件在 src 根目录新建一个 language 文件夹 里面放置一个 index.js 和其他语言包，这里以中英文为例，// index.jsimport messagesE

【名称】pager 翻页组件【技术】使用 VUE.JS 制作【效果】实现页码跳转，根据组件 props 参数获取 pager 的页码总数和当前页码。当页码过多时，显示首尾页码以及当前页码及当前页码左右页码。首尾可点击进入上一页或下一页【代码】<template> <div> <div class="pager-wrapper" v-if="pageNum < 6">

1. 去除控制台调试时的打印信息修改build/webpack.prod.conf.js在 plugins 中的 UglifyJsPlugin 的 compress 加入这两行： drop_debugger: true, drop_console: true代码如下new webpack.optimize.UglifyJsPlugin({ compress:{ wa

vuex存在的目的由于vue为单页面应用，其组件之间的数据传递如果单单依赖storage,很容易出现数据被覆盖，被串改的情况发生，vuex正是为解决这个问题而生，提供一个空间供所有的组件读写。1.安装vuexnpm i vuex --s2.基本代码然后在入口文件main.js输入一下代码// main.jsimport store from './store'new Vue({ el: '#a

1. 省市区数据表prpvinces.js温馨提示：该数据表未按 eslint 语法编写，因此会报错。事先将 eslint 关闭问题即可解决。关闭方法： 找到 build>webpack.base.conf.js>module.exports>module>rules删除以下代码：{ test: /\.(js|vue)$/, loader: 'eslint-loader'

Stylus介绍及特点Stylus 是一个基于Node.js的CSS的预处理框架，诞生于2010年，比较年轻，可以说是一种新型语言，其本质上做的事情与 Sass/LESS 等类似， 可以以近似脚本的方式去写CSS代码，创建健壮的、动态的、富有表现力的CSS，默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。Stylus比LESS更强大，而且基于nodejs比Sass更符合我们的思路。S

1. 如何编写 Vue 插件在以往的 Vue 项目开发过程中，我们使用插件的方法是Vue.use(plugin)。如： import filters from "./filter/filters";Vue.use(filters);plugin 为 Object 对象，需内置一个install()方法方可使用。该方法第一个参数为Vue对象，其余参数由使用者传入决定。plu...