目錄
vue-cli
1、基于 vue ui 創(chuàng)建 vue 項目
?組件庫
1.vue 組件庫
2.vue 組件庫和 bootstrap 的區(qū)別
3. 最常用的 vue 組件庫
4. Element UI
axios 攔截器
1. 回顧：在 vue3 的項目中全局配置 axios
2. 在 vue2 的項目中全局配置 axios
3、攔截器
4. 配置請求攔截器
5、配置響應攔截器
proxy 跨域代理
1. 回顧：接口的跨域問題
2. 通過代理解決接口的跨域問題
3. 在項目中配置 proxy 代理
vue-cli
vue-cli 提供了創(chuàng)建項目的兩種方式：
vue create 項目名稱
vue ui
1、基于 vue ui 創(chuàng)建 vue 項目
步驟1：在終端下運行 vue ui 命令，自動在瀏覽器中打開創(chuàng)建項目的可視化面板：
步驟2：在詳情頁面填寫項目名稱：
步驟3：在預設頁面選擇手動配置項目：
步驟4：在功能頁面勾選需要安裝的功能（Choose Vue Version、Babel、CSS 預處理器、使用配置文件）：
步驟5：在配置頁面勾選 vue 的版本和需要的預處理器：
步驟6：將剛才所有的配置保存為預設（模板），方便下一次創(chuàng)建項目時直接復用之前的配置：
步驟7：創(chuàng)建項目并自動安裝依賴包：
vue ui 的本質：通過可視化的面板采集到用戶的配置信息后，在后臺基于命令行的方式自動初始化項目：
版本 3 和版本 4 的路由最主要的區(qū)別：創(chuàng)建路由模塊的方式不同！
?組件庫
1.vue 組件庫
2.vue 組件庫和 bootstrap 的區(qū)別
- ?bootstrap 只提供了純粹的原材料（ css 樣式、HTML 結構以及 JS 特效），需要由開發(fā)者做進一步的組裝和改造
- ?vue 組件庫是遵循 vue 語法、高度定制的現(xiàn)成組件，開箱即用
3. 最常用的 vue 組件庫
① PC 端
- ?Element UI（https://element.eleme.cn/#/zh-CN）
- ?View UI（http://v1.iviewui.com/）
② 移動端
- ?Mint UI（http://mint-ui.github.io/#!/zh-cn）
- ?Vant（https://vant-contrib.gitee.io/vant/#/zh-CN/）
4. Element UI
- ?vue2 的項目使用舊版的 Element UI（https://element.eleme.cn/#/zh-CN）
- ?vue3 的項目使用新版的 Element Plus（https://element-plus.gitee.io/#/zh-CN）
1、在 vue2 的項目中安裝 element-ui
運行如下的終端命令：
npm i element-ui -S- ?完整引入：操作簡單，但是會額外引入一些用不到的組件，導致項目體積過大
- ?按需引入：操作相對復雜一些，但是只會引入用到的組件，能起到優(yōu)化項目體積的目的
3、完整引入
在 main.js 中寫入以下內容：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)npm i babel-plugin-component -D{
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或寫為
* Vue.use(Button)
* Vue.use(Select)
*/import Vue from 'vue'
// 完整引入 Element UI
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)
// 按需導入
import { Button, Input } from 'element-ui'
Vue.config.productionTip = false
Vue.use(Button)
Vue.use(Input)
//在mian.js中導入
import './element-ui'axios 攔截器
1. 回顧：在 vue3 的項目中全局配置 axios
在?main.js?入口文件中，通過?app.config.globalProperties?全局掛載 axios
import axios from 'axios'
axios.defaults.baseURL = '請求根路徑'
app.config.globalProperties.$http = axios2. 在 vue2 的項目中全局配置 axios
需要在 main.js 入口文件中，通過 Vue 構造函數的 prototype 原型對象全局配置 axios：
import axios from 'axios'
//全局配置
axios.defaults.baseURL = '請求根路徑'
Vue.prototype.axios = axios3、攔截器
攔截器（英文：Interceptors）會在每次發(fā)起 ajax 請求和得到響應的時候自動被觸發(fā)。
4. 配置請求攔截器
通過 axios.interceptors.request.use(成功的回調, 失敗的回調) 可以配置請求攔截器：注意：失敗的回調函數可以被省略！
請求攔截器 – Token 認證
// 配置請求攔截器
axios.interceptors.request.use(config => {
// 配置 Token 認證
config.headers.Authorization = 'Bearer xxx'
console.log(config)
// 這是固定寫法
return config
})import { Loading } from 'element-ui'
/ 配置請求攔截器
let loadingInstance = null
axios.interceptors.request.use(config => {
// 展示 loading 效果
loadingInstance = Loading.service({ fullscreen: true })
// 配置 Token 認證
config.headers.Authorization = 'Bearer xxx'
console.log(config)
// 這是固定寫法
return config
})5、配置響應攔截器
通過 axios.interceptors.response.use(成功的回調, 失敗的回調) 可以配置響應攔截器。
響應攔截器 – 關閉 Loading 效果
調用 Loading 實例提供的 close() 方法即可關閉 Loading 效果
// 配置響應攔截器
axios.interceptors.response.use(response => {
// 關閉 loading 效果
loadingInstance.close()
return response
})proxy 跨域代理
1. 回顧：接口的跨域問題
2. 通過代理解決接口的跨域問題
通過 vue-cli 創(chuàng)建的項目在遇到接口跨域問題時，可以通過代理的方式來解決： 文章來源：http://www.zghlxwxcb.cn/news/detail-614226.html
3. 在項目中配置 proxy 代理
步驟1，在 main.js 入口文件中，把 axios 的請求根路徑改造為當前 web 項目的根路徑文章來源地址http://www.zghlxwxcb.cn/news/detail-614226.html
// 配置請求根路徑
// axios.defaults.baseURL = 'https://url地址'
axios.defaults.baseURL = 'http://localhost:8080'module.exports = {
devServer: {
proxy: 'https://url地址',
},
}
到了這里，關于VUE3 ---＞組件化的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
