sass-loader/vuex 等的引入说明

tips:vue-cli 4.x脚手架封装度更高，配置起来简单许多，旨在让用户把精力都放在编写业务代码中

vue-cli 4.x在创建时已经选择了相应依赖，因此项目创建好后，基本的依赖都有。不需要重复安装。

引入 element

vue-cli 4.x 引入 element 可谓是相当的方便，只需要执行下方语句，即可引入element。

  1. vue add element

有两个选项，根据需求选择，

  • How do you want to import Element? Import on demand #这里选择的是按需引入。只引入需要的组件，以达到减小项目体积的目的。
  • Choose the locale you want to load zh-CN # 选择加载环境，这里选择的是中文

需要使用什么组件，在plugins下的 element.js 中添加对应的组件。以减小项目体积。

TIPS：此种方式会自动引入样式

引入 axios

更多关于axios的信息，请看我另一篇文章，传送门

axios 是一个基于 Promise 用于浏览器和 nodejs 的 HTTP 客户端，项目与后端的请求交互需要使用到 axios，执行以下命令，安装 axios 依赖。

  1. npm i axios

1.基本使用

安装完成后，可以直接在界面上引入 axios 然后使用 axios.get 就能直接发起 get 请求。

  1. import axios from 'axios'
  3. axios.get('url').then((data) => {
  4.     console.log(data)
  5. })

2.封装使用

2.1 开发环境配置请求地址

首先在.env.development文件中配置 需要发起 请求的地址，VUE_APP_BASE_RUL='https://www.fastmock.site/mock/37b157378200e4dbd5eecff887e20f81/lion/'

需要特别注意的是 .env.production和.env.development文件 参数说明：

  • NODE_ENV - 是 “development”、“production” 、"test"或者自定义的值。具体的值取决于应用运行的模式
  • BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径
  • 除了 NODEENV 和 BASE_URL，其他的环境变量必须以 VUE_APP 开头
  • 项目中使用：process.env.环境变量名，eg：VUE_APP_BASE_URL

2.2 配置代理

然后，若要配置跨域处理的话，在vue.config.js文件中添加访问代理。

  1. module.exports = {
  2.     publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  3.     outputDir: 'dist', //默认输出到该文件夹，生成时会自动删除该文件
  4.     assetsDir: 'static',
  5.     lintOnSave: true, // 是否开启eslint保存检测
  6.     productionSourceMap: false, // 是否在构建生产包时生成sourcdeMap
  7.     chainWebpack: (config) => {
  8.         config.resolve.alias.set('@', resolve('src')).set('views', resolve('src/views'))
  9.         // config.optimization.runtimeChunk('single')
  10.     },
  11.     devServer: {
  12.         host: 'localhost',
  13.         port: '8080',
  14.         hot: true,
  15.         open: true,
  16.         overlay: {
  17.             warning: false,
  18.             error: true,
  19.         },
  20.         proxy: {
  21.             [process.env.VUE_APP_BASE_RUL]: {
  22.                 target: process.env.VUE_APP_BASE_RUL,
  23.                 changeOrigin: true,
  24.                 secure: false,
  25.                 pathRewrite: {
  26.                     ['^' + process.env.VUE_APP_BASE_RUL]: '',
  27.                 },
  28.             },
  29.         },
  30.     },
  31. }

2.3 添加接口相关文件

相关文件说明：

    1. config.js：axios 默认配置，请求基本 url。
    1. axiosHttp.js：二次封装 axios 模块，包含拦截器等信息。
    1. index.js：请求接口汇总模块，聚合模块 API。 在 main.js 文件中按插件引入

在 src/api 文件夹下添加 config.js配置文件

  1. const baseUrl = process.env.VUE_APP_BASE_RUL
  2. export default {
  3.     method: 'get',
  4.     // 基础url前缀
  5.     baseURL: baseUrl,
  6.     // 请求头信息
  7.     headers: {
  8.         'Content-Type': 'application/json;charset=UTF-8',
  9.     },
  10.     // 参数
  11.     data: {},
  12.     // 设置超时时间
  13.     timeout: 10000,
  14.     // 返回数据类型
  15.     responseType: 'json',
  16. }

在 src/api 文件夹下添加 axiosHttp.js配置文件

  1. import axios from 'axios'
  2. import qs from 'qs'
  3. import router from '@/router'
  4. import config from './config'
  5. import { Message } from 'element-ui'
  7. axios.defaults.timeout = config.timeout
  8. axios.defaults.headers = config.headers
  9. axios.defaults.baseURL = config.baseURL
  11. // 请求拦截器
  12. axios.interceptors.request.use(
  13.     (config) => {
  14.         // 触发loading效果
  15.         //判断是否存在token,如果存在，则在header上加上token
  16.         // let token = getStore('token')
  17.         // if (token) {
  18.         //     config.headers.common['token'] = token
  19.         // }
  20.         if (config.method == 'post' || config.method == 'put') {
  21.             //将数据转成string
  22.             config.data = JSON.stringify(config.data)
  23.         } else if (config.method == 'get') {
  24.             //&& browser.isIE
  25.             //给Get添加时间戳 解决IE缓存问题
  26.             let symbol = config.url.indexOf('?') >= 0 ? '&' : '?'
  27.             config.url += symbol + '_=' + Date.now()
  28.             config.data = qs.stringify(config.data)
  29.         }
  30.         return config
  31.     },
  32.     (err) => {
  33.         // 关闭loading
  34.         // 失败提示
  35.         return Promise.resolve(err)
  36.     }
  37. )
  39. // 响应拦截器
  40. axios.interceptors.response.use(
  41.     (response) => {
  42.         // 关闭loading
  43.         if (!response || !response.data || !response.data.success) {
  44.             // 失败提示
  45.         } else if (response.data.data && response.data.code == 200) {
  46.             // 成功处理
  47.         }
  48.         if (response.data) {
  49.             switch (response.data.code) {
  50.                 case 401:
  51.                     // 返回 401 清除token信息并跳转到登录页面
  52.                     // store.commit('LOGOUT')
  53.                     Message.error('登录已失效，请重新登录')
  54.                     setTimeout(function () {
  55.                         router.replace({
  56.                             path: '/login',
  57.                             // 登录成功后跳入浏览的当前页面
  58.                             query: { redirect: router.currentRoute.fullPath },
  59.                         })
  60.                     }, 1500)
  61.                     break
  62.                 case 402:
  63.                     //402无权限操作
  64.                     Message.error('无权限操作')
  65.                     return new Promise(() => {}) //外部不会再处理
  66.                     break
  67.             }
  68.         }
  69.         return response
  70.     },
  71.     (err) => {
  72.         // 关闭loading
  73.         // 提示异常
  74.         let errMessage = ''
  75.         if (err && err.response) {
  76.             switch (err.response.status) {
  77.                 case 400:
  78.                     errMessage = '请求错误'
  79.                     break
  80.                 case 401:
  81.                     errMessage = '未授权，请登录'
  82.                     break
  83.                 case 403:
  84.                     errMessage = '拒绝访问'
  85.                     break
  86.                 case 404:
  87.                     errMessage = `请求发生错误`
  88.                     // err.response.config.url
  89.                     break
  90.                 case 408:
  91.                     errMessage = '请求超时'
  92.                     break
  93.                 case 500:
  94.                     errMessage = '服务器内部错误'
  95.                     break
  96.                 case 501:
  97.                     errMessage = '服务未实现'
  98.                     break
  99.                 case 502:
  100.                     errMessage = '网关错误'
  101.                     break
  102.                 case 503:
  103.                     errMessage = '服务不可用'
  104.                     break
  105.                 case 504:
  106.                     errMessage = '网关超时'
  107.                     break
  108.                 case 505:
  109.                     errMessage = 'HTTP版本不受支持'
  110.                     break
  111.                 default:
  112.                     errMessage = '服务器开小差了，请稍后再试'
  113.             }
  114.         }
  115.         Message.error(errMessage)
  116.         //外部不会再处理
  117.         return new Promise(() => {})
  118.     }
  119. )
  120. export default {
  121.     Get(url, params = {}) {
  122.         return new Promise((resolve, reject) => {
  123.             axios
  124.                 .get(url, { params })
  125.                 .then((res) => {
  126.                     resolve(res.data)
  127.                 })
  128.                 .catch((error) => {
  129.                     reject(error)
  130.                     //resolve(error)
  131.                 })
  132.         })
  133.     },
  134.     Post(url, params = {}) {
  135.         return new Promise((resolve, reject) => {
  136.             axios
  137.                 .post(url, params)
  138.                 .then((res) => {
  139.                     resolve(res.data)
  140.                 })
  141.                 .catch((error) => {
  142.                     reject(error)
  143.                     //resolve(error)
  144.                 })
  145.         })
  146.     },
  147.     Delete(url, params = {}) {
  148.         return new Promise((resolve, reject) => {
  149.             axios
  150.                 .delete(url, params)
  151.                 .then((res) => {
  152.                     resolve(res.data)
  153.                 })
  154.                 .catch((error) => {
  155.                     reject(error)
  156.                     //resolve(error)
  157.                 })
  158.         })
  159.     },
  160.     Put(url, params = {}) {
  161.         return new Promise((resolve, reject) => {
  162.             axios
  163.                 .put(url, params)
  164.                 .then((res) => {
  165.                     resolve(res.data)
  166.                 })
  167.                 .catch((error) => {
  168.                     reject(error)
  169.                     //resolve(error)
  170.                 })
  171.         })
  172.     },
  173. }

在 src/api/modules 文件夹下添加 user.js文件

  1. import axios from '@/api/axiosHttp'
  3. export const login = (params) => {
  4.     return axios.Post('/login', params)
  5. }
  7. export const test = () => {
  8.     return axios.Get('/test')
  9. }

在 src/api 文件夹下添加 index.js文件

  1. /*
  2.  * 接口统一集成模块
  3.  */
  4. import * as user from '@/api/modules/user'
  6. // 默认全部导出
  7. export default {
  8.     ...user,
  9. }

可以在 main.js 中将所有的 接口都挂在到原型链上，也可以界面引入需要的接口

  1. 需要使用原型链方式的，代码如下：
  1. # main.js 文件
  2. import api from '@/api'
  3. Vue.prototype.$api = api
  5. # app.vue 文件
  6. methods: {
  7.     loginFunc() {
  8.         this.$api.login({ username: 'admin', password: '123456' }).then((data) => {
  9.             this.$message({
  10.                 type: 'success',
  11.                 message: JSON.stringify(data),
  12.             })
  13.         })
  14.     },
  15. },
  1. 单个界面引入需要的接口
  1. # app.vue 文件
  2. import { login } from '@/api/modules/user'
  3. export default {
  4.     name: 'app',
  5.     components: {
  6.     },
  7.     data() {
  8.         return {}
  9.     },
  10.     methods: {
  11.         loginFunc() {
  12.             console.log(login)
  13.             // console.log(this.$api.user.login)
  14.             login({ username: 'admin', password: '123456' }).then((data) => {
  15.                 this.$message({
  16.                     type: 'success',
  17.                     message: JSON.stringify(data),
  18.                 })
  19.             })
  20.         },
  21.     },
  22. }

原文地址：http://book.levy.net.cn/doc/frontend/uiframe/utils_import.html

Vue管理系统前端系列二相关工具引入及封装的更多相关文章

  1. Vue管理系统前端系列一vue-cli4.x 初始化项目

    目录 项目介绍 技术基础 开发环境 安装工具 快速原型开发 创建项目 配置相关说明 目录结构 项目介绍 lion-ui 是一个基于 RBAC 的管理系统前端项目,采用 vue 和 element-ui ...

  2. Vue管理系统前端系列三登录页和首页及`vuex`管理登录状态

    目录 登录页面设计 vuex 对应 用户模块 丰富界面 首页相关代码 登录页面设计 该节记录了登录界面的设计,以及 vuex 的简单实用,然后将首页简单搭建完成. 先看最终效果图 先在 views 文 ...

  3. Vue管理系统前端系列四组件拆分封装

    目录 组件封装 首页布局拆分后结构 拆分后代码 状态管理中添加 app 模块 组件封装 在上一篇记录中,首页中有太多的代码,为了避免代码的臃肿,需要对主要的功能模块拆分,来让代码看起来更简洁,且能进行 ...

  4. Vue管理系统前端系列六动态路由-权限管理实现

    目录 为什么要使用动态路由? 主流的两种实现方式 前端控制 后端控制 后端控制路由 实现 添加菜单接口 及 菜单状态管理 根据得到的菜单生成动态路由 根据 vuex 中的暂存的菜单生成侧边菜单栏 退出 ...

  5. Vue管理系统前端系列五自定义主题

    目录 自定义主题 1.安装「主题生成工具」 2.安装白垩主题 3.新建颜色挑选组件 自定义主题 1.安装「主题生成工具」 由于主题工具需要依赖于 node-sass,而node-sass版本兼容性并不 ...

  6. 手牵手，从零学习Vue源码 系列二（变化侦测篇）

    系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 陆续更新中... 预计八月中旬更新完毕. 1 概述 Vue最大的特点之一就是数据驱动视 ...

  7. 【转】手摸手，带你用vue撸后台 系列二(登录权限篇)

    前言 拖更有点严重,过了半个月才写了第二篇教程.无奈自己是一个业务猿,每天被我司的产品虐的死去活来,之前又病了一下休息了几天,大家见谅. 进入正题,做后台项目区别于做其它的项目,权限验证与安全性是非常 ...

  8. 三、VUE项目BaseCms系列文章：axios 的封装

    项目开发中 ajax 是不可缺少的,一个好的封装可以减少我们很多的重复代码,维护也更方便.在 vue 开发中我们用的比较多的就是 axios.下面代码是项目中用到的 axios 的封装. http.j ...

  9. 【转】手摸手，带你用vue撸后台 系列三(实战篇)

    前言 在前面两篇文章中已经把基础工作环境构建完成,也已经把后台核心的登录和权限完成了,现在手摸手,一起进入实操. Element 去年十月份开始用vue做管理后台的时候毫不犹豫的就选择了Elemen, ...

随机推荐

  1. vue学习(十二) 指令v-if v-show 控制页面标签的显示与隐藏

    //html <div id="app"> <input type="button" value="toggle" @cl ...

  2. ~~并发编程（十一）：GIL全局解释锁~~

    进击のpython ***** 并发编程--GIL全局解释锁 这小节就是有些"大神"批判python语言不完美之处的开始 这一节我们要了解一下Cpython的GIL解释器锁的工作机 ...

  3. PHPExcel将Excel数据导入数据库

    <?php //PHPExcel读取导入Excel数据到数据库(2003,2007通用)使用方法: //先用excel2array()方法将excel表中的数据存储到数组,在从遍历二维数组将数据 ...

  4. Android多线程--AsyncTask

    常见的多线程方法有: 继承Thread类 实现Runnable接口 Handler AsyncTask HandlerThread 1.定义 一个Android已经封装好的轻量级异步类 属于抽象类,即 ...

  5. 关于android的监听器

    import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bu ...

  6. 在excel中如何给一列数据批量加上双引号

    在实际开发中,会遇到这样的需求,大量的数据,需要从配置文件里读取,客户给到的枚举值是字符串,而配置文件里的数据,是json格式,需要加上双引号,这样就需要使用Excel来批量格式化一下数据. 客户给到 ...

  7. Day15_阿里短信

    学于黑马和传智播客联合做的教学项目 感谢 黑马官网 传智播客官网 微信搜索"艺术行者",关注并回复关键词"乐优商城"获取视频和教程资料! b站在线视频 1.开通 ...

  8. PHP uniqid() 函数

    实例 生成一个唯一的 ID: <?phpecho uniqid();?>高佣联盟 www.cgewang.com 定义和用法 uniqid() 函数基于以微秒计的当前时间,生成一个唯一的 ...

  9. PDO::getAttribute

    PDO::getAttribute — 取回一个数据库连接的属性(PHP 5 >= 5.1.0, PECL pdo >= 0.1.0) 说明 语法 mixed PDO::getAttrib ...

  10. dsu on tree详解

    这个算法还是挺人性化的,没有什么难度 就是可能看起来有点晕什么的. 大体 思想是 利用重链刨分来优化子树内部的查询. 考虑一个问题要对每个子树都要询问一次.我们暴力显然是\(n^2\)的. 考虑一下优 ...