vue.js学习总结（1）

提到Vue.js,都会提到MVVM架构，那么什么是MVVM呢？MVVM可以拆分成：View — ViewModel — Model三部分，如下图：
imgName
那么我们怎么理解MVVM呢？
上图中，左侧的View相当于我们的DOM内容，我们所看到的页面视图，右侧的Model相当于我们的数据对象，比如一个对象的信息：

{
name:”张三”,
age:21,
}

而中间的监控者就负责监控两侧的数据，并相对应地通知另一侧进行修改。比如：你在Model层中修改了name的值为：“李四”，那么View视图层显示的“张三”也会自动变成了“李四”，而这个过程就是有ViewModel来操作的，不需要你手动地去写代码去实现（你不用再手动操作DOM了）。

那么如何快速创建一个vue.js应用呢？

1.创建应用

使用vue-cli工具配合webpack构建工具创建，依次执行如下命令：

//安装vue-cli  (若未安装vue-cli)
    cnpm install --global vue-cli
//创建应用myproject
    vue init webpack myproject
//安装所需node依赖包
    cd myproject
    npm init

2.运行应用(dev环境)

在项目目录下，执行命令npm run dev,直到控制台显示Your application is running here: http://localhost:8080，表示应用创建成功，访问http://localhost:8080即可查看。

3. 目录介绍

projectName
    |--build
           |--build.js(生产环境构建) / webpack.back.conf.js(配置webpack，增加Jquery) / webpack.dev.conf.js(添加模拟API返回数据)
    |--config
           |--index.js / dev.env.js / prod.env.js / test.env.js        (index.js配置静态路径相对位置，绑定主机指定IP、端口，关闭Eslint检测useEslint: false，）
    |--src
           |--assets
                |--css / fonts / image / js        (静态文件目录)
           |--components
                |--自建vue文件        (由<template><script><style>三部分组成）
           |--router
                |--index.js            (路由配置，路由模式，history模式去掉url中的#号)
           |--App.vue                (根组件，配置router-view，根据路由不同展示不同组件)
           |--main.js                (引入vue框架，定义vue实例，绑定vue实例(#el)到index.html的DOM元素中去，引入根组件，引入路由）
    |--index.html                    (主页内容)

4. 应用编译

在项目目录下，执行命令npm run build,编译完成后，在应用目录下生成dist文件夹，部署时只用到该文件夹即可。
默认生成的index.html在dist根目录下，若使用Nginx部署应用，则只需要配置如下：

location ~ / {
    root /path/to/dist;                    // 将/path/to/dist修改为dist实际路径即可
    index login.html index.html;
    try_files $uri $uri/ /myproject/;
}

若需要将站点访问的uri加上一个统一前缀，比如加上/myproject后，http://localhost:8080/login.html变成http://localhost:8080/myproject/login.html，此时如果直接访问则会提404，那么该如何处理呢？
最开始想到的办法是，修改nginx.conf，将location ~ /修改为location ~* /myproject/，结果发现实际请求的本地路径前面都会加上/myproject，所以这种方式不行。后来通过实践，要实现这种要求，可以有两种方式：
a) 在dist目录下新增一个目录myproject,并将index.html移动到这个目录下，这个时候访问就正常了。
b) 修改项目路径下/config/index.js文件，修改build:index里面的../dist/index.html为../dist/project/index.html