Vue.js 介绍及其脚手架工具搭建

icon

vue.js介绍 （MVVM、核心思想）

vue.js 是一套轻量级的 MVVM 的渐进式框架。Vue 的核心库只关注视图层。
vue.js 的官方网址是：点我,我是网址

MVVM 介绍

MVVM 全称是 Model - ViewModel - View 的简称。

Model 对应的是数据，JavaScript 对象。
View 对应的是视图，也就是 DOM。
ViewModel 是连接 View 和 Model 的中间件，在 MVVM 下，View 和 Model 是不能直接通讯的，当数据变化（用户操作视图），ViewModel 都能监听到变化，实现了双向绑定。

热门的 MVVM 框架有：vue.js react.js angular.js

MVVM 应用场景

1、针对具有复杂交互逻辑的前端应用。
2、提供基础的架构抽象。
3、通过 Ajax 数据持久化，不需要重新刷新页面，重新解析 DOM，保持前端的用户体验。

vue.js 核心思想

1、数据驱动。
DOM 是数据的一种自然映射。

数据响应原理（ TODO ）

2、组件化思想。（扩展 HTML 元素，封装可重用的代码）

组件设计原则

1、页面上每个独立的可视/可交互区域视为一个组件。
2、每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护。
3、页面不过是组件的容器，组件可以嵌套自由组合成完整的页面。

vue-cli 脚手架工具

vue-cli 介绍

工地上，脚手架是帮助工人作业搭建的架子。 vue-cli 可以帮助我们写好 vuejs 代码的工具，vue-cli 可以做什么：
1、目录结构
2、本地调试
3、代码部署
4、热更新
5、单元测试 （ESlint）

安装指令

npm 下载地址：点我，我是地址

安装vue-cli：npm install -g vue-cli
初始化项目：vue init webpack 项目名
安装依赖：npm install

（npm 版本需要注意：npm: 2.14.20 should be >= 3.0.0，可以事先升级 node 为最新版本，直接下载 dmg 进行安装替换即可）

运行：npm run dev

运行项目

默认情况下，浏览器打开 http://localhost:8080，就可以看到脚手架项目初始化的效果了。

项目文件介绍

webPack 打包

1、webPack 是什么？
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。

webpack的配置及其项目路径介绍（#TODO）

开发工具

本次项目使用的开发工具是： webStorm , 具体配置方法可以参考：
1、添加 vue.js for webStorm 插件。

webStorm --> Preferences -->plugins-->Browse repositories, 搜索vue.js,点击 install 即可。

2、添加 html 模版支持，让 webStorm 识别 vue 后缀的文件。

找到这个地方，找到上面的html类型，将*.vue添加进其中。确定的时候会提示被占用了，要把那个清除掉，继续就OK了。
这样系统会把.vue文件看成html，也就能正确识别里面的