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

    所有数据都是本地json数据，因此一些功能无法完美展示，比如：分页，新增编辑，该项目目的是为了引导新手入门。如果你认为对你有帮助，可以去github上点个star，地址在文末。

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

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

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

 

 

• 使用npm全局安装vue-cli（前提是你已经安装了nodejs，否则你连npm都用不了）

npm install --global vue-cli

• webpack创建一个项目

vue init webpack <projectName>

• 然后进入文件目录安装依赖运行项目

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中引入使用 如图：
• 引入百度地图高德地图api 调用地图（这里我进行了封装成一个组件便于调用。主要功能是地图展示，定位经纬度，地址和模糊搜索）
  方法：在入口index中引入一下js调用地图

下面是项目截图：

 

 

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

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