vue 目录结构解析

Posted wxxbk

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 目录结构解析相关的知识,希望对你有一定的参考价值。

├── README.md 项目介绍
├── index.html 入口页面
├── build 构建脚本目录
│ ├── webpack.base.conf.js webpack基础配置,开发环境,生产环境都依赖
│ ├── webpack.dev.conf.js webpack开发环境配置
│ ├── webpack.prod.conf.js webpack生产环境配置
│ ├── build.js 生产环境构建脚本
│ ├── dev-server.js 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
│ ├── utils.js 构建相关工具方法
├── config 项目配置
│ ├── dev.env.js 开发环境变量
│ ├── index.js 项目配置文件
│ ├── prod.env.js 生产环境变量
├── src 源码目录
│ ├── main.js 入口文件
│ ├── config 入口相关配置文件
│ ├── app.vue 根组件
│ ├── components 公共组件目录
│ │ └── base 基础组件
│ │ └── layouts 布局组件
│ │ └──header 头部组件
│ │ └──index.vue
│ │ └──index.less
│ ├── styles 样式资源
│ │ └── index.less 样式入口
│ │ └── var.less 变量
│ │ └── reset.less 重置样式
│ │ └── common.less 公共样式
│ ├── images 图片资源
│ │ └── auth 验证模块图片
│ ├── pages 页面目录
│ │ └── auth 验证模块
│ │ └── login 登录文件
│ │ └── index.vue 登录页
│ │ └── index.less 登录页样式
│ ├── routes 路由目录
│ │ └── auth 验证模块
│ │ └── index.js 验证模块入口
│ │ └── index 所有模块汇总
│ ├── store 应用级数据(state)
│ │ └── index.js 所有模块数据汇总
│ │ └── auth 验证相关数据模块
│ │ └── index.js 验证模块入口
│ │ └── mutation-types.js 类型
│ │ └── actions.js actions
│ │ └── mutations.js mutations
│ │ └── getters.js getters
│ │ └── state.js 默认状态
│ ├── services 接口api定义
├── .eslintrc.js eslint规则配置
├── package.json

以上是关于vue 目录结构解析的主要内容,如果未能解决你的问题,请参考以下文章

.vue文件结构解析

vue的前端目录结构

Vue文件夹目录结构

vue项目各目录结构及作用

vue脚手架搭建

Vue.js 源码目录设计