前言之前使用 vue2.x + webpack3.x 撸了一个 vue 单页脚手架vue 版 spa 脚手架 有兴趣的同学可以看下,内附详细注释,适合刚学习 webpack 的童鞋.react 版 spa 脚手架 但在一些场景下,单页应用显然无法满足我们的需求,于是便有了mulXc-cli 好了,废话不多说,进入正题!!!!文件结构 ├── build 构建服务和webpack配置├──── build.js 构建全量压缩包 (打包项目)├──── setting.js 多页面入口配置├...
vue2.0+vuex+localStorage 待办事项源码：https://github.com/Mynameisfwk/vue-Todo-list 参考代码：https://github.com/Mynameisfwk/vivo-shop 代码预览vuex官方文档 https://vuex.vuejs.org/ 我觉的官方文档说明很详细localStorage 用来本地储存数据 const state={home:localStorage["home"]?JSON.parse(localStorage["home"]): [],item:localStorage["item"]?JSON.parse(localStorage["item"]): [], }export default state cons...
vue-cli到多页应用 前言：我有一个cli创建的vue项目，但是我想做成多页应用，怎么办，废话不多说，直接开撸~ 约定：新增代码部分在//add和//end中间 删除(注释)代码部分在//del和//end中间，很多东西都写在注释里 第一步：cli一个vue项目 新建一个vue项目 官网 vue init webpack democli默认使用webpack的dev-server服务，这个服务是做不了单页的，需要手动建一个私服叫啥你随意 一般叫dev.server或者dev.client 第二步：添加两个方...
前后端分离后，控制路由跳转的责任转移到了前端，后端只负责给前端返回一个html文档以及提供各种接口。下面我们用作例子的两个项目，均采用vue作为基础框架，一个是SPA应用，另一个是多页应用，均由前端进行路由控制及渲染的。 总体思路 无论单页还是多页，我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: /404 的路由，渲染相应的404页面。同时，配置一个规则，当在用户可访问的路由表中的所有路由都无法匹...
最近项目要使用高德地图写了一个实时公交的应用，这边分享一个小应用主要熟悉下高德地图在vue中的使用，常用api，vue的常用指令 先给大家看下页面效果： 如果有需要源码的童鞋请移步我的github地址 vue搭建实时公交 (欢迎star) 实现思路 在vue项目中导入高德地图 具体功能调用相应高德js APi 1.在vue项目中导入高德地图 1.修改webpac.base.conf.js文件 externals: {AMap: AMap}2.引入sdk 引入有两种方式，一种是在index页面直接引...
一.父子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>父子组件传值</title><style> </style><script src="./vue.js"></script> </head> <body><div id="root"> <counter :count="0" @numberchange="handleChange"></counter><counter :count="0" @numberchange="handleChange"></counter><div>{{total}}</div> <validate-content content="hello world"></validate-content></div><script> //父...
VeeValidate是什么： VeeValidate是Vue.js的验证库，它有很多验证规则，并支持自定义规则。它基于模板，因此它与HTML5验证API相似并且很熟悉。您可以验证HTML5输入以及自定义Vue组件。它也是以本地化为基础构建的，实际上我们有大约44种语言由精彩的社区成员支持和维护。 本文包含VeeValidate包含以下几点应用： 1、基本安装使用 2、本地化支持 3、自定义规则和错误消息 4、验证HTML5输入和自定义Vue组件 5、统一提交按钮处理 先看...
由于上传地址问题，需要自定义上传按钮，效果如图由于在页里面没有操作dom，所以想到了用vue的 自定义事件绑定$emit 、$on来把点击事件传递给ueditor。 首先是给ueditor添加自定义按钮： 1，打开ueditor.all.js,找到btnCmds，大概在27854行，如下图，在数组添加一个自定义的按钮名称，我写的是"love"ueditor.all.js 2，给按钮添加事件 还是在ueditor.all.js文件内找到commands指令 给刚才定义的按钮扩展事件，如下：给按钮添加事件...
1. 介绍 在开发react应用时，应该没有人用传统的方法引入react的源文件(js)，然后在html编辑吧。 大家都是用webpack + es6来结合react开发前端应用。 这个时候，我们可以手动使用npm来安装各种插件，来从头到尾自己搭建环境。 比如： npm install react react-dom --save npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save npm install babel webpack webpack-dev-server -g虽然自己搭建的...
有哪些动态执行脚本的场景？在一些应用中，我们希望给用户提供插入自定义逻辑的能力，比如 Microsoft 的 Office 中的 VBA，比如一些游戏中的 lua 脚本，FireFox 的「油猴脚本」，能够让用户发在可控的范围和权限内发挥想象做一些好玩、有用的事情，扩展了能力，满足用户的个性化需求。 大多数都是一些客户端程序，在一些在线的系统和产品中也常常也有类似的需求，事实上，在线的应用中也有不少提供了自定义脚本的能力，比如 Google...
项目技术： webpack + vue + element + axois (vue-resource) + less-loader+ ... vue的操作的方法案例： 1.数组数据还未获取到，做出预加载的动画 <el-carousel :interval="3000" type="card" height="200px" class="common-mt-md"><el-carousel-item v-for="item in movieArr" :key="item.id" class="text-center"><img v-bind:src="item.images.small" alt="电影封面" class="ticket-index-movie-img"></el-carousel-item>// 实...
写在前面：通常 SPA 中前端路由有2种实现方式： window.historylocation.hash下面就来介绍下这两种方式具体怎么实现的一.history1.history基本介绍window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法，它有几个原始方法： history.back() - 与在浏览器点击后退按钮相同history.forward() - 与在浏览器中点击按钮向前相同history.go(n) - 接受一个...
前言假如你在项目中遇到过 eslint 报错 Potential timing attack ，不可忽视！这是一个涉及到安全的问题：时序攻击。 eslint 报错原因 首先eslint引入了一个叫做eslint-plugin-security的插件，这个插件有助于识别出潜在的安全问题，但同时也会产生误报的问题，附上插件 源码地址。 var keywords = (( + [password,secret,api,apiKey,token,auth,pass,hash].join()|() + ));var re = new RegExp(^ + keywords + $, im);function co...
项目背景最近在项目开发中，遇到下面这样一个问题： 在进行铭感操作之前，每个请求需要携带token,但是token 有有效期，token 失效后需要换取新的token并继续请求。需求分析 每个请求都需要携带 token ，所以我们可以使用 axios request 拦截器，在这里，我们给每个请求都加 token,这样就可以节省每个请求再一次次的复制粘贴代码。token 失效问题，当我们token 失效，我们服务端会返回一个特定的错误表示，比如 token invalid，但是...
一、报错内容类似：Expected indentation of 0 spaces but found 4 将 build 文件下的 webpack.base.conf.js 文件里面的下面一段代码注释掉（eslint-loader内容）,重新运行.二、报错内容： Newline required at end of file but not found 只需要在 js css 等后面再加一行（空行）就可以了或者将 build 文件下的 webpack.base.conf.js 文件里面的下面一段代码注释掉（eslint-loader内容）,重新运行.三、修改默认端口号 不想使用默认...