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