关于项目
- 目前该
vue-cli
使用的是 3.0.0 版本。 - 该项的
src
文件夹中加入了一些我在写vue
项目时的一些常用目录构架,下面会详细说。 - 另外项目中我都有对代码的注释,来了解
vue-cli
这个脚手架。 - 该项并不可以直接使用,目的是了解vue-cli 项目结构。
- 某些目录下面也会有详细的说明和官网链接以及相关文章链接。
目录结构讲解
|-- build // 项目构建(webpack以及简易node服务)相关代码
| |-- build.js // 生产环境构建代码 (执行npm run build 时,执行此文件)
| |-- check-version.js // 检查node、npm等版本
| |-- utils.js // 主要处理一些css相关的loader
| |-- vue-loader.config.js // vue-loader 的配置项设置(utils 中的一些配置,也是在这里传进去的)
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- router // 路由文件
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 静态文件,比如一些不需要编译的图片、font字体、json数据等
|-- test // 关于测试的文件
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义和维护一致的编码风格 1
|-- .eslintignore // 设置那些文件忽略eslint 代码检测 2
|-- .eslintrc.js // eslint代码检测配置 2
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcssrc.js // 处理css 比如,给css加上兼容性前缀
|-- index.html // 入口页面
|-- package.json // 项目基本信息
|-- package-lock.json // 锁定插件版本的文件(当你第二下载插件时,自动生成)
|-- README.md // 项目说明
src 目录说明
src目录中我添加了一些自己写项目时唱搭建的目录结构
|-- src // 源码目录
| |-- api // api请求接口目录(里面apis 存储所有api接口,还可以对应页面建目录,来写api请求)
| | |--apis // 存储所有api接口
| |-- components // vue公共组件
| | |-- layout // 存放页面整体结构目录(例如头部,尾部,客服浮动框)
| | |-- Home.vue // 网站首页
| | |-- Main.vue // 网站整体构架的搭建
| |-- public // 公共方法
| |-- store // vuex的状态管理
| |-- router // 路由文件
| |-- theme // 存放一些公共主题样式,比如页面的主色调,副色调,hover色调,按钮色调
| |-- utils // 针对项目对异步请求的一些封装目录(我这里对axios进行了简单的封装)
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件