vue.js 开发生态总结
---
title: Vue 1.0 的技术栈
date: 2016-09-26 00:48:50
tags:
category:
---
## vuejs概述
Vue.js是用于构建交互式的Web界面的库。它提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。
结合node.js 可以实现前后端开发从物理上的分离。使前端负责View和Controller层，后端负责数据接口，数据存储。
感兴趣可以看淘宝ued [《前后端分离的思考与实践》][1]
### vuejs有以下几个特点
#### 1.使用简单, 如：
<body>
<div id="app">
<p>{{ note }}</p>
<input type="text" v-model="note">
</div>
</body>
var vm = new Vue({
el: '#app',
data: {
note: ''
}
})
#### 2.外观优雅
`<a @click="doSomething"></a>`
`<a :href="url"></a> `
`<a @click.stop="doSomething"></a>` //阻止单击事件冒泡
`<input @keyup.enter="submit">` //只在按下回车键的时候触发事件
`<input v-model="msg" lazy>` //lazy: 在'change'而不是'input'事件中更新数据
#### 3.小巧灵活
gzip压缩后只有25.11kb。
松耦合，和路由模块, 网络请求模块，数据模块 等相分离，可单独使用。
#### 4.功能强大
- 模块化，可以直接使用ES6的模块化功能，再结合Webpack进行相应打包是目前最热门的方案。
- 组件化， 通过将页面上某一组件的html、CSS、js代码放入一个.vue的文件中进行管理可以大大提高代码的维护性。
- 路由，结合 vue-router 可以实现各个组件的按需加载，轻松构建单页应用。如：
'*': {component: require('./components/not-found')}, //not found handler
'/': {component: require('./components/index')},
'/login': {component: require('./components/login')},
'/field': {component (resolve) { require(['./components/defconfig/field'], resolve) }},
'/stat': {component (resolve) { require(['./components/defconfig/stat'], resolve) }}
## 使用
1. 装 node 版本: v6.3.0
2. 装 npm 版本: 3.10.3
3. 运行命令: npm install 安装插件 、npm run dev 运行项目
## 相关工具
1. FQ工具： [lantern][2]
2. Sublime Text3 安装 [Package Control][3] 安装插件：EditorConfig、Vue Syntax Highlight
3. chrome插件 安装 [Vue.js devtools][4](调试vue) [Google翻译插件][5]
4. [抓包工具 fiddler][6]
5. [vue-cli][7] vue的脚手架
### vuejs 主要参考库：
- [vue][8]
- [vex][9]
- [vue-router][10]
- [vue-resource][11]
- [vue-strap][12]
### 其他参考库：
- [bootstrap][13]
- [flint][14]
- [webpack][15]
- [es6][16]
- [babel][17]
- [node.js][18]
### 一些开源的插件：
- [http://www.zhihu.com/question/38213423][19]
- [https://github.com/vuejs/awesome-vue#libraries--plugins][20]
[1]: http://blog.jobbole.com/65513/
[2]: https://www.getlantern.org/
[3]: https://packagecontrol.io/installation
[4]: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
[5]: https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb
[6]: https://www.telerik.com/download/fiddler
[7]: https://github.com/vuejs/vue-cli
[8]: http://cn.vuejs.org/guide/
[9]: http://vuex.vuejs.org/zh-cn/index.html
[10]: http://router.vuejs.org/zh-cn/index.html
[11]: https://github.com/vuejs/vue-resource
[12]: http://yuche.github.io/vue-strap
[13]: http://v3.bootcss.com
[14]: %20http://eslint.org/
[15]: %20http://webpack.github.io/docs/
[16]: http://es6.ruanyifeng.com/
[17]: http://babeljs.cn/
[18]: https://nodejs.org/en/docs/
[19]: http://www.zhihu.com/question/38213423
[20]: %20https://github.com/vuejs/awesome-vue#libraries--plugins
vue.js 开发生态总结的更多相关文章
- 用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- windows下vue.js开发环境搭建教程
这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...
- 基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+
什么是ThinkSNS+ ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+.新的产品名 ...
- electron-vue：Vue.js 开发 Electron 桌面应用
相信很多同学都知道 Electron 可以帮助开发人员使用前端技术开发桌面客户端应用,今天介绍的 electron-vue 框架是一套基于 Vue.js 开发 Electron 桌面应用的脚手架,该项 ...
- MPVUE - 使用vue.js开发微信小程序
MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...
- Vue.js随笔一(Webpack + Vue.js开发准备，含VNM、NPM、Node、Webpack等相关工具)
想入门工具是必须的,这一章将向大家带来vue.js相关的程序安装步骤. ①首先你需要有一个NVM(一个非常好用的Node版本管理器): 1.NVM下载地址:https://github.com/cor ...
- Mac安装vue.js开发环境
Mac安装vue.js开发环境 DannyHooDanny的专栏订阅 一.vue.js开发环境 二.初始化一个vue.js项目 三.vue.js项目打包部署 本来以为在Mac上搭建vue.js的环境挺 ...
- vue.js开发环境搭建以及创建一个vue实例
Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...
- 分享一个使用 vue.js 开发的网站
点我 惠淘党 照着文档和google开发,只花了一个多星期.依赖包如下 { "name": "vue-htd", "version": &q ...
随机推荐
- 动画requestAnimationFrame
前言 在研究canvas的2D pixi.js库的时候,其动画的刷新都用requestAnimationFrame替代了setTimeout 或 setInterval 但是jQuery中还是采用了s ...
- iOS---iOS10适配iOS当前所有系统的远程推送
一.iOS推送通知简介 众所周知苹果的推送通知从iOS3开始出现, 每一年都会更新一些新的用法. 譬如iOS7出现的Silent remote notifications(远程静默推送), iOS8出 ...
- video.js
1.github地址 2.常用API: class : video-js: video-js应用视频所需的风格.js功能,比如全屏和字幕. vjs-default-skin: vjs-default- ...
- android计算每个目录剩余空间丶总空间以及SD卡剩余空间
ublic class MemorySpaceCheck { /** * 计算剩余空间 * @param path * @return */ public static String getAvail ...
- React Native环境配置之Windows版本搭建
接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...
- Android开发案例 – 在AbsListView中使用倒计时
在App中, 有多种多样的倒计时需求, 比如: 在单View上, 使用倒计时, 如(如图-1) 在ListView(或者GridView)的ItemView上, 使用倒计时(如图-2) 图-1 图-2 ...
- Greenplum 的分布式框架结构
Greenplum 的分布式框架结构 1.基本架构 Greenplum(以下简称 GPDB)是一款典型的 Shared-Nothing 分布式数据库系统.GPDB 拥有一个中控节点( Master ) ...
- SVN版本冲突，导致出现Files 的值“ < < < < < < < .mine”无效
只要根据错误提示,找到相应文件夹下的\obj\Debug文件夹下的 相应名字.csproj.FileListAbsolute.txt, 打开并删除含有'<<<<<< ...
- 微信硬件H5面板开发(二) ---- 实现一个灯的控制
在第一节中讲解了openApi的调用,这一篇讲一下如何实现一个灯的控制.就用微信提供的lamp例子来做,将代码扒下来(实在是没办法,没有示例),整合到自己的项目中.lamp源码:http://file ...
- 快速Android开发系列网络篇之Retrofit
Retrofit是一个不错的网络请求库,用官方自己的介绍就是: A type-safe REST client for Android and Java 看官网的介绍用起来很省事,不过如果不了解它是怎 ...