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

欢迎访问我的博客专题

源码可访问 Github 查看

vue开发几个概念

1. webpack：把所有东西变为js文件
2. vue、vuex、vue-router、axios
3. es6、babel

vue源码结构

image.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

git clone https://github.com/vuejs/vue-devtools.git

或者下载 vue-devtools-dev.zip 解压

2. 第二步：安装项目所需要的npm包

> cd C:\Users\LR\Desktop\vue-devtools-dev
> npm install //如果太慢的话，可以安装一个cnpm, 然后命令换成 cnpm install

3. 第三步：编译项目文件

> npm run build

4. 第四步：添加至chrome游览器

游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序...”按钮，选择vue-devtools>shells下的chrome文件夹。

/**
*如果看不见“加载已解压的扩展程序...”按钮，则需要勾选“开发者模式”。
*/

image.png

关闭浏览器，重新打开，浏览器和url，按F12进入开发者工具

image.png