Vue项目结构介绍

1,121 阅读2分钟

这里是搭建完环境或初始的项目结构

build目录是一些webpack的文件,配置参数什么的,一般不用动

config是vue项目的基本配置文件

node_modules是项目中安装的依赖模块

src源码文件夹,基本上文件都应该放在这里。

—assets 资源文件夹,里面放一些静态资源

—components这里放的都是各个组件文件

—App.vue App.vue组件

—main.js入口文件

static生成好的文件会放在这个目录下。

test测试文件夹,测试都写在这里

.babelrc babel编译参数,vue开发需要babel编译

.editorconfig 看名字是编辑器配置文件,不晓得是哪款编辑器,没有使用过。

.gitignore 用来过滤一些版本控制的文件,比如node_modules文件夹

index.html 主页

package.json 项目文件,记载着一些命令和依赖还有简要的项目描述信息

README.md 介绍自己这个项目的,想怎么写怎么写。不会写就参照github上star多的项目,看人家怎么写的

原文:blog.csdn.net/u013778905/… 下面是一个比较全的项目结构可根据项目需求自行删除 目录结构

├── index.html 入口页面

├── build                           构建脚本目录
│   ├── build-server.js                 运行本地构建服务器,可以访问构建后的页面
│   ├── build.js                        生产环境构建脚本
│   ├── dev-client.js                   开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新
│   ├── dev-server.js                   运行本地开发服务器
│   ├── utils.js                        构建相关工具方法
│   ├── webpack.base.conf.js            wabpack基础配置
│   ├── webpack.dev.conf.js             wabpack开发环境配置
│   └── webpack.prod.conf.js            wabpack生产环境配置
├── config                          项目配置
│   ├── dev.env.js                      开发环境变量
│   ├── index.js                        项目配置文件
│   ├── prod.env.js                     生产环境变量
│   └── test.env.js                     测试环境变量
├── mock                            mock数据目录
│   └── hello.js
├── package.json                    npm包配置文件,里面定义了项目的npm脚本,依赖包等信息
├── src                             项目源码目录    
│   ├── main.js                         入口js文件
│   ├── app.vue                         根组件
│   ├── components                      公共组件目录
│   │   └── title.vue
│   ├── assets                          资源目录,这里的资源会被wabpack构建
│   │   └── images
│   │       └── logo.png
│   ├── routes                          前端路由
│   │   └── index.js
│   ├── store                           应用级数据(state)
│   │   └── index.js
│   └── views                           页面目录
│       ├── hello.vue
│       └── notfound.vue
├── static                          纯静态资源,不会被wabpack构建。
└── test                            测试文件目录(unit&e2e)
    └── unit                            单元测试
        ├── index.js                        入口脚本
        ├── karma.conf.js                   karma配置文件
        └── specs                           单测case目录
            └── Hello.spec.js
            --------------------- 

原文:blog.csdn.net/u012207345/…