vue项目实战

vue.js

    技术栈、当前最火的MVVM框架
    数据驱动、组件化
    轻量、简洁欸、高效
    
    需求分析
    脚手架工具
    数据mock
    架构设计
    代码编写
    自测
    编译打包
    
    UI标注
    真实数据演示
    
    架构设计
    组件抽象
    模块拆分
    代码风格统一
    JS变量命名规范
    CSS代码规范
    
    tudomvc

    vue-cli        脚手架    搭建基本代码框架
    vue-router    官方插件管理路由
    vue-resource    ajax通信
    Webpack    构架工具    
    es6 + eslint     eslint:es6代码风格检查工具
    js库better-scroll
    
    工程化、组件化、模块化的开发方式
    
    flex弹性布局
    css    stickyfooter
    酷炫的交互设计
    
    vue.js
    
        就浏览器组件淘汰，移动端需求增加 
        前端交互越来越多，功能越来越复杂
    
        后台mvc 向rest api + 前端 mv*迁移
        
    MVVM框架
        
        针对具有复制交互逻辑的前端应用
        
        提供基础的架构抽象
        
        通过ajax数据持久化，保证前端用户体验
        
        view==视图==DOM----- viewmodel==通讯==观察者-------- model==数据==javascript对象
        
    
什么是vue.js
        
        2014开源
            
        他是一个轻量级mvvm框架
        数据驱动+组件化的前端开发
        Github超过25k+的str数，社区完善、issue、论坛
            
    mvvvm  angular.js    react.js    vue.js    
    
        更易上手，学习曲线平稳    
        更轻量，gzip后大小只有20K+
        吸取俩家之长，借鉴了angular的指令和react的组建化
        
    数据驱动
    
        DOM是数据的一种自然映射
        
        DOM Listeners
        directives
        对数据双向绑定
        
        Watcher    指令
                
    组件化
    
        页面上每个独立的可视/可交互区域视为一个组件
            
        每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护
        
        页面不过是组件容器，组件可以嵌套自由组合形成完整的页面
        
Vue-cli Vue的脚手架工具

    安装    

        node -v  （v4.4.5）
        
        npm install -g vue-cli
        
    查看
        
        vue list
        
    创建一个项目
            
        vue init webpack sell
        
        name、description、y、Standard、n、n
        
        ls
        
        cd project-name
        npm install
        npm run dev
        
    node_modules
    
    <template>
        <h1>{{msg}}</h1>
    </template>
    
    <script>
    
    </script>
        
    <style>
    
    </style>