vue-router的使用：
vue—>適合在單頁面的應用，即適合SPA開發
vue-resource: 交互
vue-router: 路由
下載：因為這里用的是vue1.0,所以下載vue-router0.7.13版本，后面會繼續講解vue2.0
查看版本信息：bower info 包名
下載：bower install vue-router
下面講解vue1.0中vue-router使用的步驟：
主頁：/home
新聞：/news
html代碼：
<li><a v-link="{path:'/home'}">主頁</a></li> // 頁面跳轉鏈接，這里並不用href
<router-view></router-view> //顯示內容
js代碼：
<script type="text/javascript">
//1、准備一個根組件
var App=Vue.extend();
//2、准備Home、news的組件
var Home=Vue.extend({
template:'<h3>我是主頁</h3>'
});
var News=Vue.extend({
template:'<h3>我是新聞</h3>'
});
//3、准備路由
var router=new VueRouter();
//4、關聯
router.map({
'home':{
component:Home
},
'news':{
component:News
}
});
//5、啟動路由
router.start(App,'#box');
//6、跳轉
router.redirect({
'/':'home'
});
</script>
--------------------------------------------------------
路由嵌套(多個路由的使用)
html代碼:
<div id="box">
<ul>
<li><a v-link="{path:'/home'}">主頁</a></li>
<li><a v-link="{path:'/news'}">新聞</a></li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
<template id="home">
<h3>我是主頁</h3>
<ul>
<li><a v-link="{path:'/home/login'}">登錄</a></li>
<li><a v-link="{path:'/home/register'}">注冊</a></li>
</ul>
<div>
<router-view></router-view>
</div>
</template>
<template id="news">
<h3>我是新聞</h3>
</template>
js代碼:
<script type="text/javascript">
window.onload=function(){
//1、准備一個根組件
var App=Vue.extend();
//2、准備Home、news的組件
var Home=Vue.extend({
template:'#home'
});
var News=Vue.extend({
template:'#news'
});
//3、准備路由
var router=new VueRouter();
//4、關聯
router.map({
'home':{
component:Home,
subRoutes:{
'login':{
component:{
template:'<strong>這是登錄頁面</strong>'
}
},
'register':{
component:{
template:'<strong>這是注冊頁面</strong>'
}
}
}
},
'news':{
component:News
}
});
//5、啟動路由
router.start(App,'#box');
//6、跳轉
router.redirect({
'/':'home'
});
}
</script>
---------------------------------------------------------------------------------------
獲取路由的其他信息：(比如在登錄時，在路由上顯示是誰登錄)
{{$route.params |json}} //獲取傳過來的參數，如依靠后台數據庫id來顯示信息
{{$route.path}} //顯示當前路徑
{{$route.query |json}} //顯示當前查詢的信息
---------------------------------------------------------------------------------------
示例1：vue-router的綜合應用
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <script src="bower_components/vue/dist/vue.js"></script>
7 <script src="bower_components/vue-router/dist/vue-router.js"></script>
8 <style>
9 .v-link-active{ 10 font-size: 20px; 11 color: #f60; 12 } 13 </style>
14 </head>
15 <body>
16 <div id="box">
17 <ul>
18 <li>
19 <a v-link="{path:'/home'}">主頁</a>
20 </li>
21 <li>
22 <a v-link="{path:'/news'}">新聞</a>
23 </li>
24 </ul>
25 <div>
26 <router-view></router-view>
27 </div>
28 </div>
29
30 <template id="home">
31 <h3>我是主頁</h3>
32 <div>
33 <a v-link="{path:'/home/login/yufan'}">登錄</a>
34 <a v-link="{path:'/home/reg/yfstrive'}">注冊</a>
35 </div>
36 <div>
37 <router-view></router-view>
38 </div>
39 </template>
40 <template id="news">
41 <h3>我是新聞</h3>
42 <div>
43 <a v-link="{path:'/news/detail/001'}">新聞001</a>
44 <a v-link="{path:'/news/detail/002'}">新聞002</a>
45 </div>
46 <router-view></router-view>
47 </template>
48 <template id="detail">
49 {{$route.params | json}} 50 <br>
51 {{$route.path}} 52 <br>
53 {{$route.query | json}} 54 </template>
55 <script>
56 //1. 准備一個根組件
57 var App=Vue.extend(); 58
59 //2. Home News組件都准備
60 var Home=Vue.extend({ 61 template:'#home'
62 }); 63
64 var News=Vue.extend({ 65 template:'#news'
66 }); 67
68 var Detail=Vue.extend({ 69 template:'#detail'
70 }); 71
72 //3. 准備路由
73 var router=new VueRouter(); 74
75 //4. 關聯
76 router.map({ 77 'home':{ 78 component:Home, 79 subRoutes:{ 80 'login/:name':{ 81 component:{ 82 template:'<strong>我是登錄信息 {{$route.params | json}}</strong>'
83 } 84 }, 85 'reg':{ 86 component:{ 87 template:'<strong>我是注冊信息</strong>'
88 } 89 } 90 } 91 }, 92 'news':{ 93 component:News, 94 subRoutes:{ 95 '/detail/:id':{ 96 component:Detail 97 } 98 } 99 } 100 }); 101
102 //5. 啟動路由
103 router.start(App,'#box'); 104
105 //6. 跳轉
106 router.redirect({ 107 '/':'home'
108 }); 109 </script>
110 </body>
111 </html>
vue-loader的介紹：
webpack:模塊加載器,一切東西都是模塊,最后打包到一塊
vue-loader:基於webpack,文件后綴名為.vue
.vue文件：放置的是vue組件代碼,由三部分組成
<template>
html代碼
</template>
<style>
css代碼
</style>
<script>
js代碼 (平時的代碼,ES6),由於ES6瀏覽器支持不太好,
所以可能會用到babel-router來編譯ES6
</script>
--------------------------------------------------
學習：手動配置webpack+vue-loader
構建webpack 的簡單目錄結構(詳細請見vue-router文件夾)
|-index.html
|-main.js 文件的入口
|-App.vue vue文件
|-package.json 工程文件(項目依賴,名稱,配置)——>可由npm init --yes 生成
|-webpack.config.js webpack的配置文件
webpack的准備工作：
cnpm install webpack --save-dev
cnpm install webpack-dev-server --save-dev
解析App.vue文件 -->需要變成正常的代碼瀏覽器才可以解讀,
這時需要用到vue-loader@8.5.4 //這里用的是vue1.0版本
cnpm install vue-loader@8.5.4 --save-dev
解析html,css,js代碼
cnpm install vue-html-loader --save-dev
vue-html-loader,css-loader vue-style-loader,vue-hot-reload-api@1.3.2
babel所需要的插件：
babel-loader,babel-core,babel-plugin-transform-runtime,babel-preset-es2015,babel-runtime
下載最最核心的vue
cnpm install vue@1.0.28 --save
運行：npm run dev
-----------------------------------------------
ES6:模塊化開發
導出模塊:export default{}
導入模塊:import 模塊名 from 地址
-----------------------------------------------------
腳手架vue-cli版本介紹：
vue-cli --> vue的腳手架(幫你提供好了基本的項目結構)
webpack#1.0/2.0 -->不用Eslint檢測
webpack-simple#1.0/2.0 --->沒有代碼檢查和單元測試
------------------------------------------------------
webpack基本的使用流程
1.npm install vue-cli -g 安裝vue命令環境
如何驗證已經安裝？---輸入vue--version
2.生成項目模板
vue init <模板名> 本地的項目名稱
3.進入到生成目錄里面
cd xxx
npm install
4.npm run dev
改端口的---端口在config/index.js里面去改的