vue+nodejs框架学习1-项目搭建

vue框架
MV*
Model和View绑定，数据驱动，状态管理，组件化
数据驱动：传统的jQuery需要获取DOM节点，通过click事件或者addclass改变DOM节点的内容,DOM和JS是耦合的。vue不关注怎么获取DOM节点，改变DOM节点，只关注怎么将数据放在data里面。
组件化：公共部分抽离出来，可以放到任何一个界面使用。
通过MVVM的数据绑定实现自动同步。
Object.defineProperty()函数模拟双向数据绑定

//-------------------自动触发---------------------------------
 Object.defineProperty(obj,"userName",{
        get: function () {
            console.log("get init ");
        },
        set: function (val) {
            console.log("set init ");
            document.getElementById("uName").innerText = val;
            document.getElementById("userName").value = val;
        }
    });
    document.getElementById("userName").addEventListener("keyup",function (event) {
        // event是一个鼠标事件对象
         obj = event.target.value;
    })

vue项目搭建
1、首先安装好node js
输入 node -v输出版本号，则安装成功
2、为提高效率，装好cnpm淘宝镜像：npm install -g cnpm –registry=https://registry.npm.taobao.org
3、全局安装vue-cli
cnpm install -g vue-cli
4、vue init webpack 项目名

• Vue build ==> 打包方式，回车即可；
• Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；
• Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；
• Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；
• Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；
  5、进入项目文件夹
  npm run dev 运行成功。