項目搭建時間：2020-06-29

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

本主題講述了：

1、跨域配置

2、axios請求封裝

3、eslint配置

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

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

該項目不僅是一個持續(xù)完善、高效簡潔的后臺管理系統(tǒng)模板，還是一套企業(yè)級后臺系統(tǒng)開發(fā)集成方案，致力于打造一個與時俱進(jìn)、高效易懂、高復(fù)用、易維護(hù)擴展的應(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 = { //常見錯誤碼列表 [400]: '請求錯誤', [401]: '登錄失效或在其他地方已登錄', [403]: '拒絕訪問', [404]: '請求地址出錯', [408]: '請求超時', [500]: '服務(wù)器內(nèi)部錯誤', [501]: '服務(wù)未實現(xiàn)', [502]: '網(wǎng)關(guān)錯誤', [503]: '服務(wù)不可用', [504]: '網(wǎng)關(guān)超時', [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, // 端口號 open: true, //配置自動啟動瀏覽器 proxy: { // 配置跨域處理 可以設(shè)置多個 ’^/api’: { target: ’https://www.weixinyue.cn’, changeOrigin: true, pathRewrite: { ’^/api’: ’’ // 規(guī)定請求地址以什么作為開頭 }, logLevel:’debug’ }, ’^/test’: { target: ’https://www.weixinyue.cn’, changeOrigin: true, pathRewrite: { ’^/test’: ’’ // 規(guī)定請求地址以什么作為開頭 }, logLevel:’debug’ }, ’^/pro’: { target: ’https://www.weixinyue.cn’, changeOrigin: true, pathRewrite: { ’^/pro’: ’’ // 規(guī)定請求地址以什么作為開頭 }, 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，項目的基礎(chǔ)搭建。

1、跨域配置

2、axios請求封裝

3、eslint配置

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

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