vue-cli-element-starter(vue-cli 和 element 结合的项目开发模板)

介绍一个结合Vue、Vue CLI、Element UI、Vuex等技术的快速开发模板,该模板集成了axios并对其进行了封装,实现请求时自动加载效果及错误提示,支持并发请求、路由切换时取消请求、本地代理配置等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

新项目每次都需要去配置一个新的开发环境,索性直接搭一个模板,为以后快速开发使用。

项目地址:vue-cli-element-starter

vue-cli 和 element 结合的项目开发模板,主要内容如下(后续新增的内容会在其后使用方括号标识添加时间):

  1. axios 或者 $axios 添加到 Vue.prototype ,对 axios 的封装是基于 vue-cli-plugin-axios 插件。
  2. axios 的拦截器进行配置,调用 axios 发送请求的时候自动添加 loading 效果,请求返回的时候,判断请求内容的正确,错误的话直接提示错误信息。
  3. 并发请求时,只有当最后一个请求完成的时候才会关闭 loading 效果。
  4. 添加在路由切换的时候取消上个页面未完成的 axios 请求。
  5. 添加本地代理 http-proxy-middleware 及相应的配置说明。
  6. 添加工具文件 findComponents.js ,看名字应该就知道是查找组件的相关方法,如需使用请自行引入。 [2019-04-20]
  7. 添加 normalize.csscommon.scss ,如需使用请自行引入。 [2019-04-20]
  8. 增加自定义参数: [2019-05-19]
    1. showLoading: 是否需要 loading 加载,至于样式仍是有你自由控制。
    2. 关于在短时间内发送多条相同请求处理逻辑的相关字段:
      1. 本插件默认是按照仅保留最初的发送请求链接。
      2. needLast: 需要最新的发送请求链接,以前发送的可以直接 cancel ,这种情况一般适用于搜索框发送请求。
      3. needAll: 所有的发送请求链接都需要

模板说明

  1. 本模板暂时的技术栈为: vue + vue-cli + vue-router + vuex + element-ui + axios + sass(如果你使用的是其他的css预编译器请自行配置)

项目使用

  1. 先将本项目 Fork 到你的 github ,方便日后你对其进行修改。
  2. 将你 github 上的远程库克隆到本地。

安装依赖及插件

npm install

启动开发模式(热更新)

npm run serve

生产模式打包

npm run build

更多详细配置

请看 Configuration Reference

如果你使用的是 vue ui ,会发现项目名称可能不是你需要的,这个时候只需要将 package.jsonpackage-lock.json 文件中的 name 修改为你希望的名称。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值