自学element ui,vue-element-axios后台管理实例

    所有数据都是本地json数据(后续如果有时间可以考虑弄一个easy-mock),因此一些功能无法完美展示,比如:分页,新增编辑,该项目目的是为了引导新手入门。如果你认为对你有帮助,可以去github上点个star,地址在文末。

自学element ui,vue-element-axios后台管理实例_第1张图片

主要功能页面包括列表页列表搜索列表新增编辑百度编辑器的使用(商品编辑页)高德地图百度地图的调用

使用了vue router element ui  axios ueditor 和百度地图、高德地图。点击查看各自官网或者说明文档查看详情

该博客只进行简述一下步骤,可参考看一下是否需要,然后文末查看源码地址


  • 使用npm全局安装vue-cli(前提是你已经安装了nodejs,否则你连npm都用不了)
npm install --global vue-cli
  • webpack创建一个项目
vue init webpack 
  • 然后进入文件目录安装依赖运行项目
npm install
npm run dev

  • 安装element ui
npm i element-ui -S

  • 引入整个 Element,在项目的在main.js 中写入以下内容:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
  • 引入axios,用于处理数据与后台进行数据交,安装axios,并在mainjs中引入使用
npm install axios
import axios from 'axios'
Vue.prototype.$http = axios;
  • 引入ueditor 用于编辑页面富文本数据的编写
    首先下载百度编辑器文档,放在静态文件夹;然后再main.js中引入使用 如图: 自学element ui,vue-element-axios后台管理实例_第2张图片 自学element ui,vue-element-axios后台管理实例_第3张图片
  • 引入百度地图高德地图api 调用地图(这里我进行了封装成一个组件便于调用。主要功能是地图展示,定位经纬度,地址和模糊搜索)
    方法:在入口index中引入一下js调用地图 自学element ui,vue-element-axios后台管理实例_第4张图片

下面是项目截图:


自学element ui,vue-element-axios后台管理实例_第5张图片自学element ui,vue-element-axios后台管理实例_第6张图片自学element ui,vue-element-axios后台管理实例_第7张图片自学element ui,vue-element-axios后台管理实例_第8张图片自学element ui,vue-element-axios后台管理实例_第9张图片

自学element ui,vue-element-axios后台管理实例_第10张图片

自学element ui,vue-element-axios后台管理实例_第11张图片

项目地址: github,如果满意,请点一下星。

自学项目整理,可能不是很详细。不足之处不吝赐教。欢迎留言

你可能感兴趣的:(vue)