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

8.vuex（熟练使用）

状态管理
教程：https://vuex.vuejs.org/zh-cn/

9.axios（熟练使用）

异步请求
Promiss：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000
axios：http://www.jianshu.com/p/df464b26ae58

10.Mint UI（熟练使用）

基于 Vue.js 的移动端组件库
github：https://github.com/ElemeFE/mint-ui
官网：http://mint-ui.github.io/#!/zh-cn

11.Vue devtools（熟练使用）

vue调试工具
github：https://github.com/vuejs/vue-devtools#vue-devtools

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 入口文件