前端框架Vue系列
文章平均质量分 79
JesusAllen30
前端开发工程师。语雀文档https://www.yuque.com/allenzhoujiawei
展开
-
前端框架Vue(5)——Vue+Echarts
Echarts 是数据可视化中佼佼者!推荐大家可以玩一玩,非常实用! 如果第一次接触Echarts的同学,这边有我以前写过的一篇入门:浅谈Echarts3.0 Vue+Echarts 现附上代码:<template> <!--为echarts准备一个具备大小的容器dom--> <div id="main" style="width: 600px;height: 400px;"></div原创 2017-04-05 19:55:23 · 28491 阅读 · 4 评论 -
前端框架Vue(16)——vue-i18n ,vue项目中如何实现国际化
一、前言 趁着10月的最后一天,来写一篇关于前端国际化的实践型博客。国际化应该都不陌生,就是一个网站、应用可以实现语言的切换。 在这就不谈原理,只说说如何实现中英文的切换。做技术的总得先把 demo 做出来嘛。二、demo 场景需求分析需求很简单,左上角 ‘’网易云音乐‘’就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本。切换成英文版本:三、实现国际化 首先,我开发是以原创 2017-10-31 21:12:38 · 26450 阅读 · 20 评论 -
前端框架Vue(4)——vue-cli 目录结构
1、vue-cli 项目结构图2、目录分析目录/文件说明bulid项目构建的一些 js 文件config配置文件项,index.js 比较重要,打包上线需要修改配置dist项目打包后的文件node_modulesnpm安装包位置src项目的开发目录assets:图片、字体等资源 components:公共组件部分config:开发分支和生产分支的切换配置,以及 fetch.js 对于前原创 2017-04-05 10:32:18 · 5438 阅读 · 0 评论 -
前端框架Vue(13)——vue 中如何对公共css、 js 方法进行单文件统一管理,全局调用
1、前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践。 模块化、组件化、工程化的开发体验非常好。良好的 api,优雅的设计,对于工程师非常友好。 但是由于模块比较多,我对于每个模块分配了不同的组件,发现一个项目中有许多相同的方法, 在每个组件中我都需要进行重复的编写。 所以,我希望能够将这些公共的方法,抽离出来放到同一个 js 中,原创 2017-08-04 16:32:50 · 18178 阅读 · 4 评论 -
前端框架Vue(15)——vue-cli 仿网易云音乐 Demo,环境搭建到开发 Vue 全家桶练手项目
一、前言 在这个 vue 系列的第一篇文章,我写过是 vue-cli-simple 脚手架的环境搭建。前段时间,也刚好给公司做了一个后台管理系统的产品,用的就是 vue-cli-simple。 一个月的时间将系统从无到上线,组件化、模块化开发的非常快速、可读性、复用性,整理架构清晰,易管理、维护。 所以,这次利用 vue-cli 完整版来实践一下。那么这个 simple 在哪呢?其实,simpl原创 2017-09-08 00:25:52 · 5242 阅读 · 0 评论 -
前端框架Vue(14)—— 利用 vue 过渡效果(transition)+定时器 实现轮播图通用组件
序论: 轮播图 相信都不会陌生,很多的网站都会有,而且实现的方式也是千变万化,可以利用封装好的 UI 库 (bootstrap),也可以原生的 JS 进行编写。但是其中,动画(transition)和定时器都是必不可少的。本文就是利用 vue 自带的 transition 动画过渡效果加上定时器编写轮播图。效果: 1、功能分析。从上面的效果图中看,有四个基本功能:1、自动的轮播的功能;原创 2017-08-24 16:49:44 · 15137 阅读 · 0 评论 -
前端框架Vue(12)——如何将 vue-cli 项目打包压缩(npm run build)后放到服务器
当我们将 vue 项目完成后,面临的就是如何将项目进行打包上线,放到服务器中。我使用的是 vue-cli(simple) 脚手架,所以就讲一下如何将项目进行打包,并放到 tomcat 上。 如果是 vue-cli (非 simple 脚手架),这篇文章可能有点帮助。地址链接:vue-cli 如何打包上线 先来描述一下期间遇到的问题有哪些:1、打包后将 dist 文件夹和 index.html原创 2017-07-20 17:17:38 · 24673 阅读 · 0 评论 -
前端框架Vue(10)——vuex 状态管理
1、Vuex 是什么? Github vue-spa-demo 项目地址 在使用 Vue 框架做单页面应用时,我们时常会遇到传值,组件公用状态的问题。(子父间传值文章传送门) ,如果是简单的应用,兄弟组件之间通信还能使用 eventBus 来作为中介。但是一旦应用比较庞大,那状态将会变得难以维持管理。 Vue 为我们提供了进行大型状态管理的 Vuex,类似 Flux 。Vuex 采用了集中式存原创 2017-05-11 17:34:11 · 6257 阅读 · 4 评论 -
前端框架Vue(6)——Vue 介绍和相关操作
*本博客会持续更新1、VueJS 浏览器的兼容性 2、如何获得当前点击的元素(整体)methods: { showDeleteIcon:function($event){ console.log(event.currentTarget); } } 3、如何获得当前点击的元素(个体)showDele原创 2017-04-11 17:38:47 · 2016 阅读 · 0 评论 -
前端框架Vue(3)—— vue.resource 、axios、ajax 异步通信
vue 中如何支持异步请求1、vue 支持开发者引入 jquery 使用 $.ajax()2、vue.resource( 2.0后不再更新)1、 npm 安装 vue-resource npm install vue-resource2、 main.js 中引入 import VueResource from 'vue-resource' Vue.use(VueResource)3、使用this原创 2017-03-31 15:57:37 · 6570 阅读 · 0 评论 -
前端框架Vue(1)——vue(脚手架) 推荐开发环境(转)
首先我认为你已经安装并且会使用node.js 和 npm1、安装淘宝镜像npm install -g cnpm --registry= https://registry.npm.taobao.org2、全局安装webpack1、安装了淘宝镜像npm install webpack -g2、没安装cnpm install webpack -g3、安装vue脚手架npm install vue-cli转载 2017-03-30 17:11:48 · 4494 阅读 · 0 评论 -
前端框架Vue(2)——Vue-Router 路由跳转
1、最简单:html+js全在一个文件中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态路由匹配</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://u原创 2017-03-30 18:19:16 · 7025 阅读 · 2 评论 -
前端框架Vue(8)——子父组件的传参通信
父子间的通信传值是 vue 中的一个重要的内容和掌握点。 *vue2.0 推荐使用 vuex,全局进行状态管理。(后面再讲) 首先讲一下遇到的 需求背景: 解释一下: 组件之间的关系: <div id="app"> <loginPage v-on:showState="changeState" v-if="loginShow" :fromParent="fromParent"><原创 2017-04-14 15:26:40 · 17320 阅读 · 0 评论 -
前端框架Vue(7)——Vue+ElementUI:简易login登录框重构
目标:Vue 来实现一个简易的登录框,有 用户名(user)和 密码(password),具备简单的校验。 使用的UI框架:ElementUI vue 登录框的优点: 无须操作 dom,只需建立数据模型,自动渲染。双向数据绑定。 登录框的解决点:数据如何绑定登录校验 先上代码:<template><div class="dialog"> <div class="logi原创 2017-04-14 14:32:57 · 22782 阅读 · 6 评论 -
前端框架Vue(11)——Vue+表单验证 VeeValidate 实践
这次来讲一下表单验证插件 VeeValidate,那为什么要结合 Vue 来讲呢?来看一下 github 上的图片就明白了! 为 Vue 而来的!不清楚是不是 Vue 的官方表单验证插件。 废话不多说直接显示效果:===============================分隔线================================== 为什么需要用表单验证插件,想想自己重写过几次原创 2017-06-23 17:13:57 · 59937 阅读 · 3 评论 -
前端框架Vue(9)——百度地图使用
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持PC端和移动端基于浏览器的地图应用开发,且支持HTML5特性的地图开发。 该套API免费对外开放。自v1.5版本起,您需先申请密钥(ak)才可使用,接口无使用次数限制。 地址传送门:http://lbsyun.baidu.com/index.php?tit原创 2017-04-27 20:22:52 · 36311 阅读 · 16 评论