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

本章節：講述基于vue/cli，項目的基礎搭建。

本主題講述了：

1、跨域配置

2、axios請求封裝

3、eslint配置

4、環境dev,test，pro（開發，測試，線上），run自動調用對應的接口（proxy多代理配置）

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

該項目不僅是一個持續完善、高效簡潔的后臺管理系統模板，還是一套企業級后臺系統開發集成方案，致力于打造一個與時俱進、高效易懂、高復用、易維護擴展的應用方案。

1、安裝axios　

cnpm i axios --save

2、axios封裝，調用以及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]: '服務器內部錯誤', [501]: '服務未實現', [502]: '網關錯誤', [503]: '服務不可用', [504]: '網關超時', [505]: 'HTTP版本不受支持' } const errMsg = ERR_CODE_LIST[error.response.status] alert('[' + error.response.status + ']' + errMsg || ’服務器異常’) 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（組件調用）

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: { // 配置跨域處理 可以設置多個 ’^/api’: { target: ’https://www.weixinyue.cn’, changeOrigin: true, pathRewrite: { ’^/api’: ’’ // 規定請求地址以什么作為開頭 }, logLevel:’debug’ }, ’^/test’: { target: ’https://www.weixinyue.cn’, changeOrigin: true, pathRewrite: { ’^/test’: ’’ // 規定請求地址以什么作為開頭 }, logLevel:’debug’ }, ’^/pro’: { target: ’https://www.weixinyue.cn’, changeOrigin: true, pathRewrite: { ’^/pro’: ’’ // 規定請求地址以什么作為開頭 }, 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 } }

本章節總結：

講述基于vue/cli，項目的基礎搭建。

1、跨域配置

2、axios請求封裝

3、eslint配置

4、環境dev,test，pro（開發，測試，線上），run自動調用對應的接口（proxy多代理配置）

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