来自分类 Vue2017-03-04 14:19:20
通常说, 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...
来自分类 Vue2017-02-27 21:24:39
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...
来自分类 Vue2017-05-16 11:57:14
由于 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...
来自分类 Vue2017-09-08 14:57:33
思路: 用 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...
来自分类 Vue2016-12-13 22:12:00
注意: 经过测试, `vue-meta` 会导致内存泄漏, 请慎用... ----- 以现在 vue2 的 服务端渲染模式, 都是通过 webpack 生成 html 模版文件(或者直接在 server.js 里拼接), 然后通过 fs.readFileSync 读取该文件, 再通过 res.end 输出, 这样就造成 meta 修改很麻烦 这时候我们可以借助 vue-meta 来管理, 下面以官方的`vue-hackernews-2.0`为例, 说下使用方法: # 安装 Yarn ```bash yarn add vue-meta ``` NPM ```bash npm install vue-meta --save ``` # 准备插件 在`router/index.js`里添加 ```javascript import Vue from 'vue' import Router from 'vue-router' import Meta from 'vue-meta' Vue.use(Router) Vue.use(Meta) export default new...
来自分类 前端2021-06-08 14:05:58
@[toc] # nodejs ===框架=== https://github.com/expressjs/express `快速、无约束、极简的node web框架` ===其他=== https://github.com/cheeriojs/cheerio `为服务器特别定制的,快速、灵活、实施的jQuery核心实现` [[文档]](https://github.com/cheeriojs/cheerio/wiki/Chinese-README) https://github.com/node-schedule/node-schedule `定时任务` https://github.com/paulmillr/chokidar `最小和高效的跨平台文件监视库` https://github.com/shelljs/shelljs `Node.js的可移植Unix Shell命令` https://github.com/caolan/async `async是一个流程控制工具包` [[文档]](http://caolan.github.io/async/v3/index.htm...
来自分类 Vue2016-12-07 22:12:00
# ====目录==== - vue-cli 如何关闭 eslint - 片段实例 - webpack 打包时 css 背景图片/字体路径的问题 - vue-strap 按需引用打包后报错? - webpack 打包时, 怎么引用 npm 安装的依赖? - webpack 的 path 和 publishPath 怎么配置? - vue 中如何绑定内联样式 # 1. vue-cli 如何关闭 eslint 部分刚接触`vue-cli`的群友, 会默认把`eslint`打开, 但是又不了解`eslint`的规则, 经常造成编译时报错, 那么如何关闭呢? 打开`build/webpack.base.conf.js`配置文件, 删除以下代码: ```javascript preLoaders: [{ test: /\.vue$/, loader: 'eslint', include: projectRoot, exclude: /node_modules/ }, { test: /\.js$/, loader: 'eslint', include: projectRoot, ...
来自分类 Vue2017-04-07 11:19:14
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 已经...
来自分类 Vue2016-12-07 22:12:00
在开发阶段, 一般都是用webpack或者nodejs做服务器, 访问地址也都是本地IP, 和后台API对接时, 难免就遇到跨域的问题了. 一般解决方法有这么几种: 1. 用jsonp 2. 让后端设置`Access-Control-Allow-Origin` 3. 使用nodejs做代理 # 一. 用jsonp jsonp的原理是script标签引入js是不受域名限制的, 由于是模拟插入script标签, 所以不可以用post请求 带cookies的方法参见下面`设置header`的方法 # 二. 设置header 设置header比jsonp好, 可以用post方式请求, 配合后端, 也可以携带cookies 后端添加如下header: ``` Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: www.xxx.com ``` 如果需要携带cookies, 这里`Access-Control-Allow-Origin`将不可以使用泛型(即*), 同时ajax请求需要设置`withCredent...
来自分类 Vue2019-07-08 15:44:55
随着手机浏览器的不断更新, 现在开发移动端, 适配解决方案当属`rem + vw` Vant 文档中虽然有 REM 适配的方法, 试用 postcss-pxtorem 和 lib-flexible, 但是由于 Vant 设计稿应该是用 375 分辨率的, 如果我们的设计稿是 640 或者 750的, 换算起来则有些麻烦 ``` module.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { rootValue: 37.5, propList: ['*'] } } } ``` 这里如果直接修改了`rootValue`来适配我们自己的设计稿, 可能会导致 Vant 的 rem 数值偏小 先看`rem + vw`的 less 配置: ```less // 设计稿宽度 @vm_design: 750; // 为什么设置 100? 设置成便于计算, 计算r...