項(xiàng)目搭建時(shí)間：2020-06-29

本章節(jié)：講述基于vue/cli，項(xiàng)目的基礎(chǔ)搭建。

本主題講述了：

1、跨域配置

2、axios請(qǐng)求封裝

3、eslint配置

4、環(huán)境dev,test，pro（開(kāi)發(fā)，測(cè)試，線上），run自動(dòng)調(diào)用對(duì)應(yīng)的接口（proxy多代理配置）

vue+element-ui JYAdmin后臺(tái)管理系統(tǒng)模板-集成方案從零到一的手寫搭建全過(guò)程。

該項(xiàng)目不僅是一個(gè)持續(xù)完善、高效簡(jiǎn)潔的后臺(tái)管理系統(tǒng)模板，還是一套企業(yè)級(jí)后臺(tái)系統(tǒng)開(kāi)發(fā)集成方案，致力于打造一個(gè)與時(shí)俱進(jìn)、高效易懂、高復(fù)用、易維護(hù)擴(kuò)展的應(yīng)用方案。

1、安裝axios　

cnpm i axios --save

2、axios封裝，調(diào)用以及api資源管理

serve/axiosResquest.js(axios封裝)

import axios from ’axios’; axios.interceptors.response.use( response => { return response }, error => { if (error && error.response) { const ERR_CODE_LIST = { //常見(jiàn)錯(cuò)誤碼列表 [400]: '請(qǐng)求錯(cuò)誤', [401]: '登錄失效或在其他地方已登錄', [403]: '拒絕訪問(wèn)', [404]: '請(qǐng)求地址出錯(cuò)', [408]: '請(qǐng)求超時(shí)', [500]: '服務(wù)器內(nèi)部錯(cuò)誤', [501]: '服務(wù)未實(shí)現(xiàn)', [502]: '網(wǎng)關(guān)錯(cuò)誤', [503]: '服務(wù)不可用', [504]: '網(wǎng)關(guān)超時(shí)', [505]: 'HTTP版本不受支持' } const errMsg = ERR_CODE_LIST[error.response.status] alert('[' + error.response.status + ']' + errMsg || ’服務(wù)器異常’) return Promise.reject(false) } } ) let axiosResquest = (url, config) => { let { data = {}, isAlert = false, contentType = ’application/json’, method = ’POST’ } = { ...config } return new Promise((resolve) => { axios({ url: url, method:method, data: data, header: { ’content-type’: contentType, ’Cookie’: ’’ // 全局變量中獲取 cookie }, transformRequest(data) { if (contentType == ’application/x-www-form-urlencoded; charset=UTF-8’) { let ret = ’’ for (let it in data) { ret += encodeURIComponent(it) + ’=’ + encodeURIComponent(data[it]) + ’&’ } return ret } else { return data } } }).then((res) => { if (isAlert) { } resolve(res.data); }).catch(function () { resolve(false); }); }) } export default axiosResquest;

@/api/api.js（api資源模塊管理）

import axiosResquest from ’@/serve/axiosResquest.js’; let host = '' if(process.env.VUE_APP_CURENV == ’development’){ host = ’/api’ }else if(process.env.VUE_APP_CURENV == ’test’){ host = ’/test’ }else if(process.env.VUE_APP_CURENV == ’production’){ host = ’/pro’ } export function axiosSuccessApi(data) { return axiosResquest(host+’/index-1.php?m=home&c=WebZuDetails&a=Details’, data || {}) } export function axiosResquestEeorApi(data) { return axiosResquest(host+’/index-1.php?m=home&c=WebZuDetails’, data || {}) } export function axiosSuccessApiAwait(data) { return axiosResquest(host+’/index-1.php?m=home&c=WebZuDetails&a=Details’, data || {}) }

@/pages/jsDemo/jsDemo.js（組件調(diào)用）

import { axiosSuccessApi } from ’@/api/api.js’ const config = { data: { id: ’102’ }, contentType: ’application/x-www-form-urlencoded; charset=UTF-8’, isAlert: true, } axiosSuccessApi(config).then(res => { if (res) { if (res.status) { console.log(res) config.data.id = res.status axiosSuccessApi(config).then(res => { if (res) { console.log(res) } }) } } })

2、vue.config.js 代理配置

devServer: { //跨域 port: 9528, // 端口號(hào) open: true, //配置自動(dòng)啟動(dòng)瀏覽器 proxy: { // 配置跨域處理 可以設(shè)置多個(gè) ’^/api’: { target: ’https://www.weixinyue.cn’, changeOrigin: true, pathRewrite: { ’^/api’: ’’ // 規(guī)定請(qǐng)求地址以什么作為開(kāi)頭 }, logLevel:’debug’ }, ’^/test’: { target: ’https://www.weixinyue.cn’, changeOrigin: true, pathRewrite: { ’^/test’: ’’ // 規(guī)定請(qǐng)求地址以什么作為開(kāi)頭 }, logLevel:’debug’ }, ’^/pro’: { target: ’https://www.weixinyue.cn’, changeOrigin: true, pathRewrite: { ’^/pro’: ’’ // 規(guī)定請(qǐng)求地址以什么作為開(kāi)頭 }, logLevel:’debug’ } } }

3、package.json 配置　

'scripts': { 'dev': 'npm run serve', 'serve': 'vue-cli-service serve --mode development', 'test': 'vue-cli-service serve --mode test', 'pro': 'vue-cli-service serve --mode production', 'build': 'vue-cli-service build', 'lint': 'vue-cli-service lint' },

4、.eslintrc.js 配置

module.exports = { root: true, env: { node: true }, extends: [ ’plugin:vue/essential’ // ’@vue/standard’ ], parserOptions: { parser: ’babel-eslint’ }, rules: { ’no-console’: process.env.NODE_ENV === ’production’ ? ’error’ : ’off’, ’no-debugger’: process.env.NODE_ENV === ’production’ ? ’error’ : ’off’, ’space-before-function-paren’: 0 // ’eqeqeq’: false, // ’vue/valid-template-root’: false, // ’spaced-comment’: false, // ’quotes’: false, // ’eol-last’: false, // ’key-spacing’: false, // ’vue/valid-v-for’:false, // ’vue/no-unused-vars’:false, // ’vue/no-parsing-error’:false } }

本章節(jié)總結(jié)：

講述基于vue/cli，項(xiàng)目的基礎(chǔ)搭建。

1、跨域配置

2、axios請(qǐng)求封裝

3、eslint配置

4、環(huán)境dev,test，pro（開(kāi)發(fā)，測(cè)試，線上），run自動(dòng)調(diào)用對(duì)應(yīng)的接口（proxy多代理配置）

到此這篇關(guān)于vue+element-ui JYAdmin后臺(tái)管理系統(tǒng)模板解析的文章就介紹到這了,更多相關(guān)vue+element-ui JYAdmin后臺(tái)管理系統(tǒng)模板內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！