---
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. H5坦克大战之【建造敌人的坦克】

      公司这几天在准备新版本的上线,今天才忙里偷闲来写这篇博客.接着上一篇的"H5坦克大战之[玩家控制坦克移动2]"(http://www.cnblogs.com/zhouhuan/ ...

  2. 几个有趣的WEB设备API（二）

    浏览器和设备之间还有很多有趣的接口, 1.屏幕朝向接口 浏览器有两种方法来监听屏幕朝向,看是横屏还是竖屏. (1)使用css媒体查询的方法 /* 竖屏 */ @media screen and (or ...

  3. Socket聊天程序——服务端

    写在前面: 昨天在博客记录自己抽空写的一个Socket聊天程序的初始设计,那是这个程序的整体设计,为了完整性,今天把服务端的设计细化记录一下,首页贴出Socket聊天程序的服务端大体设计图,如下图: ...

  4. jsp中出现onclick函数提示Cannot return from outside a function or method

    在使用Myeclipse10部署完项目后,原先不出错的项目,会有红色的叉叉,JSP页面会提示onclick函数错误 Cannot return from outside a function or m ...

  5. ES6之变量常量字符串数值

    ECMAScript 6 是 JavaScript 语言的最新一代标准,当前标准已于 2015 年 6 月正式发布,故又称 ECMAScript 2015. ES6对数据类型进行了一些扩展 在js中使 ...

  6. CSS margin详解

    以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...

  7. SAP CRM 将组件整合至导航栏中

    到现在,我们已经可以让组件独立地显示.我们只是运行它.让它显示在Web UI中.让我们把组件整合进导航栏,使我们可以在正常登录Web UI时访问它. 步骤一: 为你的UI组件主窗体创建一个内向插件. ...

  8. 给缺少Python项目实战经验的人

    我们在学习过程中最容易犯的一个错误就是:看的多动手的少,特别是对于一些项目的开发学习就更少了! 没有一个完整的项目开发过程,是不会对整个开发流程以及理论知识有牢固的认知的,对于怎样将所学的理论知识应用 ...

  9. Spring MVC注解开发入门

    注解式开发初步 常用的两个注解: @Controller:是SpringMVC中最常用的注解,它可以帮助定义当前类为一个Spring管理的bean,同时指定该类是一个控制器,可以用来接受请求.标识当前 ...

  10. SQL Server的AlwaysOn错误19456和41158

    SQL Server的AlwaysOn错误19456和41158 最近在公司搞异地数据库容灾,使用AlwaysOn的异地节点进行数据同步,在搭建的过程中遇到了一些问题 软件版本 SQL Server2 ...