Intro

Intro

数据驱动的组件，为现代化的Web界面而生。

• 官网
• Github
• 资源

Intro

Demo

Demo

• 源码
• 线上效果
• 技术栈
  • vue
  • vue-router
  • vue-resource
  • vux
  • Echarts 3.0
  • webpack

扫码体验

代码组织结构

|-- build <—— webpack编译相关文件
|-- config <—— 配置文件
|-- index.html <—— 主入口文件
|-- package.json
|-- README.md
`-- src
    |-- main.js <—— 主体js，调用vue及vue相关服务
    |-- app.vue <—— 应用主入口
    |-- assets <—— 静态资源目录，如图片，类库css文件等
    |   |-- avatar-man.png
    |-- components <—— 页面组件
    |   |-- medical-log.vue
    |   |-- medical-service.vue
    |   |-- medical-word.vue
    |   |-- rank-dept-chart.vue
    |   |-- rank-disease-chart.vue
    |   |-- rank-doc-chart.vue
    |   |-- rank-form.vue
    |   |-- rank-hosp-chart.vue
    |   `-- user-card.vue
    |-- router-config.js
    `-- views <—— 子页面view
        |-- personal.vue
        |-- rank.vue
        `-- service.vue

页面关系图

官方推荐脚手架

Vue-cli

Vue.js主要特性

• 双向绑定
• 条件渲染
• 计算属性
• 方法及事件处理器
• 组件及组件通信

融合其他类库

• 路由（vue-router）
• 网络请求（vue-resource）
• 数据可视化（Echarts 3.0）

More

• vuex
• 组件拆分
• 懒加载
• 各种优化

Others

• 对比其它框架
• Vue和React的使用场景和深度有何不同？
• ARV渲染实现比较

Vue vs Angular vs React

总结

各有所长亦各有所短

• Vue：不需要兼容IE9-，应用场景相对简单，且要求效率的场景
• Angular：对性能要求不高，内部平台及中等复杂应用场景
• React：中大型、复杂、长线应用，且需大量成本投入的场景