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 [《前后端分离的思考与实践》]
### 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工具：
2. Sublime Text3安装 安装插件：EditorConfig、Vue Syntax Highlight
3. chrome插件 安装 (调试vue)
4. [抓包工具 fiddler]
5. vue的脚手架
### vuejs 主要参考库：
-
-
-
-
-
### 其他参考库：
-
-
-
-
-
-
### 一些开源的插件：
-
-
:http://blog.jobbole.com/65513/
:https://www.getlantern.org/
:https://packagecontrol.io/installation
:https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
:https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb
:https://www.telerik.com/download/fiddler
:https://github.com/vuejs/vue-cli
:http://cn.vuejs.org/guide/
:http://vuex.vuejs.org/zh-cn/index.html
:http://router.vuejs.org/zh-cn/index.html
:https://github.com/vuejs/vue-resource
:http://yuche.github.io/vue-strap
:http://v3.bootcss.com
:%20http://eslint.org/
:%20http://webpack.github.io/docs/
:http://es6.ruanyifeng.com/
:http://babeljs.cn/
:https://nodejs.org/en/docs/
:http://www.zhihu.com/question/38213423
:%20https://github.com/vuejs/awesome-vue#libraries--plugins
页:
[1]