Vue cli及Vue router範例詳解

2022-08-24 14:00:41

前言:

官方檔案

vue-cli是vue官方出品的快速構建單頁應用的腳手架，裡面整合了webpack，npm，nodejs，babel，vue，vue-router

1. 安裝

先安裝nodejs

設定環境變數

安裝vue-cli的前提是你已經安裝了npm，在命令列工具中輸入npm -v 命令來檢測npm的安裝以及版本情況。

1.1 npm安裝

node下載地址：下載 | Node.js 中文網
安裝成功提示：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的開發環境。
browserify：一個全面的Browserify+vueify 的模板，功能包括熱載入，linting,單元檢測。
browserify-simple：一個簡單Browserify+vueify的模板，不包含其他功能，讓你快速的搭建vue的開發環境。

simple：一個最簡單的單頁應用模板。

<project-name>：標識專案名稱，使用者根據自己的專案來起名字。

2.2 專案初始化

在實際開發中，一般都會使用webpack這個模板，命令使用如下：

vue init webpack my-vue-demo

Project name：專案名稱，預設為初始化建專案的名稱my-vue-demo，不需要直接回車
Project description：專案描述，預設為A Vue.js project，不需要直接回車
Author：作者，如果有設定git的作者，自動會讀取。直接回車
Install vue-router? 是否安裝vue的路由外掛，需要安裝，選擇Y
Use ESLint to lint your code? 是否用ESLint來限制你的程式碼錯誤和風格。不需要輸入n，需要選擇y，如果是大型團隊開發，最好是進行設定
setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具，不需要輸入n，需要選擇y
Setup e2e tests with Nightwatch? 是否安裝e2e來進行使用者行為模擬測試，不需要輸入n，需要選擇y

初始化完成之後會出現以下資訊，表示操作成功。

3. 執行專案

cd my-vue-demo，使用cd命令進入到專案目錄

npm run dev

以上命令為開發模式下執行專案

npm run build

以上命令為專案發布打包

4. 成功頁面

5. 專案結構

5.1 總體框架

一個vue-cli的專案結構如下，其中src資料夾是需要掌握，其餘瞭解即可。
資料夾目錄如下：
每個資料夾目錄詳細說明如下：

5.2 設定目錄檔案詳解

1. build目錄（webpack設定）

build檔案主要是webpack的設定，目錄詳情如下：

2. config目錄（vue專案設定目錄）

config檔案主要是專案相關設定，常用的就是當埠衝突時設定監聽埠，打包輸出路徑及命名等，目錄詳情如下：

3. node_modules（專案依賴包）

node_modules裡面是專案依賴包，其中包括很多基礎依賴，自己也可以根據需要安裝其他依賴。安裝方法開啟命令工具，進入專案目錄，輸入npm install [依賴包名稱]，回車

在兩種情況下我們會自己去安裝依賴：
》專案執行缺少該依賴包
》安裝外掛：如vuex

PS：有時會安裝指定依賴版本，需在依賴包名稱後加上版本號資訊，如npm install vue-loader@11.1.4

5.3src專案核心檔案講解

核心檔案目錄前面已經說明了，下面重點講解index.html，main.js，App.vue，router的index.js，HelloWorld.vue

1. index.html（主頁）

index.html為專案的主頁，跟其他html一樣，但一般只定義一個空的根節點，在main.js裡面定義的範例將掛載在根節點下，內容都通過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節點下 -->
    <div id="app"></div>
  </body>
</html>

2. main.js（入口檔案）

main.js為專案的入口檔案，即單入口，主要是引入vue框架，根元件及路由設定，並且定義vue範例，說明如下：

// 引入vue框架
import Vue from 'vue'
// 引入根元件
import App from './App'
// 引入路由設定
import router from './router'
 
// 關閉生產模式下給出的提示
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）模板只能包含一個父節點，也就是說頂層的div只能有一個（如上圖，父節點為#app的div，其沒有兄弟節點）
（2）<router-view/>是子路由檢視插槽，後面的路由頁面都顯示在此處，相當於iframe

【script-JS程式碼】
vue通常用es6來寫，用export default匯出，其下面可以包含資料data，生命週期(mounted等)，方法(methods)等。

【style-CSS樣式】
樣式通過style標籤<style></style>包裹，預設是影響全域性的，如需定義作用域只在該元件下起作用，需在標籤上加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 的核心深度整合，讓構建單頁面應用變得易如反掌。
包含的功能有：

巢狀的路由/檢視表
模組化的、基於元件的路由設定
路由引數、查詢、萬用字元
基於 Vue.js 過渡系統的檢視過渡效果
細粒度的導航控制
帶有自動啟用的 CSS class 的連結
HTML5 歷史模式或 hash 模式，在 IE9 中自動降級

自定義的卷軸行為

6.1 快速入門

安裝

vue-router是一個外掛包，需要用npm來進行安裝的。如果採用vue-cli構建初始化專案會提示安裝，也可以自己使用命令安裝：

npm install vue-router --save

解讀核心檔案

用vue-cli構建專案之後，在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: [                //設定路由，這裡是個陣列
    {                        //每一個連結都是一個物件
      path: '/',            //連結路徑
      name: 'HelloWorld',        //路由名稱，
      component: HelloWorld     //對應的元件模板
    }
  ]
})

使用

在系統入口檔案main.js中注入router，程式碼如下：

// 引入vue框架
import Vue from 'vue'
// 引入根元件
import App from './App'
// 引入路由設定
import router from './router'
 
// 關閉生產模式下給出的提示
Vue.config.productionTip = false
 
// 定義範例
new Vue({
  el: '#app',
  router, // 注入框架中
  components: { App },
  template: '<App/>'
})

6.2 頁面跳轉

1.router-link標籤跳轉

在html標籤內使用router-link跳轉，相應於超連結a標籤，使用方式如下：

<router-link to="/">[顯示欄位]</router-link>

to：導航路徑
使用範例如下：

<p>導航 ：
   <router-link to="/">首頁</router-link>
   <router-link to="/hello">hello</router-link>
</p>

2.程式設計式導航-JS程式碼內部跳轉

實際專案中，很多時候都是通過在JS程式碼內部進行導航的跳轉，使用方式如下：

this.$router.push('/xxx')

具體的簡單用法：
（1）先編寫一個按鈕，在按鈕上繫結goHome( )方法。

<button @click="goHome">回到首頁</button>

（2）在<script>模組裡加入goHome方法，並用this.$router.push(‘/’)導航到首頁

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後跟路由陣列來實現，陣列裡和其他設定路由基本相同，需要設定path和component，然後在相應部分新增<router-view/>來展現子頁面資訊，相當於嵌入iframe。具體看下面的範例：

1.src/components/Home.vue（父頁面）

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <!-- 新增子路由導航 -->
        <p>導航 ：
            <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: '/', // 預設頁面重定向到主頁
        redirect: '/home'
    },
    {
        path: '/home', // 主頁路由
        name: 'Home',
        component: Home,
        children:[ // 巢狀子路由
            {
                path:'one', // 子頁面1
                component:One
            },
            {
                path:'two', // 子頁面2
                component:Two
            },
        ]
    }
    ]
})

5. 效果圖

PS：各部分程式碼都很簡單，也有註釋，在採用vue-cli初始化專案完成之後直接複製到相應目錄即可檢視效果。

6.4路由傳遞引數

1.通過<router-link> 標籤中的to傳參

基本語法：

<router-link :to="{name:xxx, params: 
{key:value}}">valueString</router-link>

PS：上面to前邊是帶冒號，後邊跟的是一個物件形勢的字串

name：在路由組態檔中起的name值。叫做命名路由，下一節會講到。
params：要傳的引數，它是物件形式，在物件裡可以傳遞多個值。

具體範例如下：
（1）在src/components/Home.vue裡面導航中新增如下程式碼：

<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裡面接受引數，程式碼如下：

<h2>{{$route.params.username}}</h2>

2. url中傳遞引數

（1）在路由中以冒號傳遞，在src/router/index.js中加入如下程式碼：

{
    path:'/home/two/:id/:name', // 子頁面2
    component:Two
},

（2）接受引數，在src/components/Two.vuez中加入如下程式碼：

<p>ID：{{ $route.params.id}}</p>
<p>名稱：{{ $route.params.name}}</p>

（3）路由跳轉，在src/components/Home.vue中加入如下程式碼：

<router-link to="/home/two/1/張三">子頁面2</router-link>

PS：to前沒有冒號為字串路由，必須全部匹配。
（4）如果路由引數需要有特定的規則，就需要加入正規表示式了，範例如下：

{
    path:'/home/two/:id(\d+)/:name', // 子頁面2
    component:Two
}

3.程式設計式導航-params傳遞引數

（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、動態路由使用params傳遞引數，在this.$router.push() 方法中path不能和params一起使用，否則params將無效。需要用name來指定頁面。
B、以上方式引數不會顯示到瀏覽器的位址列中，如果重新整理一次頁面，就獲取不到引數了，改進方式將第一部中的程式碼改成如下：

{
    path:'/home/three/:id/:name', // 子頁面3
    name: 'three',
    component:Three
}

4. 程式設計式導航-query傳遞引數

（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：動態路由使用query傳遞引數，會顯示到瀏覽器位址列中，以上連結為
/home/three?id=1&name=zhangsan

6.5命名路由-命名檢視-重定向-別名

1. 命名路由

給一個路由命一個唯一的名稱，然後跳轉呼叫這個名稱即可。
（1）在src/router/index.js中加一個帶name的路由，程式碼如下：

{
    path: 'one', // 子頁面1
    name: 'one', // 路由名稱-命名路由
    component: One // 頁面元件
}

（2）在src/component/Home.vue頁面中呼叫，程式碼如下：

// template跳轉呼叫
<router-link :to="{name: 'one'}">子頁面1</router-link>
 
// router.push函數跳轉呼叫
router.push({ name: 'user'}})

2.命名檢視

在同一個頁面展示多個檢視，如果不用巢狀，只能採用命名檢視來實現了，程式碼如下：
（1）在src/router/index.js中，程式碼如下：

import Vue from 'vue'
import Router from 'vue-router'
// 建立頁面元件
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：經過實踐，命名檢視只能放在最頂級的頁面中，即第一步中的程式碼不能放在其他頁面中。

3.重定向

重定向是通過route的設定中關鍵詞redirect來實現的，具體程式碼如下：
（1）在src/router/index.js中，程式碼如下：

export default new Router({
    routes: [
    {
        path: '/', // 預設頁面重定向到主頁
        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' // 重定向-傳遞引數
            },
        ]
    }
    ]
})

（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-不帶引數的重定向：

redirect: '/home' // 重定向-不帶引數

說明2-帶引數的重定向：

redirect: '/home/two/:id/:name' // 重定向-傳遞引數

4. 別名

重定向是通過route的設定中關鍵詞alias來實現的，具體程式碼如下：
（1）在src/router/index.js中，程式碼如下：

{
    path:'/one', // 子頁面1
    component:One,
    alias: '/oneother'
}