所有数据都是本地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,如果满意,请点一下星。
自学项目整理,可能不是很详细。不足之处不吝赐教。欢迎留言