好咖啡要和朋友一起品尝，好“模板”也要和同样喜欢它的人一起分享。 网站首页JS经典实例
mixin插件、history及骨架屏原理-mixin插件
发布时间：2020-05-21 16:37:59作者：雪饮
安装mixin为了不和之前的项目影响，就单独初始化一个命令如：vue init webpack-simple 01_mixinC:\Users\xy>vue init webpack-simple 01_mixin Command vue init requires a
详细信息>>vue项目第六天vuex的应用
发布时间：2020-05-20 18:03:41作者：雪饮
使用vuex的store实现购物车的数量展示安装vuexnpm i vuex -S部署代码把昨天vuex中的store文件夹整个拷贝到我们之前项目的src目录中然后main.js中引入store// 引入axios
im
vue项目第六天
发布时间：2020-05-19 17:43:34作者：雪饮
组件切换的淡入淡出效果本质：在app.vue主组件中的router-view外层套一个transition组件并提供淡入淡出样式<transition name="fade" mode="out-in"><router-view/></tran
详细信息>>vue或npm下载安装chromedriver失败或太慢
发布时间：2020-05-18 20:35:03作者：雪饮
当你用vue下载chromedriver谷歌驱动时或者npm install时会发现若待安装列表中存在chromedriver，则经常这个chromedriver都是没有下载成功的。解决方案如下：npm install chrom
详细信息>>vue项目第五天购物车、父子传值-02
发布时间：2020-05-15 20:31:01作者：雪饮
商品详情页的评论功能因为之前在图集详情页做过图片评论组件的封装，所以这里只需要调用下即可，这里采用的是跳转一个新页面来调用并且为了区分商品评论和图片评论（我这里后端
详细信息>>vue项目第五天
发布时间：2020-05-11 16:34:15作者：雪饮
子组件接收数据处理展示子组件可以通过接收父组件的属性，并在computed中用新的结果做为return的展示添油加醋。首先初始化一个简易的webpackC:\Users\Administrator\Webstor
详细信息>>vue项目第四天-商品列表、购物车(商品详情及图文介绍)
发布时间：2020-05-09 19:53:35作者：雪饮
商品详情页没有多少出彩的地方，主要是封装了轮播、图文介绍所涉及到的组件跳转及beforeRouteEnter钩子以及合并请求轮播封装则有轮播组件封装为Swipe.vue<template>
<m
vue项目第四天商品列表、购物车
发布时间：2020-05-08 00:14:33作者：雪饮
商品列表界面没有什么特别的，主要就是使用了一个下拉触底的mint-ui的组件商品列表组件GoodsShow.vue如：<template>
<div :style="{ height:wrapperHeight + 'px' }" ref=
vue项目第三天图集预览与评论
发布时间：2020-05-06 20:40:10作者：雪饮
目标1：图集的预览之前在图文分享的详情页中以宫格方式展示了某个图集下面的所有图片，但现在有个需求是点击某个图片后就能全屏预览，这个需求看似很容易直接放大即可，但是这样比
详细信息>>vue项目第三天
发布时间：2020-05-04 23:44:30作者：雪饮
目标1：为axios请求时及请求结束加上loading和关闭loading效果只需要在src/main.js中加入请求及响应拦截器即可//定义axios全局拦截器
//请求拦截器
Axios.interceptors.requ
Vue项目第二天总结
发布时间：2020-05-04 00:38:26作者：雪饮
目标1：我要直接在localhost上搭建一个比较标准一点的项目而且有比较标准的数据本来想用laravel，当时比较烦躁急于求成，知道laravel安装要先安装composer，安装了composer还要指
详细信息>>Vue项目第二天(moment)
发布时间：2020-05-02 18:47:32作者：雪饮
封装九宫格昨天写在home组件中的九宫格，今天准备提取出来，封装下首先需要在项目目录的src/components下建立common/MyUl.vue<template>
<ul>
<slot></slot>
</ul>
</
vue实例-项目首页-完成
发布时间：2020-05-01 13:28:26作者：雪饮
配置自动打开浏览器在项目根目录package.json中scripts段中配置如："dev": "webpack-dev-server --inline --progress --open --config build/webpack.dev.conf.js",即可在运
详细信息>>vue 项目实例-首页 webpack项目搭建
发布时间：2020-04-30 11:44:05作者：雪饮
当前版本C:\Users\Administrator\WebstormProjects\untitled>vue -V2.9.6初始化项目C:\Users\Administrator\WebstormProjects\untitled>vue init webpack cms_project_04?
详细信息>>js剪切板兼容性
发布时间：2020-04-19 23:56:47作者：雪饮
最近项目要求做一个链接拷贝功能，虽然有看到过微擎项目中有现成的，但是要剥离出来应该也挺麻烦吧，于是自己开始了探索之旅。发现还挺棘手，什么ie不兼容、什么google无效、什么
详细信息>>vue-cli安装及webpack项目搭建
发布时间：2020-04-13 21:21:15作者：雪饮
全局安装npm i vue-cli –g搭建webpack项目（脚手架安装）下面命令执行前建议先更换为淘宝镜像比较快npm config set registry http://registry.npm.taobao.org/ 上面my-p
详细信息>>导航完成之前获取（路由生命周期）
发布时间：2020-04-13 21:11:45作者：雪饮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script src="vue.js&q
vue-router的导航守卫
发布时间：2020-04-13 21:08:35作者：雪饮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javasc
vue组件间数据传递（event）
发布时间：2020-04-06 11:44:18作者：雪饮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<dom-a></dom-a>
<
vue全局组件接收参数及for中的key的注意事项
发布时间：2020-04-06 11:37:15作者：雪饮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.userList{
border: 1px s
webpack引入vue单文件
发布时间：2020-04-04 12:09:30作者：雪饮
依赖npm install vue-loader@14.1.1 vue-template-compiler@2.5.17 –Dmain.jsimport Vue from 'vue';
import App from './App.vue'
new Vue({
el:'#app',
webpack编译并自动打开浏览器及代码改变免刷新浏览器
发布时间：2020-04-04 12:07:37作者：雪饮
依赖npm install webpack-dev-server@2.9.0package.json{
"name": "05_day_webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts":
webpack生成到指定目录并自动挂载
发布时间：2020-04-04 12:06:18作者：雪饮
依赖npm install html-webpack-pluginwebpack.dev.config.jsvar path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports
webpack解析less
发布时间：2020-04-04 12:05:45作者：雪饮
依赖npm install less-loader lesswebpack.dev.config.jsmodule.exports = {
entry:{"main":'./main.js'},
output:{filename:'./build.js'},
watch:true,
mod
webpack解析css及图片
发布时间：2020-04-04 12:03:38作者：雪饮
所需依赖Css:npm i css-loader style-loader –D图片:npm i url-loader file-loader –DApp.js//当前目录的一个图片文件
import imgSrc from './7.jpg'
var App