8.12 Vue-cli

時間 2019-11-30

標籤 8.12 vue cli 简体版

原文原文鏈接

1. vue-cli

Vue Cli 是一個基於 Vue.js 進行快速開發的完整系統

1. 安裝

Vue Cli 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+)

npm install -g @vue/cli
    //檢查版本
    vue --version
複製代碼

2. 建立項目

vue create xxxx
    //可視化界面
    vue ui
複製代碼

3. 環境依賴

package.json文件

dependencies 上線環境
devDependencies 開發環境

package-lock.json

鎖定版本

4. babel eslint

babel ES6轉換ES5
eslint 強制格式校驗

5. features

Babel
Router
Vuex
CSS Pre-processors

2. Vue Router

建立單頁應用，是很是簡單的

1. 定義 (路由) 組件

新建vue文件
組件template

2. 定義路由

router.js文件

import Vue from 'vue'
    import Router from 'vue-router'
    import Home from './views/Home.vue'//引入組件
    
    
    Vue.use(Router)
    
    export default new Router({
        mode: 'history',// history hash 
        base: process.env.BASE_URL,
        routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About
        }
    ]
複製代碼

3. 建立和掛載根實例

main.js文件
render函數是渲染一個視圖，而後提供給el掛載
render: h => h(App)等價於render:function(h){return h(App);}

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'

    Vue.config.productionTip = false
    
    new Vue({
        router,
        store,
        render: h => h(App)
    }).$mount('#app')
複製代碼

4. 動態路由匹配

能夠在任何組件內經過this.$router訪問路由器，也能夠經過 this.$route訪問當前路由

// Home.vue
    export default {
      computed: {
        username () {
            return this.$route.params.username
        }
      },
      methods: {
        goBack () {
            window.history.length > 1 ? this.$router.go(-1):this.$router.push('/')
        }
      }
    }
複製代碼

5. 參數傳遞

v-bind 傳參

傳遞

//name 進入的組件名稱
    //params 傳遞的參數
    <router-link :to="{name: 'home', params: {id: '123', name: 'aaa', age: 2}}">首頁傳參</router-link>
複製代碼

接收
params一個對象

<p>{{$route.params.id}}</p>
    <p>{{$route.params.name}}</p>
    <p>{{$route.params.age}}</p>
複製代碼

利用url傳遞

傳遞

<router-link to="/details/333/aaa">詳情頁</router-link>
複製代碼

接收

<p>{{$route.params.userId}}</p>
    <p>{{$route.params.name}}</p>
複製代碼

router.js

{
        path: '/details/:userId/:name',
        component: Details
    },
複製代碼

3. `<router-link>`

支持用戶在具備路由功能的應用中 (點擊) 導航
to 屬性指定目標地址
默認渲染成帶有正確連接的<a>標籤

<!-- 字符串 -->
    <router-link to="home">Home</router-link>
    <!-- 渲染結果 -->
    <a href="home">Home</a>
    
    <!-- 使用 v-bind 的 JS 表達式 -->
    <router-link v-bind:to="'home'">Home</router-link>
    
    <!-- 不寫 v-bind 也能夠，就像綁定別的屬性同樣 -->
    <router-link :to="'home'">Home</router-link>
    
    <!-- 同上 -->
    <router-link :to="{ path: 'home' }">Home</router-link>
    
    <!-- 命名的路由 -->
    <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
    
    <!-- 帶查詢參數，下面的結果爲 /register?plan=private -->
    <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>
複製代碼

4. `<router-view>`

functional 組件，渲染路徑匹配到的視圖組件(佔位)

<template>
    	<div class="navbar">
    		<ul id="main">
    			<li><router-link to="/home" >home</router-link></li>
    		</ul>
            <!-- 路由匹配到的組件將顯示在這裏 -->
            <router-view></router-view>
    	</div>
    </template>
複製代碼

<router-view>設置了名稱，則會渲染對應的路由配置中 components 下的相應組件

<router-view class="view one"></router-view>
    <!--Foo-->
    <router-view class="view two" name="a"></router-view>
    <!--Bar-->
    <router-view class="view three" name="b"></router-view>
    <!--Baz-->
    
    <script> const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] }) </script>
複製代碼

5. 重定向和別名

1. 重定向

redirect

const router = new VueRouter({
        routes: [
            { path: '/a', redirect: '/b' }
        ]
    })
複製代碼

能夠是一個命名的路由：

const router = new VueRouter({
        routes: [
            { path: '/a', redirect: { name: 'foo' }}
        ]
    })
複製代碼

一個方法

const router = new VueRouter({
        routes: [
            { path: '/a', redirect: to => {
                // 方法接收 目標路由 做爲參數
                // return 重定向的 字符串路徑/路徑對象
            }}
        ]
    })
複製代碼

2. 別名

url沒有改變，改變的內容
alias

const router = new VueRouter({
        routes: [
            { path: '/a', component: A, alias: '/b' }
        ]
    })
複製代碼

6. 導航守衛

1. 全局前置守衛

router.beforeEach

const router = new VueRouter({ ... })
    
    router.beforeEach((to, from, next) => {
      // code
    })
複製代碼

守衛是異步解析執行，此時導航在全部守衛 resolve 完以前一直處於等待中。
to: Route 即將要進入的目標路由對象
from: Route當前導航正要離開的路由
next: Function 必定要調用該方法來 resolve 這個鉤子。執行效果依賴 next 方法的調用參數。
next()進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是 confirmed (確認的)。
next(false)中斷當前的導航。若是瀏覽器的 URL 改變了 (多是用戶手動或者瀏覽器後退按鈕)，那麼 URL 地址會重置到 from 路由對應的地址。 -next('/') 或者 next({ path: '/' })跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航。你能夠向 next 傳遞任意位置對象，且容許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或router.push 中的選項。
next(error)若是傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError()註冊過的回調。
確保要調用 next 方法，不然鉤子就不會被 resolved。

2. 全局解析守衛

router.beforeResolve 和 router.beforeEach 相似html
區別vue

在導航被確認以前，同時在全部組件內守衛和異步路由組件被解析以後，解析守衛就被調用。vue-router

3. 全局後置鉤子

這些鉤子不會接受 next 函數也不會改變導航自己

router.afterEach((to, from) => {
        // code
    })
複製代碼

4. 路由獨享的守衛

router.beforeEnter

const router = new VueRouter({
        routes: [
            {
                path: '/foo',
                component: Foo,
                beforeEnter: (to, from, next) => {
                    // ...
                }
            }
        ]
    })
複製代碼

5. 組件內的守衛

組件內
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

const Foo = {
      template: `...`,
      beforeRouteEnter (to, from, next) {
        // 在渲染該組件的對應路由被 confirm 前調用
        // 不！能！獲取組件實例 `this`
        // 由於當守衛執行前，組件實例還沒被建立
      },
      beforeRouteUpdate (to, from, next) {
        // 在當前路由改變，可是該組件被複用時調用
        // 舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
        // 因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。
        // 能夠訪問組件實例 `this`
      },
      beforeRouteLeave (to, from, next) {
        // 導航離開該組件的對應路由時調用
        // 能夠訪問組件實例 `this`
      }
    }
複製代碼