一堤结、vue-router
1必怜、簡介
我們經(jīng)常使用vue開發(fā)單頁面應(yīng)用程序（SPA）肉拓。開發(fā)SPA過程中，路由必不可少梳庆，vue的官方推薦是vue-router暖途。單頁面應(yīng)用程序看起來好像是一個(gè)頁面，其實(shí)是在一個(gè)頁面中切換不同的html部分靠益，從而達(dá)到所謂的單頁面,在這切換之中，就需要使用路由來實(shí)現(xiàn)不同的頁面內(nèi)容的展現(xiàn)残揉。
2胧后、基本用法
（1）.使用步驟
vue-router的基本使用步驟如下：
- 定義需要切換的組件
- 配置路由，規(guī)定路徑到組件的映射關(guān)系
- 創(chuàng)建路由實(shí)例
- 將路由掛載到vue實(shí)例
//1.定義組件抱环，用于路由切換
var Home = {
template: '<div>我是主頁</div>'
}
var News = {
template: '<div>我是新聞</div>'
}
//2.配置路由
const routes = [{
path: '/home',
component: Home
},{
path: '/news',
component: News
},{ //這一路由配置用于首次訪問或者找不到所請求路由壳快，自動(dòng)跳轉(zhuǎn)home頁
path: '*',
redirect: '/home'
}];
//3.創(chuàng)建路由實(shí)例
var router = new VueRouter({
routes //傳入配置好的路由信息
});
//4.掛載路由到根組件
new Vue({
el: '#app',
router
});
這樣我們就配置好了一個(gè)完整的路由纸巷。在切換組件的時(shí)候會(huì)根據(jù)路由加載不同的組件。我們使用類似a標(biāo)簽的<router-link to="url"></router-link>觸發(fā)組件的切換眶痰，to屬性存放的是路徑瘤旨。使用<router-view></router-view>來顯示所切換組件。
<div id="app">
<router-link to="/home">主頁</router-link>
<router-link to="/news">新聞</router-link>
<router-view></router-view>
</div>
這樣我們就可以實(shí)現(xiàn)主頁和新聞組件間的切換竖伯。
（2）.參數(shù)傳遞
可能我們需要向所切換組件傳遞參數(shù)存哲。vue提供了兩種向組件傳遞參數(shù)的方式。
- 查詢字符串的形式
- /home?name=dawei&pwd=666
- 在組件內(nèi)部使用
{{$route.query}}接收參數(shù)
- 在組件內(nèi)部使用
- rest風(fēng)格
- /news/param1/param2
- 在組件內(nèi)部使用
{{$route.params}}接收參數(shù)
- 在組件內(nèi)部使用
（3）.路由嵌套
路由還可以多層嵌套使用七婴，使用children屬性祟偷。
{
path:'/user',
component:User,
children:[
{
path:'login',
component:Login
},
{
path:'regist',
component:Regist
}
]
}
子路由項(xiàng)路徑不要使用/開頭，以 /開頭的嵌套路徑會(huì)被當(dāng)作根路徑打厘。
在組件中就可以使用該路由：
<div>
<h3>用戶信息</h3>
<ul>
<router-link to="/user/login">用戶登陸</router-link>
<router-link to="/user/regist">用戶注冊</router-link>
</ul>
<router-view></router-view>
</div>
注意路徑的寫法修肠。
3、路由實(shí)例的方法
這里學(xué)習(xí)兩個(gè)路由實(shí)例的方法：router.push()和router.replace()户盯。
- router.push()：添加路由嵌施，功能上與
<route-link>相同 - router.replace()： 替換路由，不產(chǎn)生歷史記錄
router.push({path:'home'})
router.replace({path:'user'})
4莽鸭、路由結(jié)合動(dòng)畫
路由結(jié)合動(dòng)畫使用很簡單吗伤，我們可以用 <transition> 組件給它添加一些動(dòng)畫效果：
<transition>
<router-view></router-view>
</transition>
二、單文件組件
1蒋川、.vue文件
.vue文件稱為單文件組件牲芋，是Vue.js自定義的一種文件格式，一個(gè).vue文件就是一個(gè)單獨(dú)的組件捺球，在文件內(nèi)封裝了組件相關(guān)的代碼：html缸浦、css、js代碼氮兵。
.vue文件由三部分組成：<template>裂逐、<style>、<script>:
<template>
//html
</template>
<script>
//js
</script>
<style>
//css
</style>
2泣栈、vue-loader
瀏覽器本身并不認(rèn)識(shí).vue文件卜高，此時(shí)需要vue-loader對.vue文件進(jìn)行加載解析，南片。類似的loader還有許多掺涛，如：html-loader、css-loader疼进、style-loader薪缆、babel-loader等。需要注意的是vue-loader是基于webpack的伞广。
3拣帽、webpack
webpack是一個(gè)前端資源模板化加載器和打包工具疼电，它能夠把各種資源都作為模塊來使用和處理。實(shí)際上减拭，webpack是通過不同的loader將這些資源加載后打包蔽豺，然后輸出打包后文件。簡單來說拧粪，webpack就是一個(gè)模塊加載器修陡，所有資源都可以作為模塊來加載，最后打包輸出既们。
三濒析、vue-cli
1. 簡介
vue-cli是一個(gè)vue腳手架，可以幫助我們快速構(gòu)造項(xiàng)目結(jié)構(gòu)啥纸，減少開發(fā)人員開發(fā)阻力号杏。vue-cli集成了多種版本：
- simple ：比較簡單
- webpack ：包含ESLint代碼規(guī)范檢查和unit單元測試等
- webpack-simple： 沒有代碼規(guī)范檢查和單元測試
- browserify： 使用的也比較多
- browserify-simple
2.安裝、操作步驟
//安裝vue-cli斯棒，配置vue命令環(huán)境
cnpm install vue-cli -g
vue --version
vue list
// 初始化項(xiàng)目盾致，生成項(xiàng)目模板
vue init 模板名 項(xiàng)目名
//進(jìn)入生成的項(xiàng)目目錄，安裝模塊包
cd vue-cli-demo
cnpm install
//運(yùn)行
npm run dev //啟動(dòng)測試服務(wù)
npm run build //將項(xiàng)目打包輸出dist目錄荣暮，項(xiàng)目上線的話要將dist目錄拷貝到服務(wù)器上
3.文件介紹
.
|-- build // 項(xiàng)目構(gòu)建(webpack)相關(guān)代碼
| |-- build.js // 生產(chǎn)環(huán)境構(gòu)建代碼
| |-- check-version.js // 檢查node庭惜、npm等版本
| |-- dev-client.js // 熱重載相關(guān)
| |-- dev-server.js // 構(gòu)建本地服務(wù)器
| |-- utils.js // 構(gòu)建工具相關(guān)
| |-- webpack.base.conf.js // webpack基礎(chǔ)配置
| |-- webpack.dev.conf.js // webpack開發(fā)環(huán)境配置
| |-- webpack.prod.conf.js // webpack生產(chǎn)環(huán)境配置
|-- config // 項(xiàng)目開發(fā)環(huán)境配置
| |-- dev.env.js // 開發(fā)環(huán)境變量
| |-- index.js // 項(xiàng)目一些配置變量
| |-- prod.env.js // 生產(chǎn)環(huán)境變量
| |-- test.env.js // 測試環(huán)境變量
|-- src // 源碼目錄
| |-- components // vue組件
| |-- store // 狀態(tài)管理
| |-- App.vue // 頁面入口vue文件
| |-- main.js // 程序入口文件，加載各種公共組件
|-- static // 靜態(tài)文件
| |-- data
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義代碼格式
|-- .gitignore // git上傳需要忽略的文件格式
|-- README.md // 項(xiàng)目說明
|-- favicon.ico //網(wǎng)頁圖標(biāo)
|-- index.html // 入口頁面
|-- package.json // 項(xiàng)目配置信息
.
