腳手架
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