一、搭建vue的開發環境
(1)安裝node.js
(2) 安裝腳手架工具，官方命令行工具
npm install --global vue-cli / cnpm install --global vue-cli
(3) 創建項目
vue init webpack vue-demo01
創建過程 看到 ESlint 字樣，輸入n ，不開啓代碼檢查，否則代碼多少空格都會報錯
cd vue-demo01
安裝依賴
cnpm install / npm install
npm run dev / cnpm run dev
安裝 cnpm
另一種創建項目的方法
vue init webpack-simple vuedemo02
可以省去繁瑣的步驟，並且沒有Eslint 語法檢查
vs code 安裝 vue2.0 插件
（4）vue-cli 3.0
如果想使用vue-cli 3.0 創建項目可以先刪除 原來的vue-cli 2.0
cnpm uninstall -g vue-cli
npm install -g @vue/cli
創建項目
vue create hello-world
運行：cnpm run serve
編譯 ：cnpm run build
圖形創建工具
vue ui
二、使用vue-resource請求數據
vue官方數據請求工具
（1）安裝 vue-resource 注意： 要加--save ，這樣package.json中就會加上依賴
cnpm install vue-resource --save
（2）main.js 中導入
import VueResource from 'vue-resource'
Vue.use(VueResource)
(3)在組件中直接使用
var api = 'https://www.baidu.com/'
this.$http.get(api).then((response)=>{
alert(response)
this.list = response.body.result
},function(error){
})
三、使用axios請求數據
安裝 axios
cnpm install axios --save
axios 是第三方的依賴，所以不需要使用Vue.use()方法
直接在想使用axios 的組件中導入使用即可
import Axios from 'axios'
var api = 'https://www.baidu.com/';
Axios.get(api).then(function(response){
alert(response)
}).catch(function(error){
alert(error)
})
Axios.get(api).then((response)=>{
this.list = response.body.result
}).catch((error)=>{
alert(error)
})
建議function 改成箭頭函數，免得this的指向有問題
四、fetch-jsonp 請求數據
五、父子組件
父組件傳值到子組件
（1）父組件調用子組件的時候，綁定動態屬性
<v-header :title="title" :run="run"></v-header>
（2）子組件中通過 props 接收父組件傳來的值
父組件主動獲取子組件的屬性
（1）調用子組件的時候定義一個ref
<v-header :title="title" :run="run" ref="header"></v-header>
<button @click="getSubMsg()">主動獲取子組件屬性或者方法</button>
（2）在父組件裏面通過
this.$ref.header.屬性
this.$ref.header.方法
子組件主動獲取父組件的屬性
(1) 直接在子組件中使用
<button @click="getParent()">獲取父組件的屬性或者方法</button>
六、非父子組件傳值
（1）新建一個js文件，然後引入vue，實例化vue，最後暴露出這個實例
import Vue from 'vue'
var VueEvent = new Vue()
export default VueEvent
（2）在要廣播的地方引入剛纔定義的實例
import VueEvent from '../modal/VueEvent'
<button @click="sendMq()">首頁廣播事件</button>
（3）通過VueEvent.$emit('名稱','數據')
<button @click="sendMq()">首頁廣播事件</button>
sendMq(){
VueEvent.$emit('to-news',this.title)
}
（4）在接收數據的地方通過VueEvent.$on('')
import VueEvent from '../modal/VueEvent'
mounted() {
VueEvent.$on('to-news',function(data){
console.log(data)
})
},
七、Vue-Router的使用
1.安裝
cnpm install vue-router --save
2.引入並使用
Vue.use(VueRouter)
3.配置路由
（1）創建組件 引入組件
（2）定義路由
const routes = [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/Home',
name: 'Home',
component: Home
}
]
(3) 實例化 VueRouter
const router = new VueRouter(
{
routes // 縮寫 相當於 routes : routes
}
)
（4）掛載
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
（5）根組件的模板裏面放上這句話
<router-view></router-view>
八、動態路由
1.配置動態路由
routes:[
// 動態路徑參數 以冒號開頭
{parh:'/user/:id',component: User}
]
2. 在對應的頁面
this.$route.params 獲取 動態路由的值
3.編程式導航
4. history 模式
九、路由嵌套
1.配置路由
{
path: '/user',
component: User,
children: [
{path: 'useradd',component: UserAdd}
{path: 'userlist',component: UserList}
]
}
2.父路由裏面配置子路由顯示的地方
<router-view></router-view>
十、MintUi 和 Element Ui
MintUi 基於 vue 的 移動端 ui 框架
cnpm install mint-ui --save
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
Element Ui 基於 vue 的 pc 端 ui 框架
cnpm i element-ui -S
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
其他更多用法參照 官方文檔
十一 、vuex
vuex 是一個專爲 vue.js 應用程序開發 的 狀態管理模式
1.vuex 解決了組件之間同一狀態的共享問題，（解決了不同組件之間的數據共享）
2.組件裏面數據的持久化
小型項目不建議用vuex，而使用 localstroage 和 sessionstroage
state 單一狀態樹 用來存放數據‘
getter 相當於計算屬性
Mutation 用來改變 state 裏面的 數據
Action 用來觸發 mutation 來改變state的數據，提交的是 mutation，而不是直接變更
狀態，可以包含任意的異步操作
3. 安裝vuex
cnpm install vuex --save
4. vuex 的使用
（1）src 目錄下面創建一個 vuex 的文件夾
（2）vuex文件夾裏面創建一個store.js
（3）在store.js引入 vue 及 vuex，並且 Vue.use（Vuex）
（4）定義數據
/**
* 1.state在vuex中用於存儲數據
*/
var state ={
count: 1
}
（5）定義方法
/**
* 2.mutation裏面放的是方法，方法主要用於改變state的數據
*/
var mutations={
incCount(){
++state.count;
}
}
（6）實例化vuex.store 並 暴露
/**
* 3.vuex 實例化 Vuex.store
*/
const store = new Vuex.Store({
state:state,
mutations:mutations
})
export default store;
（7）組件裏面使用vuex
1.引入 store
import store from ’../vuex/store.js‘
2.註冊
export default {
data(){
return {
msg:'aaa',
value: null,
}
},
store,
methods:{
incCount(){
// 觸發 前面定義的 mutation 裏面定義的方法，改變 state的數據
this.$store.commit('incCount');
}
}
}
3.獲取 state 裏面的數據
this.$store.state.數據
4. 觸發 前面定義的 mutation 裏面定義的方法，改變 state的數據
this.$store.commit('incCount');
5.getter 的用法
/**
* getter 有點類似計算屬性，改變state裏count數據的時候會觸發getters裏面的方法獲取新的值
*/
var getters = {
computedCount:(state) => {
return state.count*2
}
}
在組件裏面使用的時候，首先引入並註冊，
然後 使用 this.$store.getters.computedCount
6.action 的用法
var actions={
incMutationsCount(context){
context.commit('incCount')
}
}
在組件裏面使用action的時候使用
this.$store.dispatch('incMutationsCount')
注意： 使用的時候都要暴露
const store = new Vuex.Store({
state:state,
mutations:mutations,
getters:getters,
actions:actions
})
7.注意事項：
var mutations={
incCount(){
++state.count;
},
// this.$store.commit('addList',list) 當需要傳值的時候，這裏定義的方法必須加上state參數
addList(state,data){
state.list = data;
}
}