---
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 开发生态总结的更多相关文章

  1. 用Vue.js开发微信小程序：开源框架mpvue解析

    前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...

  2. windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...

  3. 基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+

    什么是ThinkSNS+ ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+.新的产品名 ...

  4. electron-vue：Vue.js 开发 Electron 桌面应用

    相信很多同学都知道 Electron 可以帮助开发人员使用前端技术开发桌面客户端应用,今天介绍的 electron-vue 框架是一套基于 Vue.js 开发 Electron 桌面应用的脚手架,该项 ...

  5. MPVUE - 使用vue.js开发微信小程序

    MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...

  6. Vue.js随笔一(Webpack + Vue.js开发准备，含VNM、NPM、Node、Webpack等相关工具)

    想入门工具是必须的,这一章将向大家带来vue.js相关的程序安装步骤. ①首先你需要有一个NVM(一个非常好用的Node版本管理器): 1.NVM下载地址:https://github.com/cor ...

  7. Mac安装vue.js开发环境

    Mac安装vue.js开发环境 DannyHooDanny的专栏订阅 一.vue.js开发环境 二.初始化一个vue.js项目 三.vue.js项目打包部署 本来以为在Mac上搭建vue.js的环境挺 ...

  8. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  9. 分享一个使用 vue.js 开发的网站

    点我 惠淘党 照着文档和google开发,只花了一个多星期.依赖包如下 { "name": "vue-htd", "version": &q ...

随机推荐

  1. 01.SQLServer性能优化之---水平分库扩展

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 第一次引入文件组的概念:http://www.cnblogs.com/dunitian/ ...

  2. Consul 服务注册与服务发现

    上一篇:Mac OS.Ubuntu 安装及使用 Consul 1. 服务注册 对 Consul 进行服务注册之前,需要先部署一个服务站点,我们可以使用 ASP.NET Core 创建 Web 应用程序 ...

  3. 在开启DRS的集群中修复VMware虚拟主机启动问题

    通过iSCSI方式连接到ESXi主机上的外挂存储意外失联了一段时间,导致部分虚拟主机在集群中呈现出孤立的状态,单独登陆到每台ESXi上可以看到这些虚拟主机都变成了unknow状态.因为有过上一次(VM ...

  4. Asp.net Core准备工作

    1.安装环境 安装.Net Core SDK 安装VS2015 Update3 安装DotNetCore.1.0.1-VS2015Tools.Preview2.0.2.exe 2.新建Core工程 项 ...

  5. ntp

    一: 在一台可以连接外网的服务器A上配置ntp: 配置  /etc/ntp.conf  文件: server 202.120.2.101            # local clock (LCL) ...

  6. NPM如何更新到最新版

    参考文章--npm更新到最新版本的方法 其实我们可以这样,随便新建一个文件夹例如:F:\test.按着"shift"键,右键该文件夹,选择"在此处打开命令窗口(W)&qu ...

  7. transient关键字的用法

    本篇博客转自 一直在路上 Java transient关键字使用小记 1. transient的作用及使用方法 我们都知道一个对象只要实现了Serilizable接口,这个对象就可以被序列化,Java ...

  8. http协议（十一）http与https

    一.http的缺点 之前有介绍过http协议相关的一些知识,http是相当优秀和方便的,但它也有缺点,主要不足表现在如下几个方面: △ 通信使用明文(不加密),内容可能会被窃听 △ 不验证通信方的身份 ...

  9. 如何开启MySQL 5.7.12 的二进制日志

    1. 打开/etc下的my.cnf文件 2. 编辑它,添加内容: log_bin=binary-log   #二进制日志的文件名 server_id=1  #必须指定server_id,这是MySQL ...

  10. 基于注解的Spring多数据源配置和使用

    前一段时间研究了一下spring多数据源的配置和使用,为了后期从多个数据源拉取数据定时进行数据分析和报表统计做准备.由于之前做过的项目都是单数据源的,没有遇到这种场景,所以也一直没有去了解过如何配置多 ...