Vue Vue项目目录结构梳理

Vue项目目录结构梳理

 

by:授客 QQ：1033553122

 

1. 1.   结构梳理

 

.

├── build/                      # webpack 配置文件；

│   └── ...

├── config/                      # 与项目构建相关的常用的配置选项；

│   ├── index.js                # 主配置文件

│   ├── dev.env.js              # 开发环境变量

│   ├── prod.env.js             # 生产环境变量

│   └── test.env.js             # 测试环境变量

│

├── src/

│   ├── main.js                 # webpack 的入口文件；

│   ├── mock/                   # 存放mockjs数据文件，建议添加modules存放不同模块的mock数据 .js文件；

│   ├── store/                   # 存放store仓库文件；

│   ├── common/                 # 存放项目共用的资源，如：常用的图片、图标，共用的组件、模块、样式，常量文件等等；

│   │   ├── assets/             # 存放项目共用的代码以外的资源，如：图片、图标、视频 等；

│   │   ├── components/         # 存放项目共用的组件，如：封装的导航条、选项卡等等； 备注：这里的存放的组件应该都是展示组件；

│   │   ├── network/            # 存放项目的网络模块，如：接口；

│   │   ├── compatible/         # 存放项目的兼容模块，如：适合App和微信各种接口的模块；

│   │   ├── extension/          # 存放已有类的扩展模块，如：对 Array 类型进行扩展的模块；

│   │   ├── libraries/          # 存放自己封装的或者引用的库；

│   │   ├── utils/              # 自己封装的一些工具

│   │   ├── constant.js         # 存放js的常量；

│   │   ├── constant.scss       # 存放scss的常量；

│   │   └── ...

│   └── app/                    # 存放项目业务代码；

│       ├── App.vue             # app 的根组件；

│       └── ...

├── views                        # 我们的页面组件文件夹

│   ├── content.vue             # 准备些 cnodejs 的内容页面

│   └── index.vue               # 准备些 cnodejs 的列表页面

├── style                        # 样式存放目录

│   └── index.css               # 主样式文件

│

├── static/                     # 纯静态资源，该目录下的文件不会被webpack处理，只会被拷贝到输出目录下；

├── test/                       # 测试

│   ├── unit/                   # 单元测试

│   │   ├── specs/              # test spec files

│   │   ├── eslintrc            # 专为单元测试配置的eslint配置文件

│   │   ├── index.js            # 测试编译的入口文件

│   │   ├── jest.conf.js        # Jest的配置文件

│   │   └── karma.conf.js       # Karma的配置文件

│   │   └── setup.js            # 在Jest之前运行的启动文件；

│   └── e2e/                    # e2e 测试

│       ├── specs/              # test spec files

│       ├── custom-assertions/  # 自定义的断言

│       ├── runner.js           # test runner 脚本

│       └── nightwatch.conf.js  # test runner 的配置文件

├── .babelrc                    # babel 的配置文件

├── .editorconfig               # 编辑器的配置文件；可配置如缩进、空格、制表类似的参数；

├── .eslintrc.js                # eslint 的配置文件

├── .eslintignore               # eslint 的忽略规则

├── .gitignore                  # git的忽略配置文件

├── .postcssrc.js               # postcss 的配置文件

├── index.html                  # HTML模板,入口页面

├── package.json                # npm包配置文件，里面定义了项目的npm脚本，依赖包等信息

└── README.md

 

 

1. 2.   文件修改

调整目录后需要对相关文件进行修改

src/App.vue存放路径更改，需要修改默认src/main.js

修改

import App from './App'

为

import App from './app/App';

 

 

 

1. 3.   参考链接

https://www.jianshu.com/p/75cf57e53451

https://www.cnblogs.com/zhaowy/p/8513070.html