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-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-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'...
2017-03-08 22:56:04来自分类 Vue
cookies 都是存在浏览器端, 而 ssr 时, 是在服务器请求的接口, 默认情况肯定带不了浏览器的 cookies, 然而一些登录后的页面数据又必须要 cookies, 这可怎么办 ### 1. 通过 express 取得 cookies 在 server.js 上引入 cookies 解析中间件 ```javascript const cookieParser = require('cookie-parser') ``` 并且在路由前面 use ```javascript app.use(cookieParser()) ``` ### 2. 将 cookies 注入 render 的上下文中 ```javascript app.get('*', (req, res) => { // 其他代码省略 const context = { url: req.url, cookies: req.cookies } const renderStream = renderer.renderToStream(context) /...
2017-03-04 14:19:20来自分类 Vue
通常说, ajax 请求错误有两种, 一种是网络问题或者代码问题所造成的 400, 500错误等, 另外一种是请求参数后端通不过验证, 由后端抛出的错误 第二种根据不同的后端框架或者程序猿又可以分成两种, 一种是直接返回 json, 用一个 特别的 code 来区别正常请求返回的数据, 如: ``` { code: -404, message: '这是错误信息', data: '', } ``` 还有一种就是抛出 http 404 之类的, 然后把错误原因放在 header 里. 在组件写调用 ajax时, 通常都是这么写(这里以 axios 为例): ```javascript import axios from 'axios' axios.get('/user?ID=12345') .then(function (response) { if (response.data.code === 200) { console.log(response.data) } else { // 由后端抛出的错误 alert(response.data.m...
2017-02-27 21:24:39来自分类 Vue
vue2 经过 2.2 版本升级后, 文件变成了 8 个: - vue.common.js - vue.esm.js - vue.js - vue.min.js - vue.runtime.common.js - vue.runtime.esm.js - vue.runtime.js - vue.runtime.min.js 瞬间就懵逼了, 这些文件该怎么选? 下面就来说下, 这 8 个作用都用在什么场景, 有什么区别 按照构建方式分, 可以分成 `完整构建(包含独立构建和运行时构建)` 和 `运行时构建` 按照规范分, 可以分成 UMD, CommonJS 和 ES Module 简单来说, `完整构建` 和 `运行时构建`的区别就是, 可不可以用`template`选项, 和文件大一点,小一点 # vue.common.js 属于: 基于 CommonJS 的完整构建 可以用于 Webpack-1 和 Browserify 之类打包工具 因为是`完整构建`, 所以可以使用`template`选项, 如: ```javascript import Vue from 'vue...