VUE-5:腳手架、調試、路由1

腳手架

    https://cli.vuejs.org/zh/

    vue-cli 是 vue 提供的一個用於自動化構建和開發項目的工具,也稱爲:腳手架,它是一系列工具的集合,它主要有:

                - 根據配置選項自動構建項目,並安裝所需要的依賴

                - 啓動一個本地開發服務器,通過這個服務器可以基於服務器環境訪問本地項目,同時提供了跨域代理服務

                - 項目的自動編譯、打包

                - 項目測試(單元測試、e2e測試)


安裝

        npm install -g @vue/cli

        yarn global add @vue/cli


查看版本

    vue --version

    vue -V

幫助

    vue --help

    vue -h


創建項目

    vue-cli 提供了兩種方式來創建項目

        - 命令行 - cli

        - 圖形界面(基於瀏覽器) - ui


命令行方式創建項目

基於瀏覽器圖形界面方式創建項目

        運行命令以後,根據提示進行選擇


運行

項目創建成功以後,進入項目根目錄,打開 package.json 文件,我們可以看到

https://cli.vuejs.org/zh/guide/cli-service.html#使用命令


打包

        build    打包完成後生成到dist文件夾裏

        yarn build打包的命令,我們在後期項目開發完成以後再說


項目目錄結構文件說明

src

        先來說一個最重要的目錄 src ,這個就是存放的就是我們項目源碼的目錄,我們開發過程中大部分的時間就在這個目錄中

                - main.js

                            項目的入口文件

                - App.vue

                            首先,這是 vue 提供的一種單文件組件的文件模式(後續會講),一個 .vue 文件就是一個獨立的組件,

                            這裏的 App.vue 是應用的根組件

                - components 目錄

                            存放組件的目錄

                - assets 目錄

                            存放靜態資源的目錄,比如:圖片,css 等。這裏的文件與外層 public 目錄存放的靜態資源的最大區別是:assets 存放的

                            資源是通過 import 等方式作爲模塊導入,最後打包處理的。而 public 中的資源並不通過模塊方式導入,一般都是通過 

                            script 、link 、img 等方式從瀏覽器引入的資源,比如無法通過模塊化處理的 js 文件(這樣的需求情況並不多)

public

        一些並非通過模塊方式引入的資源文件存放的位置,一般都是通過 script 、link 、img 等方式從瀏覽器引入的資源,比如無法通過

        模塊化處理的 js 文件(這樣的需求情況並不多)


單文件組件

        vue 也是基於組件的開發模式,我們知道一個 UI 組件包含

                - 結構

                - 樣式

                - 行爲

        vue 的單文件組件是官方提供的一種用來組織組件代碼的形式,該文件以 `.vue` 爲後綴,該文件會被 vue-cli 內置的 webpack 

        解析生成對應的 javascript、html、css 文件

        https://vue-loader-v14.vuejs.org/zh-cn/start/spec.html

組成

        一個單文件組件的 結構、樣式、行爲 分別通過三個標籤來進行定義和劃分

        單文件組件把一個組件所包含的 結構、樣式、行爲 分別通過 template、style、script 進行分離包含,然後統一組織在一個文件中

        一個單文件組件最少必須包含 template,可以不需要 script 和 style

lang 屬性

        無論是 template、script 還是 style,都可以通過 lang 屬性來指定它們所使用的語言

src 屬性

        我們還可以通過 src 屬性把文件分離到單獨的文件中

        這裏的 src 同樣遵循模塊化的導入規則,`./` 開頭的表示相對路徑,`/` 開頭表示 NPM 包中的資源


scoped 屬性(有作用域的 CSS)

        當 `style` 標籤有 `scoped` 屬性時,它的 CSS 只作用於當前組件中的元素。這類似於 Shadow DOM 中的樣式封裝

混用本地和全局樣式

資源路徑處理

        在項目開發中,我們經常會碰到要引入外部資源的需求,vue 單文件系統中,對資源引入路徑有一定的特殊處理

                - 絕對路徑前綴

                - 相對路徑前綴

                - 特殊前綴


vue-devTools 調試

        爲了更方便的在開發過程中對 Vue 程序進行調試,除了傳統的瀏覽器自帶的 debug 工具以外,我們還可以通過一些專門爲 Vue 提供

        的擴展插件來進行調試

        參考:https://github.com/vuejs/vue-devtools

Vue.js-devtools,[點擊下載](./assets/Vue.js-devtools_v3.1.6.crx)

安裝步驟

1、首先進入瀏覽器設置,點擊 `擴展程序`

2、開啓 `開發者模式`,點擊 `加載已解壓的擴展程序` 或者 直接拖拽已解壓的擴展程序

​      注:已解壓的擴展程序就是上面下載的 Vue.js-devtools_v3.1.6.crx

3、安裝成功以後就可以看到:

        點擊紅框處開啓

4、通過 `npm run serve` 啓動應用以後,即可看到瀏覽器右上角的 Vue 插件圖片,圖 `紅框一` 處,表示 `Vue.js devtools` 已啓動,

      點擊圖 `紅框二` 的 vue 一項


路由

        當應用變得複雜以後,我們就需要通過一種便捷、高效的方式來管理應用,最常見的就是通過路由

        路由:把 url 與 應用中的對應的組件進行關聯,通過不同的 url 訪問不同的組件

vue-router 的安裝

        npm i vue-router

            OR

        yarn add vue-router

Vue.use()

        通過前面提到的 Vue.use 方法,把 vue-router 安裝到指定的 Vue 實例中

創建路由對象

        通過 vue-router 提供的 Router 構造函數(類)創建路由對象,路由對象包含了當前使用的模式(hash、history)、路由信息

        (url 與 組件的對應關係)等信息

import Router from 'vue-router';

import Home from './views/Home.vue';

import Home from './views/About.vue';

const myRouter = new Router({

  mode: 'history',

  routes: [

    {

      path: '/',

      component: Home

    },

    {

      path: '/about',

      component: About

    }

  ]

});

...,

 

new Vue({

  ...,

  router: myRouter

});


router-view 組件

        配置了路由信息以後,我們還需要中頁面(組件)中指定路由對應的組件出現的位置,噹噹前訪問的 url 與某個路由信息匹配的時候,

        該組件就會出現在 router-view 組件所在的位置

// App.vue

<template>

  <div id="app">

    <div id="nav">

      <router-link to="/">Home</router-link> |

      <router-link to="/about">About</router-link>

    </div>

    <hr>

    <router-view/>

  </div>

</template>


路由配置案例:

main.js

index.js

app.vue


異步請求

        在實際的應用開發中,與後端交互,進行異步請求是很常見的需求

axios安裝

        npm i axios

請求


跨域

        vue-cli 提供了一個內置基於 node 的 webserver ,我們可以使用它提供的 proxy 服務來進行跨域請求代理

vue.config.js

        在項目的根目錄下創建一個 vue.config.js 的文件,通過 `npm run serve` 啓動服務的時候,會讀取該文件

跨域請求代理配置

// vue.config.js

module.exports = {

  devServer: {

    proxy: {

      '/api': {

        target: 'http://localhost:7777',

        pathRewrite: {

          '^/api': ''

        }

      }

    }

  }

}

        修改配置文件,需要重啓服務:`npm run serve`

// home.vue

<script>

...

created() {

  axios({

    url: '/api/items'

  }).then(res => {

    this.items = res.data;

  });

}

...

</script>

 


動態路由

        有的時候,我們需要把滿足某種規則的路由全部匹配到同一個組件,比如不同的商品的 url

        我們不可能爲每一個商品都定義一個獨立的組件,而是把它們都映射到同一個組件,同時 url 後面的部分爲動態變化的部分,我們會

        在設計路由的時候進行特殊的處理

        其中 `:itemId` 表示匹配的 url 中動態部分內容,如上面的 1,2,3 等,同時該值將被賦值給路由的變量 itemId

路由對象

        vue-router 會在組件中添加(注入)兩個屬性

                - $router

                - $route

$router 對象

        該對象其實就是 new VueRouter(...) 得到的路由對象,通過該對象我們可以訪問全局路由信息,調用路由下的方法,

        比如:`go`、`back`、`push` 等

$route 對象

        通過該對象可以訪問與當前路由匹配的信息

$route.params

        獲取動態路由有關的信息

 

Detail.vue

 

router/index.js

router/index.js

 

apis.js


queryString(?後面的東西)

        有的時候,我們可能也會用到 queryString

$route.query

        我們可以通過路由對象 $route 的 query 屬性來獲取 queryString

編程式導航

        有的時候,我們可能需要用到編程的方式來導航(跳轉),而不是點擊鏈接。如:當 `sort` 發生改變的時候跳轉

路由組件的複用

        爲了提高性能,增強路由組件的複用,當路由切換使用的是同一個組件的時候,則會複用該路由組件,而不是銷燬重建,這個時候,

        我們就需要通過 watch 或者 路由相關的生命週期函數來處理切換路由導致的變化

watch

        如果切換的路由複用了組件,這個時候,我們可以使用 watch 監聽 $route

                to : 改變之後的 $route 對象

                from : 改變之前的 $route 對象

        但是我們可以使用 vue-router 提供路由守衛 (路由有關的生命週期函數)來處理路由有關的業務邏輯


路由守衛

        當導航發生改變的時候,vue-router 會在多個不同的地方調用指定的函數,也就是與路由有關的生命週期函數,也稱爲:路由守衛

                - 組件內守衛

                - 路由獨享守衛

                - 全局守衛

組件內守衛

        定義在組件內的與路由有關的生命週期函數(守衛)

                - beforeRouteEnter

                - beforeRouteUpdate

                - beforeRouteLeave

beforeRouteEnter

        當路由解析完成,並中指定的組件渲染之前(組件 `beforeCreate`  之前),這裏不能通過 `this` 訪問組件實例,需要通過

         `next` 回調來進行調用

Home.vue

beforeRouteUpdate

        在當前路由改變,但是該組件被複用時調用

beforeRouteLeave

        導航離開該組件的對應路由時調用

路由守衛參數

to

        即將要進入的目標 路由對象($route)

from

        當前導航正要離開的路由對象($route)

next

        路由確認回調函數,類似 Promise 中的 resolve 函數,一定要確保調用 next 函數,但是後續的導航行爲將依賴 next 方法的調用參數

路由獨享的守衛

        可以在路由配置上直接定義 `beforeEnter` 守衛,相對來說,應用不多

router/index.js

全局守衛

        全局守衛是註冊在 router 對象(new VueRouter({...}))上的

                - beforeEach

                - beforeResolve

                - afterEach

beforeEach

        註冊在路由對象上,當一個導航觸發時,全局前置守衛按照創建順序調用

router/index.js

beforeResolve

        在所有組件內守衛和異步路由組件被解析之後被調用

afterEach

        導航被確認後調用

        因爲導航已經被確認,所以沒有 `next`


嵌套路由

        一些比較複雜的應用會有多層嵌套的路由和組件組成

        在應用增加一個用戶個人中心,用戶中心又是由多個頁面組成,如:

添加路由與子路由

children 屬性

        一個路由中的 `children` 表示嵌套的子路由

子路由視圖

        有了子路由以後,還需要在視圖組件中設置 `router-view` 


重定向redirect

        有的時候,我們會根據某種需求對用戶請求的頁面進行重新定位

案例

        現有一小說網站,提供了 男生頻道 和 女生頻道 的兩個入口,用戶首次進入頁面的時候,會出現選擇,並記住用戶的選擇,以後

        該用戶進入網站直接根據記錄的選擇進入對應的頻道

組件

路由配置

redirect


別名alias

        重定向,是從一個路由切換到另外一個路由,而別名是不同的路由顯示同一個頁面,比如:`/user` 是用戶中心的路由,`/member` ,

        我們也可以給這個頁面定義另外一個路由,雖然在某些時候,重定向與別名有類似的效果,但是,別名不存在跳轉,瀏覽器地址欄上

        顯示的 URL 並不會切換


404

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章