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...
2016-12-07 22:12:00来自分类 Vue
# ====目录==== - 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, ...
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...
2016-12-13 22:12:00来自分类 Vue
注意: 经过测试, `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...
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 已经...
2016-12-07 22:12:00来自分类 Vue
在开发阶段, 一般都是用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...
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-10-22 18:57:28来自分类 前端
目录 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...
2016-12-07 23:12:00来自分类 Vue
由于路由组件的复用问题, 相同路由切换, 是不会出现动画效果的, 比如从 /article/1 切换到 /article/2 vue1 可以用路由钩子`canReuse`来取消组件的复用, 然后 vue2 已经取消了这个钩子, 那么 vue2 就没办法做到了吗? 其实 vue2 要做到其实也很简单 ```javascript export default { computed: { key() { return this.$route.path.replace(/\//g, '_') } } } ``` 我们先通过计算属性, 生成一个 key, 这个 key 必须保证每一个 url 都不一样, 所以我们直接通过`$route.path`来生成, 有了这个唯一的 key 之后, 我们给`router-view`绑上即可. ```html <transition name="fade" mode="out-in"> <router-view class="router" :key="key"></rout...
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...