一右犹、前言
從杭州回武漢這邊快兩個月了急侥，入職不久就讓我單獨開發(fā)一個簡易的系統(tǒng)砌滞，只要求用vue完成，從開始寫到現(xiàn)在已經(jīng)快一個月了坏怪，需求基本已經(jīng)能夠?qū)崿F(xiàn)了贝润，第一次實際上手vue，確實是碰到不少問題陕悬，記錄一下
二题暖、項目簡介
本項目使用vue+element-ui+axios+vuex+NProgress
三按傅、問題
1.如何設(shè)置組件背景（不污染其他組件）
data() {
return {
//圖片url地址,使用require引入防止生產(chǎn)環(huán)境路徑出現(xiàn)問題
bgUrl: require('../assets/img/login/web_login_bg.jpg'),
}
},
//進入時渲染
beforeRouteEnter(to, from, next) {
next((vm) => {
document.querySelector('html').style.cssText = `
background: url(${vm.bgUrl}) center no-repeat;
background-size: cover;
background-attachment: fixed;
`
})
},
//離開時銷毀
beforeRouteLeave(to, from, next) {
document.querySelector('html').style.cssText = `background: #ffffff;`
next()
},
ts版（如果vue3時記得寫在setup函數(shù)外哦捉超，見問題2）：
/**
* 路由守衛(wèi)胧卤，當(dāng)進入此路由時觸發(fā)
* 在此處用于更換背景圖片
* @param {object} to 即將要進入的目標(biāo)路由對象
* @param {object} from 當(dāng)前導(dǎo)航正要離開的路由
* @param {Function} next 一定要調(diào)用該方法來 resolve 這個鉤子。執(zhí)行效果依賴 next 方法的調(diào)用參數(shù)拼岳。
*/
beforeRouteEnter(_to:Object,_from:Object,next:any):void {
window.sessionStorage.clear()
// 因為此時組件實例化還沒創(chuàng)建枝誊，不能訪問this,通過 `vm` 訪問組件實例
next(() => {
const html: any = document.querySelector('html')
html.style.cssText = `
background: url(${require('../../assets/img/login/web_login_bg.jpg')}) center no-repeat;
background-size: cover;
background-attachment: fixed;
`
})
},
2.在谷歌中如何調(diào)試vue代碼
在項目中的vue.config.js中新增如下配置即可（如沒有此文件，新建一個）
module.exports = {
//谷歌調(diào)試代碼
configureWebpack: {
devtool: 'source-map'
},
}
3.axios解決跨域
問題：網(wǎng)絡(luò)請求時出現(xiàn)以下錯誤：(跨域問題這里不詳細(xì)說惜纸，自己查一下)
解決：因為axios中只能使用get和post方法來進行請求數(shù)據(jù)叶撒，沒有提供jsonp等方法進行跨域訪問數(shù)據(jù)，所以使用代理服務(wù)器進行訪問耐版，在vue.config.js中新增如下配置,：
module.exports = {
devServer: {
/* 自動打開瀏覽器 */
open: true,
/* 設(shè)置為0.0.0.0則所有的地址均能訪問 */
host: '0.0.0.0',
port: 9090,
https: false,
hotOnly: false,
/* 使用代理 */
proxy: {
//實際請求時祠够，這里會去你的url中匹配'/api'，并將其替換成下面代理服務(wù)器的地址
'/api': {
/* 目標(biāo)代理服務(wù)器地址 */
target: '代理服務(wù)器地址',
/* 允許跨域 */
changeOrigin: true,
},
},
},
}
4.axios的封裝(另外使用了nprogress)
(1)在src中新建一個文件夾network粪牲，文件夾中新建一個request.js文件
(2)新增如下配置：
// 'use strict';
import axios from 'axios';
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '../store/index'
axios.defaults.timeout = 5000
axios.defaults.withCredentials = true
//攔截器
axios.interceptors.request.use(config => {
NProgress.start()
// 請求頭默認(rèn)攜帶token
config.headers.Authorization = "Bearer " + sessionStorage.getItem('AccessToken')
return config
}, error => {
return Promise.reject(error)
})
// 響應(yīng)器
axios.interceptors.response.use(config => {
NProgress.done()
return config
})
// 封裝的post請求
export function post(url, data) {
return axios({
url: url,
baseURL: 'http:',
method: 'post',
data: data
})
}
// 封裝的get請求
export function get(url, params) {
return axios({
url,
params: params
})
}
(3).具體使用
import { post } from '../network/request'
export default {
mounted() {
post('目標(biāo)url地址', Data)
.then((ress, err) => {
//請求成功數(shù)據(jù)處理
}
.catch((err) => {
console.log(err)
this.$message.error('請求失敗!')
})
},
}
5.動態(tài)引入組件：
根據(jù)zjName返回出來的組件動態(tài)渲染組件古瓤，同樣可使用props以及emit
<template>
<component :is="zjName">
</component>
</template>
computed: {
zjName() {
var str
if () {
str = () => import('組件路徑')
}
else if(){
str = () => import('組件路徑')
}
}
6.生產(chǎn)環(huán)境去掉console打印(不使用webpack等第三方插件)
(1)新建一個RemoveConsole.js文件，添加如下代碼
export function rewirteLog() {
console.log = (function (log) {
return process.env.NODE_ENV == 'development'? log : function() {}
}(console.log))
}
(2)main.js中引入并運行
import {rewirteLog} from './utils/RemoveConsole'
rewirteLog()
