一，总体介绍+工具：
Vue.js： 框架
Vue-cli： 脚手架 搭建基本代码框架
vue-router： 官方插件管理路由
vue-rescource：Ajax通信
Webpack： 构建工具
es6+eslint：eslint：es6代码风格检查工具
思想：
工程化，组件化，模块化
内容：
移动端常用的开发技巧
flex弹性布局
酷炫的交互设计
MVVM框架：
V：视图（DOM）
ViewModel：通讯（观察者）
Model：数据（javascript对象）
二，vue.js介绍
MVVM轻量级框架
数据驱动+组件化
社区完善
借鉴了angular的指令和react的组件化
核心思想：数据驱动，组件化
三，vue-cli开启vuejs项目
1.vue-cli简介
vue脚手架工具（目录结构，本地调试，代码部署，热加载，单元测试）
2.安装运行环境: vue-cli github地址 / 参阅webpack开发文档
- 第一步：如果没有安装node.js则先安装: 官网下载地址
- 第二步：安装vue-cli脚手架
(1) $node -v //要求4.0.0版本以上
(2) $sudo npm install -g vue-cli
//或使用淘宝镜像安装,如果提示代理问题，可通过代码清除:$npm config set proxy null
$sudo npm install -g cnpm --registry=https:/ /registry.npm.taobao.org --verbose
(3) $vue init webpack [project-name] //搭建vue项目
(4) $cd [project-name]；//进入项目
(5)$install vue-router YES //配置环境
$use eslint to lint your code NO
$set up unit test NO
$setup e2e tests with nightwatch NO
(6) $npm install //安装
3.项目运行
（1）配置es6语法解决报错；
（2）启动项目
npm run dev
（3）编写一个组件标签：创建一个vue，包括三个块（template，script，style）
4.项目文件目录
build: webpack配置相关
config: 项目配置
node_modules：npm安装的依赖代码库
src：存放项目源码
static：存放第三方静态资源
.babelrc：通过插件把es6编译成es5，stage-数字，数字越小包含的插件（预设插件，转换插件等）越多
.editorconfig：编辑器的配置
.eslintignore：忽略语法检查的目录文件
.eslintrc.js：eslint的配置文件，预先订好的规则或进行修改
.gitigore：git仓库忽略掉输入的文件或者目录
index.html：编码文件
package.json：配置文件
// 下面附上完整的文件目录解析
.
├── build/ # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── test/
│ └── unit/ # unit tests
│ │ ├── specs/ # test spec files
│ │ ├── eslintrc # config file for eslint with extra settings only for unit tests
│ │ ├── index.js # test build entry file
│ │ ├── jest.conf.js # Config file when using Jest for unit tests
│ │ └── karma.conf.js # test runner config file when using Karma for unit tests
│ │ ├── setup.js # file that runs before Jest runs your unit tests
│ └── e2e/ # e2e tests
│ │ ├── specs/ # test spec files
│ │ ├── custom-assertions/ # custom assertions for e2e tests
│ │ ├── runner.js # test runner script
│ │ └── nightwatch.conf.js # test runner config file
├── .babelrc # babel config
├── .editorconfig # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js # eslint config
├── .eslintignore # eslint ignore rules
├── .gitignore # sensible defaults for gitignore
├── .postcssrc.js # postcss config
├── index.html # index.html template
├── package.json # build scripts and dependencies
└── README.md # Default README file
5.webpack打包 参考教程
四，项目实战：页面骨架开发
1.组件拆分
2.vue-router 安装使用：npm install vue-router
3.数据运算
4.移动端组件库
解决跨域问题：
1.关闭谷歌浏览器；
2.终端运行：open -a /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir
五，页面结构：
1.created：在模板渲染成html或者模板编译进路由前调用created；初始化某些属性值，然后再渲染成视图
mounted：已完成模板已经渲染或el应对html渲染后；初始化页面完成后，再对dom节点进行一些需要的操作。
2.结构及生命周期：
模板
<template></template>
脚本
<script>
export default{
data(){//数据定义
},
props:{},//子组件通过props访问父组件的数据
methods:{},//方法
created:{},//在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
mounted:{},//在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
}
</script>
样式
<style lang=“less” scoped>
</style>
六、问题及解决
1.输入vue init wepbpack project-name，提示vue-cli · Failed to download repo vuejs-templates/wepbpack: Response code 404 (Not Found)
解决方案：vue init webpack-simple project-name
2.import decrations are not supported by current javascript version
解决方案：在偏好设置找到javascript，把版本调到es6.
3.lang="stylus" rel="stylesheet/stylus”编译时报错
Error: Module build failed: Error: Cannot find module 'stylus'
解决方案：添加依赖，"stylus": "^0.54.5”,
4.SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
解决方案：安装最新的node.js
