您现在的位置是：网站首页 >Django >Vue+Django REST framework前后端分离生鲜电商 Django

【Vue+DRF生鲜电商】04.Vue项目结构介绍

admin2019年4月21日 11:50 【Django | Python | Vue 】 1497人已围观

Vue+Django REST framework前后端分离生鲜电商简介 Vue+Django REST framework 打造前后端分离的生鲜电商项目（慕课网视频）。 Github地址：https://github.com/xyliurui/DjangoOnlineFreshSupermarket ； Django版本：2.2、djangorestframework：3.9.2。前端Vue模板可以直接联系我拿。

## vue开发几个概念 1. webpack：把所有东西变为js文件 2. vue、vuex、vue-router、axios 3. es6、babel ## vue源码结构 ![BLOG_20190421_115107_37](/media/blog/images/2019/04/BLOG_20190421_115107_37.png "博客图集BLOG_20190421_115107_37.png") **src/api** 所有组件的api都是在这里面配置的 **src/axios** http request 拦截器，比如404、500错误拦截 **src/components** 基础的组件 **src/router** vue-router配置 **src/static** 全局的静态文件 **src/store** vuex放的内容 **src/style** 样式文件 **src/views** 所有的组件 ## vue谷歌调试插件每个页面组成部门：插件 1. 第一步：找到vue-devtools的github项目，并将其clone到本地. [vue-devtools](https://github.com/vuejs/vue-devtools) ``` git clone https://github.com/vuejs/vue-devtools.git ``` 或者下载 vue-devtools-dev.zip 解压 2. 第二步：安装项目所需要的npm包 ```bat > cd C:\Users\LR\Desktop\vue-devtools-dev > npm install //如果太慢的话，可以安装一个cnpm, 然后命令换成 cnpm install ``` 3. 第三步：编译项目文件 ```bat > npm run build ``` 4. 第四步：添加至chrome游览器 ``` 游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择vue-devtools>shells下的chrome文件夹。 /** *如果看不见“加载已解压的扩展程序...”按钮，则需要勾选“开发者模式”。 */ ``` ![BLOG_20190421_115046_36](/media/blog/images/2019/04/BLOG_20190421_115046_36.png "博客图集BLOG_20190421_115046_36.png") 关闭浏览器，重新打开，浏览器和url，按F12进入开发者工具 ![BLOG_20190421_115040_44](/media/blog/images/2019/04/BLOG_20190421_115040_44.png "博客图集BLOG_20190421_115040_44.png")