vue项目目录结构

本文介绍的是使用vue-cli3创建的项目,这里记录我的习惯,大家可自行修改,并希望给出更好的见意,下面进入正题。

一、目录结构图

首先展示一下整体结构,如果不符合大家的预期,就不需要往下看了。下面分别说明各目录的功能。

vue项目目录结构_第1张图片

二、目录结构说明

目录 说明 备注
zqyl-web 项目名称 前台项目扩展:zqyl-web-pjs zqyl-web-crcl 后端项目扩展:zqyl-manager-base zqyl-manager-abs
dist 打包目录 默认打包生成的目录
node-modules 项目依赖  
public 入口页面目录 目录不参于打包,打包完成后存于根目录文件
index.html 入口页面  
project.config.json 项目配置文件 项目读取其中的配置资源,更改配置不需重新打包
src 项目源文件  
main 默认项目 一个项目需分多个子项目,可自行扩展
assets 项目资源  
font 第三方字体库 逐渐废掉,使用svg替代
images 静态图片  
interface 远程接口 接口定义中不读取配置信息,因涉及多服务读取
js 自定义JS文件  
rules 表单校验文件  
style 样式表 默认使用less
components 项目组件目录 用于存放独立功能或需多复用组件文件
global 全局注册目录 需注册到项目全局中的库文件
router 项目路由目录  
modules 路由模块定义 定义chunk(重要)
routers 路由地址定义 定义meta(如需)
index.js 路由入口文件 导入路由
store 项目状态目录  
modules 状态模块  
enum.js 状态数据 枚举文件,固定文件必需存在
index.js 状态入口文件  
template 模板目录 如需:存放项目模板,目录含components/images/js/store/js/style/App.vue
views 视图文件目录 根据项目状态,可自定义
entry_main.js 默认项目入口 名称可通过entry_*.js格式扩展
package.json 项目信息及项目包版本 当项目安装新依赖时需提交仓库
package.lock.json 锁定当前项目包信息及项目包版本  
vue.config.js 项目自定义配置 配置项目名及项目代理

 

你可能感兴趣的:(web前端)