后台管理系统[01第三方库集成]

1.1. vue.config.js中修改webpack配置

const { defineConfig } = require('@vue/cli-service')// 在vue.config修改webpack配置
module.exports = defineConfig({transpileDependencies: true,//配置方式一：VueCLI提供的属性outputDir: './build',// 配置方式二：和webpack属性完全一致，最后会进行合并configureWebpack: {resolve: {alias: {components: '@/components'}}},
})
module.exports = {lintOnSave: false
}

1.2. vue-router集成

1 安装路由

2 创建router对象

3 使用路由

4 在App.vue中配置跳转

1.3. vue-router集成

1 安装vuex

2 创建store对象

3 使用store

4 在App.vue中使用

1.4 Element-plus集成（局部引入）

1 安装element-plus

2 在App.vue中引入、注册并使用组件

3 引入样式（通过babel)

1.5 axios集成

1 安装axios

2 封装axios

在service新建index.ts和文件夹request
在request里新建index.ts，其中封装axios 导出一个对象

// 封装axios
import axios from "axios"
import type { AxiosInstance, AxiosRequestConfig } from 'axios'class QNRquest {instance: AxiosInstanceconstructor(config: AxiosRequestConfig) {// 每次创建一个axios对象都创建一个新的instancethis.instance = axios.create(config)}// 封装request函数request(config: AxiosRequestConfig): void {this.instance.request(config).then((res) => {console.log(res)})}
}
export default QNRquest

在service中的index.ts中引入该对象创建实例并导出

// service统一出口
import QNRquest from "./request/index"
import { BASE_URL, TIME_OUT } from './request/config'const qnRequest = new QNRquest({baseURL: BASE_URL,timeout: TIME_OUT})
export default qnRequest

在main.js中引入该实例

qnRequest.request({method: 'GET',url: '/home/multidata'
})

其他：区分不同环境的三种方式

根据不同的环境环境设置不同的环境变量

方式一（不推荐）

// 1 手动切换
const BASE_URL = 'http://coderwhy.org/dev'
const BASE_NAME = 'codewhy'// const BASE_URL = 'http://coderwhy.org/prod'
// const BASE_NAME = 'codewhy'// const BASE_URL = 'http://coderwhy.org/test'
// const BASE_NAME = 'codewhy'

方式二（常用）

// 2 process.env.NODE_ENV的值会根据不同的环境变化
let BASE_URL = ''
let BASE_NAME = ''if (process.env.NODE_ENV === 'development') {BASE_URL = 'http://coderwhy.org/dev'BASE_NAME = 'codewhy'
} else if (process.env.NODE_ENV === 'production') {BASE_URL = 'http://coderwhy.org/prod'BASE_NAME = 'kobe'
} else {BASE_URL = 'http://coderwhy.org/test'BASE_NAME = 'james'
}// ES6中先定义变量再导出 要将变量放在对象里面
export { BASE_URL, BASE_NAME }

后台管理系统[01第三方库集成]相关推荐

前端后台管理系统————01版权限开发（附带教程及代码）
需要使用的技术栈:脚手架.vuex.router以及element-ui和axios 目录验证账号是否存在不会安装的可以看一下之前的安装教学demo1需要安装的技术栈先看实现效果: 获取数据的话 ...
(019)java后台开发之第三方库收集
按接触顺序: 谷歌的Gson.阿里巴巴的FastJson.安卓原生自带的org.JSON 1.gson: goole的将Java对象序列化为JSON字符串/将JSON字符串反序列为JSONObject ...
[转载] JAVA从菜鸟【入门】到新手【实习】一一一一Python 内置函数，标准库与第三方库（拓展库），常用框架
参考链接: copyreg -注册pickle支持的函数掌握了python的基本语法和面向对象的设计思想后是学习了程序设计的"使用"规则, 具体实现和调用要依赖"标准库 ...
后台管理系统项目搭建
项目搭建规范一. 代码规范 1.1. 集成editorconfig配置 EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格. # http://ed ...
10款精选的后台管理系统，快来一起颤抖吧！
文章目录 1.vue2-manage 2.Cloud-Admin 3.Guns 4.Cloud-Platform 5.react-admin 6.hsweb 7.hxyFrame 8.XMall 9. ...
vue-element-admin 适合前端开发的后台管理系统模板
今天看到了一个后台管理系统,界面跟我之前看到的很相似,一问,才知道是从 vue-element-admin中下载的. vue-element-admin 是一个后台前端解决方案,它基于 vue 和 e ...
10款精选的后台管理系统
1.vue2-manage 此项目是 vue + element-ui 构建的后台管理系统,是后台项目node-elm 的管理系统,所有的数据都是从服务器实时获取的真实数据,具有真实的注册.登陆.管理 ...
Android中集成第三方库的方法和问题
Android中集成第三方库的方法和问题声明: 1. 本文參考了网上同学们的现有成果,在此表示感谢,參考资料在文后有链接. 2. 本文的重点在第三部分,是在开发中遇到的问题及解决的方法.第一,第二部 ...
vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇1】
项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了vue+element-ui JYAdmin 后台管理系统模板-集成方案,从零到一的手写搭建全过程. ...

后台管理系统[01第三方库集成]

1.1. vue.config.js中修改webpack配置

1.2. vue-router集成

1.3. vue-router集成

1.4 Element-plus集成（局部引入）

1.5 axios集成

其他：区分不同环境的三种方式

后台管理系统[01第三方库集成]相关推荐

最新文章

热门文章