About the project
- The currently
vue-cli
used version is 3.0.0. - The item
src
folder added some I wrotevue
some of the common directory when the project framework, the following will detail. - I have another project on the comments of the code to understand
vue-cli
this scaffolding. - That can not be used directly aimed at understanding vue-cli project structure.
- Some directories will have the following detailed description and links to the official website and related links.
The directory structure explained
|-- 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 // 项目说明
- About
editorconfig
some of the things the official website of the article - Something about eslint's official website Related Articles
src catalog description
src directory I added some sing when writing project to build their own directory structure
|-- 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 // 程序入口文件,加载各种公共组件