一，總體介紹+工具：

Vue.js： 框架
Vue-cli： 腳手架 搭建基本代碼框架
vue-router： 官方插件管理路由
vue-rescource：Ajax通信
Webpack： 構(gòu)建工具
es6+eslint：eslint：es6代碼風(fēng)格檢查工具

思想：

工程化，組件化，模塊化

內(nèi)容：

移動(dòng)端常用的開發(fā)技巧
flex彈性布局
酷炫的交互設(shè)計(jì)

MVVM框架：

V：視圖（DOM）
ViewModel：通訊（觀察者）
Model：數(shù)據(jù)（javascript對象）

二，vue.js介紹

MVVM輕量級框架
數(shù)據(jù)驅(qū)動(dòng)+組件化
社區(qū)完善
借鑒了angular的指令和react的組件化
核心思想：數(shù)據(jù)驅(qū)動(dòng)，組件化

三，vue-cli開啟vuejs項(xiàng)目

1.vue-cli簡介

vue腳手架工具（目錄結(jié)構(gòu)，本地調(diào)試，代碼部署，熱加載，單元測試）

2.安裝運(yùn)行環(huán)境: vue-cli github地址 / 參閱webpack開發(fā)文檔

• 第一步：如果沒有安裝node.js則先安裝: 官網(wǎng)下載地址
• 第二步：安裝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項(xiàng)目
(4) $cd [project-name]；//進(jìn)入項(xiàng)目
(5)$install vue-router YES //配置環(huán)境
   $use eslint to lint your code NO
   $set up unit test  NO
   $setup e2e tests with nightwatch NO
(6) $npm install //安裝

安裝完成的項(xiàng)目目錄

3.項(xiàng)目運(yùn)行

（1）配置es6語法解決報(bào)錯(cuò)；
（2）啟動(dòng)項(xiàng)目

npm run dev

（3）編寫一個(gè)組件標(biāo)簽：創(chuàng)建一個(gè)vue，包括三個(gè)塊（template，script，style）

4.項(xiàng)目文件目錄

build: webpack配置相關(guān)
config: 項(xiàng)目配置
node_modules：npm安裝的依賴代碼庫
src：存放項(xiàng)目源碼
static：存放第三方靜態(tài)資源
.babelrc：通過插件把es6編譯成es5，stage-數(shù)字，數(shù)字越小包含的插件（預(yù)設(shè)插件，轉(zhuǎn)換插件等）越多
.editorconfig：編輯器的配置
.eslintignore：忽略語法檢查的目錄文件
.eslintrc.js：eslint的配置文件，預(yù)先訂好的規(guī)則或進(jìn)行修改
.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打包 參考教程

四，項(xiàng)目實(shí)戰(zhàn)：頁面骨架開發(fā)

1.組件拆分
2.vue-router 安裝使用：npm install vue-router
3.數(shù)據(jù)運(yùn)算
4.移動(dòng)端組件庫

解決跨域問題：
1.關(guān)閉谷歌瀏覽器；
2.終端運(yùn)行：open -a /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir

五，頁面結(jié)構(gòu)：

1.created：在模板渲染成html或者模板編譯進(jìn)路由前調(diào)用created；初始化某些屬性值，然后再渲染成視圖
mounted：已完成模板已經(jīng)渲染或el應(yīng)對html渲染后；初始化頁面完成后，再對dom節(jié)點(diǎn)進(jìn)行一些需要的操作。
2.結(jié)構(gòu)及生命周期：
模板

<template></template>

腳本

<script>
   export default{
           data(){//數(shù)據(jù)定義
   },
   props:{},//子組件通過props訪問父組件的數(shù)據(jù)
   methods:{},//方法
   created:{},//在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖
   mounted:{},//在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點(diǎn)進(jìn)行一些需要的操作
}
</script>

樣式

<style lang=“l(fā)ess” scoped>
</style>

vue生命周期圖解

六、問題及解決

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
解決方案：在偏好設(shè)置找到j(luò)avascript，把版本調(diào)到es6.

3.lang="stylus" rel="stylesheet/stylus”編譯時(shí)報(bào)錯(cuò)
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