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

╰半夏微凉° 2022-05-22 11:07 166阅读 0赞

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

![70][]

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

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

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

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

下面是项目截图：

![70 4][]![70 5][]![70 6][]![70 7][]![70 8][]

![70 9][]

![70 10][]

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

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

[70]: /images/20220522/2aea1153b4c34e1395aa6d7dbb09ecc1.png
[vue]: https://cn.vuejs.org/
[router]: https://router.vuejs.org/zh/
[element ui]: http://element.eleme.io/#/zh-CN
[axios]: https://www.kancloud.cn/yunye/axios/234845
[ueditor]: http://fex.baidu.com/ueditor/
[Link 1]: https://lbsyun.baidu.com/index.php?title=jspopular
[Link 2]: http://lbs.amap.com/api/webservice/summary/
[70 1]: https://img-blog.csdn.net/20180623002317978?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220522/96ec0c334014402e96fc16f89457f31f.png
[70 3]: /images/20220522/f38683ed23d642aca1c3cf02b5107771.png
[70 4]: https://img-blog.csdn.net/20180623003158287?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 5]: https://img-blog.csdn.net/20180623003210695?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 6]: https://img-blog.csdn.net/20180623003219325?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 7]: https://img-blog.csdn.net/20180623003915170?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 8]: /images/20220522/72025c397cd94005865d9822c8caa859.png
[70 9]: /images/20220522/e5cce01eed254790a2c280749c78569b.png
[70 10]: /images/20220522/7423f673590a4de799948623f7572e3b.png
[github]: https://github.com/SnowBeatRain/vue-element-axios-ueditor-map