VUE2.0 起步

什么是VUE

Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
参考：https://www.zhihu.com/question/51907207

MVVM
虚拟DOM
双向数据绑定
单文件组件

学习VUE我们要知道什么

1.npm （基本使用）

npm是随node.js一起安装的包管理工具。可安装淘宝镜像。
安装：http://www.runoob.com/nodejs/nodejs-install-setup.html
使用：http://www.runoob.com/nodejs/nodejs-npm.html

2.ES6 （熟练使用）

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目
标，是使得JavaScript语言可以用来编写复杂下的一大型应用程序，成为企业级开发语言。
参考：《ECMAScript6入门优化版.pdf》
线上教程：http://es6.ruanyifeng.com/

3.babel (了解)

一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
官网：http://babeljs.io/

4.webpack（熟悉）

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

5.vue-loader （了解）

单文件组件转换为 JavaScript 模块
教程：https://vue-loader.vuejs.org/zh-cn/

6.vue（熟练使用）

教程：https://cn.vuejs.org/

7.vue-router（熟练使用）

单文件组件应用官方推荐路由
教程：https://router.vuejs.org/zh-cn/index.html

12. vue-cli（了解）

官方命令行工具，可用于快速搭建大型单页应用
github : https://github.com/vuejs/vue-cli

13. stylus（熟练使用）

14.编辑器

webstorm

注意热重载设置：setting->system setting->Synchronization->Use "safe write" 不勾选
设置Vue File模板：setting->Editor->File and Code Templates

安装VUE

1.直接<script>引入

2.npm安装

cnpm install vue

vue-cli初始化一个应用

1. 初始化

# 全局安装vue-cli
cnpm install --global vue-cli

# 创建一个基于 webpack 模板的新项目
vue init webpack my-vue

cd my-vue

# 安装依赖
cnpm install

# 启动应用
npm run dev

# 打包应用
npm run build

2.目录结构介绍

build 环境配置及操作脚本
config 配置文件
src 资源文件
- assets 静态资源
- components 单文件组件
- router 路由配置
- App.vue 顶层组件
- main.js 入口文件