2017-09-14 16:44:58来自分类 前端
目录
1. [React 相关](#react)
2. [Vue 相关](#vue)
- [Vue 组件库](#vue-components-)
- [Vue 表单](#vue-form-)
- [Vue 操作](#vue-handle-)
- [Vue 图片](#vue-image-)
- [Vue 通知](#vue-notice-)
- [Vue 其他](#vue-other-)
3. [前端 UI 框架](#ui)
4. [CSS 相关](#css-)
5. [单页](#spa-)
6. [表单相关](#form-)
7. [弹出相关](#dialog-)
8. [开发工具](#devtools-)
9. [移动端相关](#mobile-)
10. [鼠标相关](#mouse-)
11. [数据处理](#data-)
12. [图片相关](#image-)
13. [动画相关](#animation-)
14. [项目资料](#information-)
15. [其他相关](#other-)
# react
React 相关
===实例===
https://gi...
2017-09-08 14:57:33来自分类 Vue
思路: 用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件
## 1. 准备工作
安装 3 个依赖: axios, jszip, file-saver
```bash
yarn add axios
yarn add jszip
yarn add file-saver
```
## 2. 下载文件
```javascript
import axios from 'axios'
const getFile = url => {
return new Promise((resolve, reject) => {
axios({
method:'get',
url,
responseType: 'arraybuffer'
}).then(data => {
resolve(data.data)
}).catch(error => {
reject(error.toS...
2017-07-17 21:30:13来自分类 Vue
一个网站一旦涉及到多用户, 就很难从 Cookies 中逃脱, Vue SSR 的 cookies 也真算是遇到的一个不小的问题, 从开始玩 SSR 开始到现在, 一共想出了3种方案, 从最早的把 Cookies 注入到 state 中, 到把 Cookies 注入到 global, 到现在的将 Cookies 注入到组件的 asyncData 方法.
随着 Vue 的升级, 第一种方案已经不再适用, 第二种也有不少的限制, 于是想到第三种方案, 下来就说说具体实现的方法:
### 第一种方案
第一种方案已经不再适用, 这里不再细说
### 第二种方案
思路: 将 cookies 注入到 ssr 的 context里, 然后在请求 api 时读取, 再追加到 axios 的header 里
1, 首先在 server.js 里将 cookies 加到 context里
```javascript
const context = {
title: 'M.M.F 小屋',
description: 'M.M.F 小屋',
url: req.url,
...
2017-07-01 16:26:47来自分类 Webpack
6月20号官方发布了[公告](https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b "公告"), webpack推出了3.0正式版。
作为一个版本控, 有新版本出来, 肯定是要试一试的.
### 如何升级?
1. 如果是用`yarn`, 那么升级很简单, 执行命令`yarn upgrade-interactive`, 然后选择需要升级的模块即可
2. 如果是用`npm`, 执行以下命令:
```bash
npm install webpack@3.0.0 --save-dev
npm install html-webpack-plugin@2.29.0 --save-dev
npm install extract-text-webpack-plugin@3.0.0-beta.3 --save-dev
```
`extract-text-webpack-plugin`还是继续用现在的`2.x`, 也没有什么问题
### webpack3 有什么新特性?
##### 1. Scope Hoisting...
2017-05-16 11:57:14来自分类 Vue
由于 Vuex 使用了单一状态树，应用的所有状态都包含在一个大对象中。那么，随着应用的不断扩展，store 会变得非常臃肿。
为了解决这个问题，Vuex 允许我们把 store 分 module（模块）。每一个模块包含各自的状态、mutation、action 和 getter。
那么问题来了, 模块化+命名空间之后, 数据都是相对独立的, 如果想在模块 A 调用 模块 B 的`state, actions, mutations, getters`, 该肿么办?
假设有这么两个模块:
#### 模块A:
```javascript
import api from '~api'
const state = {
vip: {},
}
const actions = {
async ['get']({commit, state, dispatch}, config = {}) {
try {
const { data: { code, data } } = await api.post('vip/getVipBaseInf...
2017-04-18 11:57:54来自分类 Vue
vuex 2.3.0 的发布说明: `Modules can now declare state using a function - this allows the same module definition to be reused (e.g. multiple times in the same store, or in multiple stores)`
假如你 vuex 的模块有多个格式是完全一样的, 这时候就可以把这个模块公共出来, 在 Vuex 实例里引用, 如:
```javascript
import api from '~api'
const actions = {
async ['get']({commit, rootState: {route: { path }}}, config = {}) {
const { data: { code, data } } = await api.post(config.url, config.data)
if (code === 1001) commit('receive', d...
2017-04-08 17:29:12来自分类 前端
用了很久的 atom 了, 对于在 .vue 里不能用 emmet 一直感到很郁闷, 今天在看 emmet-atom 的 issue 时, 无意中发现了解决方法: https://github.com/emmetio/emmet-atom/issues/364
点击`文件 - 用户键盘映射`打开配置文件
在配置文件的最后添加
```
'atom-text-editor[data-grammar~="vue"]:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'
```
注意: 如果配置文件中已经有`'atom-text-editor[data-grammar~="vue"]:not([mini])':`的其他配置, 那么要在其他配置的下面直接添加`'tab': 'emmet:expand-abbreviation-with-tab'`, 而不能直接添加上面的两行, 不然会报错
重启编辑器
这样就可以愉快的玩耍了......
2017-04-07 11:19:14来自分类 Vue
Vue2 加了`reader`选项后, 再加上几种构建方式, 开局方式真是各种五花八门, 这里列几种常见的, 说说注意点
我们先建立一个 app.vue 来当入口组件, 即所有页面都会以这个组件为模板 (下面代码中无特别说明, App 即指下面这个组件)
```html
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
<!-- 这里还可以写点其他组件, 或者路由也可以 <router-view></router-view> -->
</div>
</template>
<script>
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<style>
</style>
```
# 方式 1
模板文件:
```html
<div id="app"></div>
```
注意: vue2 已经...
2017-04-02 10:40:12来自分类 Vue
#### 2017.03.27 更新
webpack2 的中 System.import 方法将被弃用, 推荐改成以下写法:
1. 正常写法
```javascript
const centerHome = resolve => require(['../pages/home/center-home.vue'], resolve)
const centerInfo = resolve => require(['../pages/home/center-info.vue'], resolve)
const centerShop = resolve => require(['../pages/home/center-shop.vue'], resolve)
const router = new VueRouter({
mode: 'hash',
base: __dirname,
scrollBehavior,
routes: [
{ name:'center-home', path: '/center/home', component:...
2017-03-18 11:39:39来自分类 Vue
# 1. 安装缓存依赖: lru-cache
```bash
npm install lru-cache --dev
```
# 2. api 配置文件
config-server.js
```javascript
var LRU = require('lru-cache')
let api
if (process.__API__) {
api = process.__API__
} else {
api = process.__API__ = {
api: 'http://localhost:8080/api/',
cached: LRU({
max: 1000,
maxAge: 1000 * 60 * 15
}),
cachedItem: {}
}
}
module.exports = api
```
配置下`lru-cache`
# 3. 封装下 api
```javascript
import axios from 'axios'...
