Vue?cli及Vue?router實例詳解
前言:
vue-cli是vue官方出品的快速構(gòu)建單頁應(yīng)用的腳手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router
1. 安裝
先安裝nodejs
配置環(huán)境變量
安裝vue-cli的前提是你已經(jīng)安裝了npm，在命令行工具中輸入npm -v 命令來檢測npm的安裝以及版本情況。
1.1 npm安裝
node下載地址：下載 | Node.js 中文網(wǎng)
安裝成功提示：npm -v
配置淘寶鏡像
npm config set registry https://registry.npm.taobao.org
1.2 vue-cli安裝
全局安裝vue-cli，命令行：
npm install vue-cli -g
PS：-g代表全局安裝，然后查看版本：
vue -V
PS: 注意這里的V是大寫
2. 初始化項目
2.1vue init命令講解
用vue init命令來初始化項目，具體使用方法如下：
vue init <template-name> <project-name>
init：表示要用vue-cli來初始化項目
<template-name>：表示模板名稱，vue-cli官方提供的5種模板：
- webpack：一個全面的webpack+vue-loader的模板，功能包括熱加載，linting,檢測和CSS擴展。
- webpack-simple：一個簡單webpack+vue-loader的模板，不包含其他功能，讓你快速的搭建vue的開發(fā)環(huán)境。
- browserify：一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。
- browserify-simple：一個簡單Browserify+vueify的模板，不包含其他功能，讓你快速的搭建vue的開發(fā)環(huán)境。
simple：一個最簡單的單頁應(yīng)用模板。
<project-name>：標(biāo)識項目名稱，用戶根據(jù)自己的項目來起名字。
2.2 項目初始化
在實際開發(fā)中，一般都會使用webpack這個模板，命令使用如下：
vue init webpack my-vue-demo
Project name：項目名稱 ，默認(rèn)為初始化建項目的名稱my-vue-demo，不需要直接回車
Project description：項目描述，默認(rèn)為A Vue.js project，不需要直接回車
Author：作者，如果有配置git的作者，自動會讀取。直接回車
Install vue-router? 是否安裝vue的路由插件，需要安裝，選擇Y
Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風(fēng)格。不需要輸入n，需要選擇y，如果是大型團隊開發(fā)，最好是進行配置
setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具，不需要輸入n，需要選擇y
Setup e2e tests with Nightwatch? 是否安裝e2e來進行用戶行為模擬測試，不需要輸入n，需要選擇y
初始化完成之后會出現(xiàn)以下信息，表示操作成功。
3. 運行項目
cd my-vue-demo，使用cd命令進入到項目目錄
npm run dev
以上命令為開發(fā)模式下運行項目
npm run build
以上命令為項目發(fā)布打包
4. 成功頁面
5. 項目結(jié)構(gòu)
5.1 總體框架
一個vue-cli的項目結(jié)構(gòu)如下，其中src文件夾是需要掌握，其余了解即可。
文件夾目錄如下：
每個文件夾目錄詳細說明如下：
5.2 配置目錄文件詳解
1. build目錄（webpack配置）
build文件主要是webpack的配置，目錄詳情如下：
2. config目錄（vue項目配置目錄）
config文件主要是項目相關(guān)配置，常用的就是當(dāng)端口沖突時配置監(jiān)聽端口，打包輸出路徑及命名等，目錄詳情如下：
3. node_modules（項目依賴包）
node_modules里面是項目依賴包，其中包括很多基礎(chǔ)依賴，自己也可以根據(jù)需要安裝其他依賴。安裝方法打開命令工具，進入項目目錄，輸入npm install [依賴包名稱]，回車
在兩種情況下我們會自己去安裝依賴：
》項目運行缺少該依賴包
》安裝插件：如vuex
PS：有時會安裝指定依賴版本，需在依賴包名稱后加上版本號信息，如npm install vue-loader@11.1.4
5.3src項目核心文件講解
核心文件目錄前面已經(jīng)說明了，下面重點講解index.html，main.js，App.vue，router的index.js，HelloWorld.vue
1. index.html（主頁）
index.html為項目的主頁，跟其他html一樣，但一般只定義一個空的根節(jié)點，在main.js里面定義的實例將掛載在根節(jié)點下，內(nèi)容都通過vue組件來填充。說明如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>my-vue-demo</title>
</head>
<body>
<!-- 定義的vue實例將掛載在#app節(jié)點下 -->
<div id="app"></div>
</body>
</html>2. main.js（入口文件）
main.js為項目的入口文件，即單入口，主要是引入vue框架，根組件及路由設(shè)置，并且定義vue實例，說明如下：
// 引入vue框架
import Vue from 'vue'
// 引入根組件
import App from './App'
// 引入路由配置
import router from './router'
// 關(guān)閉生產(chǎn)模式下給出的提示
Vue.config.productionTip = false
// 定義實例
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})3. App.vue（根組件）
一個vue頁面通常由三部分組成：模板(template)、js(script)、樣式(style)，說明如下：
<!-- 模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<!-- js代碼 -->
<script>
export default {
name: 'App'
}
</script>
<!-- css樣式 -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>[template-模板]
（1） 模板只能包含一個父節(jié)點，也就是說頂層的div只能有一個（如上圖，父節(jié)點為#app的div，其沒有兄弟節(jié)點）
（2）<router-view/>是子路由視圖插槽，后面的路由頁面都顯示在此處，相當(dāng)于iframe
【script-JS代碼】
vue通常用es6來寫，用export default導(dǎo)出，其下面可以包含數(shù)據(jù)data，生命周期(mounted等)，方法(methods)等。
【style-CSS樣式】
樣式通過style標(biāo)簽<style></style>包裹，默認(rèn)是影響全局的，如需定義作用域只在該組件下起作用，需在標(biāo)簽上加scoped，<style scoped></style>
引入外部CSS示例:
<style> import './assets/css/public.css' </style>
4. router（路由配置）
router文件夾下，有一個index,js的路由配置文件，說明如下：
// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依賴
import Router from 'vue-router'
// 引入頁面組件，命名為HelloWorld
import HelloWorld from '@/components/HelloWorld'
// 使用路由依賴
Vue.use(Router)
// 定義路由配置
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})5. HelloWorld.vue（頁面組件）
最熟悉的HelloWorld輸出，說明如下：
<template>
<div>
<!-- 輸出變量 -->
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
// 定義頁面名稱，可以不要
name: 'HelloWorld',
data () {
return {
// 定義變量
msg: 'HelloWorld'
}
}
}
</script>
<style scoped>
h1 {
font-size: 16px;
font-weight: normal;
}
</style>6. VUE-ROUTER
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。
包含的功能有：
- 嵌套的路由/視圖表
- 模塊化的、基于組件的路由配置
- 路由參數(shù)、查詢、通配符
- 基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
- 細粒度的導(dǎo)航控制
- 帶有自動激活的 CSS class 的鏈接
- HTML5 歷史模式或 hash 模式，在 IE9 中自動降級
自定義的滾動條行為
6.1 快速入門
安裝
vue-router是一個插件包，需要用npm來進行安裝的。如果采用vue-cli構(gòu)建初始化項目會提示安裝，也可以自己使用命令安裝：
npm install vue-router --save
解讀核心文件
用vue-cli構(gòu)建項目之后，在src/router/index.js文件中，看到以下的路由核心文件：
// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依賴
import Router from 'vue-router'
// 引入頁面組件，命名為HelloWorld
import HelloWorld from '@/components/HelloWorld'
// Vue全局使用Router
Vue.use(Router)
// 定義路由配置
export default new Router({
routes: [ //配置路由，這里是個數(shù)組
{ //每一個鏈接都是一個對象
path: '/', //鏈接路徑
name: 'HelloWorld', //路由名稱，
component: HelloWorld //對應(yīng)的組件模板
}
]
})使用
在系統(tǒng)入口文件main.js中注入router，代碼如下：
// 引入vue框架
import Vue from 'vue'
// 引入根組件
import App from './App'
// 引入路由配置
import router from './router'
// 關(guān)閉生產(chǎn)模式下給出的提示
Vue.config.productionTip = false
// 定義實例
new Vue({
el: '#app',
router, // 注入框架中
components: { App },
template: '<App/>'
})6.2 頁面跳轉(zhuǎn)
1.router-link標(biāo)簽跳轉(zhuǎn)
在html標(biāo)簽內(nèi)使用router-link跳轉(zhuǎn)，相應(yīng)于超鏈接a標(biāo)簽，使用方式如下：
<router-link to="/">[顯示字段]</router-link>
to：導(dǎo)航路徑
使用示例如下：
<p>導(dǎo)航 ： <router-link to="/">首頁</router-link> <router-link to="/hello">hello</router-link> </p>
2.編程式導(dǎo)航-JS代碼內(nèi)部跳轉(zhuǎn)
實際項目中，很多時候都是通過在JS代碼內(nèi)部進行導(dǎo)航的跳轉(zhuǎn)，使用方式如下：
this.$router.push('/xxx')具體的簡單用法：
（1）先編寫一個按鈕，在按鈕上綁定goHome( )方法。
<button @click="goHome">回到首頁</button>
（2）在<script>模塊里加入goHome方法，并用this.$router.push(‘/’)導(dǎo)航到首頁
export default {
name: 'app',
methods: {
goHome(){
this.$router.push('/home');
}
}
}3. 其它常用方法
// 后退一步記錄，等同于 history.back() this.$router.go(-1) // 在瀏覽器記錄中前進一步，等同于 history.forward() this.$router.go(1)
6.3子路由-路由嵌套
子路由，也叫路由嵌套，采用在children后跟路由數(shù)組來實現(xiàn)，數(shù)組里和其他配置路由基本相同，需要配置path和component，然后在相應(yīng)部分添加<router-view/>來展現(xiàn)子頁面信息，相當(dāng)于嵌入iframe。具體看下面的示例：
1.src/components/Home.vue（父頁面）
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<!-- 添加子路由導(dǎo)航 -->
<p>導(dǎo)航 ：
<router-link to="/home">首頁</router-link> |
<router-link to="/home/one">-子頁面1</router-link> |
<router-link to="/home/two">-子頁面2</router-link>
</p>
<!-- 子頁面展示部分 -->
<router-view/>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
msg: 'Home Page!'
}
}
}
</script>
<style scoped>
</style>2.src/components/One.vue（子頁面1）
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'One',
data () {
return {
msg: 'Hi, I am One Page!'
}
}
}
</script>
<style scoped>
</style>3.src/components/Two.vue（子頁面2）
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Two',
data () {
return {
msg: 'Hi, I am Two Page!'
}
}
}
</script>
<style scoped>
</style>4.src/router/index.js（路由配置）
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import One from '@/components/One'
import Two from '@/components/Two'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', // 默認(rèn)頁面重定向到主頁
redirect: '/home'
},
{
path: '/home', // 主頁路由
name: 'Home',
component: Home,
children:[ // 嵌套子路由
{
path:'one', // 子頁面1
component:One
},
{
path:'two', // 子頁面2
component:Two
},
]
}
]
})5. 效果圖
PS：各部分代碼都很簡單，也有注釋，在采用vue-cli初始化項目完成之后直接復(fù)制到相應(yīng)目錄即可查看效果。
6.4路由傳遞參數(shù)
1.通過<router-link> 標(biāo)簽中的to傳參
基本語法：
<router-link :to="{name:xxx, params:
{key:value}}">valueString</router-link>PS：上面to前邊是帶冒號，后邊跟的是一個對象形勢的字符串
- name：在路由配置文件中起的name值。叫做命名路由，下一節(jié)會講到。
- params：要傳的參數(shù)，它是對象形式，在對象里可以傳遞多個值。
具體實例如下：
（1）在src/components/Home.vue里面導(dǎo)航中添加如下代碼：
<router-link :to="{name: 'one', params:{username:'test123'}}">子頁面1</router-link>（2）在src/router/indes.js中添加如下代碼，重點是name：\
{
path:'one', // 子頁面1
name: 'one', // 路由名稱-命名路由
component:One
}（3）在src/components/One.vue里面接受參數(shù)，代碼如下：
<h2>{{$route.params.username}}</h2>2. url中傳遞參數(shù)
（1）在路由中以冒號傳遞，在src/router/index.js中加入如下代碼：
{
path:'/home/two/:id/:name', // 子頁面2
component:Two
},（2）接受參數(shù)，在src/components/Two.vuez中加入如下代碼：
<p>ID：{{ $route.params.id}}</p>
<p>名稱：{{ $route.params.name}}</p>（3）路由跳轉(zhuǎn)，在src/components/Home.vue中加入如下代碼：
<router-link to="/home/two/1/張三">子頁面2</router-link>
PS：to前沒有冒號為字符串路由，必須全部匹配。
（4）如果路由參數(shù)需要有特定的規(guī)則，就需要加入正則表達式了，示例如下：
{
path:'/home/two/:id(\\d+)/:name', // 子頁面2
component:Two
}3.編程式導(dǎo)航-params傳遞參數(shù)
（1）在src/router/index.js頁面加入如下代碼：
{
path:'/home/three', // 子頁面3
name: 'three',
component:Three
}（2）在src/components/Three.vue頁面加入如下代碼：
<p>ID：{{ $route.params.id}}</p>
<p>名稱：{{ $route.params.name}}</p>（3）在src/components/Home.vue中加入如下代碼：
// template
<button @click="toThreePage">頁面3-params傳參</button>
// script
methods: {
toThreePage() {
this.$router.push({name: 'three', params: {id: 1, name: 'zhangsan'}})
}
}說明：
A、動態(tài)路由使用params傳遞參數(shù)，在this.$router.push() 方法中path不能和params一起使用，否則params將無效。需要用name來指定頁面。
B、以上方式參數(shù)不會顯示到瀏覽器的地址欄中，如果刷新一次頁面，就獲取不到參數(shù)了，改進方式將第一部中的代碼改成如下：
{
path:'/home/three/:id/:name', // 子頁面3
name: 'three',
component:Three
}4. 編程式導(dǎo)航-query傳遞參數(shù)
（1）在src/router/index.js頁面加入如下代碼：
{
path:'/home/three', // 子頁面3
name: 'three',
component:Three
}（2）在src/components/Three.vue頁面加入如下代碼：
<p>ID：{{ $route.query.id}}</p>
<p>名稱：{{ $route.query.name}}</p>（3）在src/components/Home.vue中加入如下代碼：
// template
<button @click="toThreePage">頁面3-params傳參</button>
// script
methods: {
toThreePage() {
this.$router.push({path: '/home/three', query: {id: 1, name: 'zhangsan'}})
}
}PS：動態(tài)路由使用query傳遞參數(shù)，會顯示到瀏覽器地址欄中，以上鏈接為
/home/three?id=1&name=zhangsan
6.5命名路由-命名視圖-重定向-別名
1. 命名路由
給一個路由命一個唯一的名稱，然后跳轉(zhuǎn)調(diào)用這個名稱即可。
（1）在src/router/index.js中加一個帶name的路由，代碼如下：
{
path: 'one', // 子頁面1
name: 'one', // 路由名稱-命名路由
component: One // 頁面組件
}（2）在src/component/Home.vue頁面中調(diào)用，代碼如下：
// template跳轉(zhuǎn)調(diào)用
<router-link :to="{name: 'one'}">子頁面1</router-link>
// router.push函數(shù)跳轉(zhuǎn)調(diào)用
router.push({ name: 'user'}})2.命名視圖
在同一個頁面展示多個視圖，如果不用嵌套，只能采用命名視圖來實現(xiàn)了，代碼如下：
（1）在src/router/index.js中，代碼如下：
import Vue from 'vue'
import Router from 'vue-router'
// 創(chuàng)建頁面組件
const Header = { template: '<div>Header</div>' }
const Left = { template: '<div>Left</div>' }
const Right = { template: '<div>Right</div>' }
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', // 主頁路由
components: {
default: Header,
a: Left,
b: Right
}
}
]
})（2）在src/App.vue中，代碼如下：
<template>
<div id="app">
<router-view />
<router-view name="a" class="left" />
<router-view name="b" class="right" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
width: 500px;
border: 1px solid red;
margin: 0 auto;
}
.left,.right{
float: left;
width:48%;
text-align: center;
border:1px solid red
}
</style>PS：經(jīng)過實踐，命名視圖只能放在最頂級的頁面中，即第一步中的代碼不能放在其他頁面中。
3.重定向
重定向是通過route的配置中關(guān)鍵詞redirect來實現(xiàn)的，具體代碼如下：
（1）在src/router/index.js中，代碼如下：
export default new Router({
routes: [
{
path: '/', // 默認(rèn)頁面重定向到主頁
redirect: '/home' // 重定向
},
{
path: '/home', // 主頁路由
component: Home,
children:[ // 嵌套子路由
{
path:'/home/two/:id/:name', // 子頁面2
component:Two
},
{
path:'/home/three/:id/:name', // 子頁面3
name: 'three', // 路由名稱-命名路由
redirect: '/home/two/:id/:name' // 重定向-傳遞參數(shù)
},
]
}
]
})（2）在src/components/Home.vue中，代碼如下：
<router-link to="/">首頁</router-link> |
<router-link to="/home/two/1/lisi">子頁面2</router-link> |
<router-link :to="{name: 'three', params: {id: 1, name: 'zhangsan'}}">子頁面3</router-link>說明1-不帶參數(shù)的重定向：
redirect: '/home' // 重定向-不帶參數(shù)
說明2-帶參數(shù)的重定向：
redirect: '/home/two/:id/:name' // 重定向-傳遞參數(shù)
4. 別名
重定向是通過route的配置中關(guān)鍵詞alias來實現(xiàn)的，具體代碼如下：
（1）在src/router/index.js中，代碼如下：
{
path:'/one', // 子頁面1
component:One,
alias: '/oneother'
}（2）在src/components/Home.vue中，代碼如下：
<router-link to="/oneother">子頁面1</router-link>
說明1：redirect和alias的區(qū)別
- redirect：直接改變了url的值，把url變成了真實的path路徑。\
alias：url路徑?jīng)]有別改變，這種更友好，讓用戶知道自己訪問的路徑，只是改變了<router-view>中的內(nèi)容。
說明2：
別名請不要用在path為’/’中，如下代碼的別名是不起作用的。
{
path: '/',
component: Hello,
alias:'/home'
}到此這篇關(guān)于Vuecli及Vuerouter詳解的文章就介紹到這了,更多相關(guān)VuecliVuerouter內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue執(zhí)行方法,方法獲取data值,設(shè)置data值,方法傳值操作
這篇文章主要介紹了Vue執(zhí)行方法,方法獲取data值,設(shè)置data值,方法傳值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue簡單實現(xiàn)書本翻頁效果,需要的朋友可以參考下2022-04-04
在 Vue 中，如果直接對數(shù)組進行操作，比如使用下標(biāo)直接修改元素，數(shù)組長度不變時， Vue 是無法監(jiān)測到這種變化的，導(dǎo)致無法觸發(fā)視圖更新。針對該問題本文為大家整理了一些方法，需要的可以參考一下2023-01-01
這篇文章主要介紹了vue中如何給靜態(tài)資源增加路由前綴，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue3觸發(fā)父組件兩種寫法,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-08-08
這篇文章主要介紹了從零開始搭建vue移動端項目到上線的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
本文主要介紹在Vue中使用debouce防抖函數(shù)，設(shè)置一個門檻值，表示兩次?Ajax?通信的最小間隔時間。如果在間隔時間內(nèi)，發(fā)生新的keydown事件，則不觸發(fā)?Ajax?通信，并且重新開始計時。如果過了指定時間，沒有發(fā)生新的keydown事件再將數(shù)據(jù)發(fā)送出去，這便是debouce防抖函數(shù)2021-12-12
Vue前端實現(xiàn)導(dǎo)出頁面為word的兩種方法
這篇文章主要介紹了Vue前端實現(xiàn)導(dǎo)出頁面為word的兩種方法,文中通過代碼示例和圖文介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-12-12
這篇文章給大家介紹了如何解決keep-alive同一個組件不緩存問題,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)表單驗證小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09