sass-loader/vuex 等的引入說明
tips:vue-cli 4.x腳手架封裝度更高，配置起來簡單許多，旨在讓用戶把精力都放在編寫業務代碼中
vue-cli 4.x在創建時已經選擇了相應依賴，因此項目創建好后，基本的依賴都有。不需要重復安裝。
引入 element
vue-cli 4.x 引入 element 可謂是相當的方便，只需要執行下方語句，即可引入element。
vue add element
有兩個選項，根據需求選擇，
- How do you want to import Element? Import on demand #這里選擇的是按需引入。只引入需要的組件，以達到減小項目體積的目的。
- Choose the locale you want to load zh-CN # 選擇加載環境，這里選擇的是中文
需要使用什么組件，在plugins下的 element.js 中添加對應的組件。以減小項目體積。
TIPS：此種方式會自動引入樣式
引入 axios
更多關於axios的信息，請看我另一篇文章，傳送門
axios 是一個基於 Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，項目與后端的請求交互需要使用到 axios，執行以下命令，安裝 axios 依賴。
npm i axios
1.基本使用
安裝完成后，可以直接在界面上引入 axios 然后使用 axios.get 就能直接發起 get 請求。
import axios from 'axios'
axios.get('url').then((data) => {
console.log(data)
})
2.封裝使用
2.1 開發環境配置請求地址
首先在.env.development文件中配置 需要發起 請求的地址，VUE_APP_BASE_RUL='https://www.fastmock.site/mock/37b157378200e4dbd5eecff887e20f81/lion/'
需要特別注意的是 .env.production和.env.development文件 參數說明：
- NODE_ENV - 是 “development”、“production” 、"test"或者自定義的值。具體的值取決於應用運行的模式
- BASE_URL - 會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑
- 除了 NODEENV 和 BASE_URL，其他的環境變量必須以 VUE_APP 開頭
- 項目中使用：process.env.環境變量名，eg：VUE_APP_BASE_URL
2.2 配置代理
然后，若要配置跨域處理的話，在vue.config.js文件中添加訪問代理。
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
outputDir: 'dist', //默認輸出到該文件夾，生成時會自動刪除該文件
assetsDir: 'static',
lintOnSave: true, // 是否開啟eslint保存檢測
productionSourceMap: false, // 是否在構建生產包時生成sourcdeMap
chainWebpack: (config) => {
config.resolve.alias.set('@', resolve('src')).set('views', resolve('src/views'))
// config.optimization.runtimeChunk('single')
},
devServer: {
host: 'localhost',
port: '8080',
hot: true,
open: true,
overlay: {
warning: false,
error: true,
},
proxy: {
[process.env.VUE_APP_BASE_RUL]: {
target: process.env.VUE_APP_BASE_RUL,
changeOrigin: true,
secure: false,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_RUL]: '',
},
},
},
},
}
2.3 添加接口相關文件
相關文件說明：
-
config.js：axios 默認配置，請求基本 url。
-
axiosHttp.js：二次封裝 axios 模塊，包含攔截器等信息。
-
index.js：請求接口匯總模塊，聚合模塊 API。 在 main.js 文件中按插件引入
在 src/api 文件夾下添加 config.js配置文件
const baseUrl = process.env.VUE_APP_BASE_RUL
export default {
method: 'get',
// 基礎url前綴
baseURL: baseUrl,
// 請求頭信息
headers: {
'Content-Type': 'application/json;charset=UTF-8',
},
// 參數
data: {},
// 設置超時時間
timeout: 10000,
// 返回數據類型
responseType: 'json',
}
在 src/api 文件夾下添加 axiosHttp.js配置文件
import axios from 'axios'
import qs from 'qs'
import router from '@/router'
import config from './config'
import { Message } from 'element-ui'
axios.defaults.timeout = config.timeout
axios.defaults.headers = config.headers
axios.defaults.baseURL = config.baseURL
// 請求攔截器
axios.interceptors.request.use(
(config) => {
// 觸發loading效果
//判斷是否存在token,如果存在，則在header上加上token
// let token = getStore('token')
// if (token) {
// config.headers.common['token'] = token
// }
if (config.method == 'post' || config.method == 'put') {
//將數據轉成string
config.data = JSON.stringify(config.data)
} else if (config.method == 'get') {
//&& browser.isIE
//給Get添加時間戳 解決IE緩存問題
let symbol = config.url.indexOf('?') >= 0 ? '&' : '?'
config.url += symbol + '_=' + Date.now()
config.data = qs.stringify(config.data)
}
return config
},
(err) => {
// 關閉loading
// 失敗提示
return Promise.resolve(err)
}
)
// 響應攔截器
axios.interceptors.response.use(
(response) => {
// 關閉loading
if (!response || !response.data || !response.data.success) {
// 失敗提示
} else if (response.data.data && response.data.code == 200) {
// 成功處理
}
if (response.data) {
switch (response.data.code) {
case 401:
// 返回 401 清除token信息並跳轉到登錄頁面
// store.commit('LOGOUT')
Message.error('登錄已失效，請重新登錄')
setTimeout(function () {
router.replace({
path: '/login',
// 登錄成功后跳入瀏覽的當前頁面
query: { redirect: router.currentRoute.fullPath },
})
}, 1500)
break
case 402:
//402無權限操作
Message.error('無權限操作')
return new Promise(() => {}) //外部不會再處理
break
}
}
return response
},
(err) => {
// 關閉loading
// 提示異常
let errMessage = ''
if (err && err.response) {
switch (err.response.status) {
case 400:
errMessage = '請求錯誤'
break
case 401:
errMessage = '未授權，請登錄'
break
case 403:
errMessage = '拒絕訪問'
break
case 404:
errMessage = `請求發生錯誤`
// err.response.config.url
break
case 408:
errMessage = '請求超時'
break
case 500:
errMessage = '服務器內部錯誤'
break
case 501:
errMessage = '服務未實現'
break
case 502:
errMessage = '網關錯誤'
break
case 503:
errMessage = '服務不可用'
break
case 504:
errMessage = '網關超時'
break
case 505:
errMessage = 'HTTP版本不受支持'
break
default:
errMessage = '服務器開小差了，請稍后再試'
}
}
Message.error(errMessage)
//外部不會再處理
return new Promise(() => {})
}
)
export default {
Get(url, params = {}) {
return new Promise((resolve, reject) => {
axios
.get(url, { params })
.then((res) => {
resolve(res.data)
})
.catch((error) => {
reject(error)
//resolve(error)
})
})
},
Post(url, params = {}) {
return new Promise((resolve, reject) => {
axios
.post(url, params)
.then((res) => {
resolve(res.data)
})
.catch((error) => {
reject(error)
//resolve(error)
})
})
},
Delete(url, params = {}) {
return new Promise((resolve, reject) => {
axios
.delete(url, params)
.then((res) => {
resolve(res.data)
})
.catch((error) => {
reject(error)
//resolve(error)
})
})
},
Put(url, params = {}) {
return new Promise((resolve, reject) => {
axios
.put(url, params)
.then((res) => {
resolve(res.data)
})
.catch((error) => {
reject(error)
//resolve(error)
})
})
},
}
在 src/api/modules 文件夾下添加 user.js文件
import axios from '@/api/axiosHttp'
export const login = (params) => {
return axios.Post('/login', params)
}
export const test = () => {
return axios.Get('/test')
}
在 src/api 文件夾下添加 index.js文件
/*
* 接口統一集成模塊
*/
import * as user from '@/api/modules/user'
// 默認全部導出
export default {
...user,
}
可以在 main.js 中將所有的 接口都掛在到原型鏈上，也可以界面引入需要的接口
- 需要使用原型鏈方式的，代碼如下：
# main.js 文件
import api from '@/api'
Vue.prototype.$api = api
# app.vue 文件
methods: {
loginFunc() {
this.$api.login({ username: 'admin', password: '123456' }).then((data) => {
this.$message({
type: 'success',
message: JSON.stringify(data),
})
})
},
},
- 單個界面引入需要的接口
# app.vue 文件
import { login } from '@/api/modules/user'
export default {
name: 'app',
components: {
},
data() {
return {}
},
methods: {
loginFunc() {
console.log(login)
// console.log(this.$api.user.login)
login({ username: 'admin', password: '123456' }).then((data) => {
this.$message({
type: 'success',
message: JSON.stringify(data),
})
})
},
},
}
原文地址：http://book.levy.net.cn/doc/frontend/uiframe/utils_import.html