码迷,mamicode.com
首页 > 其他好文 > 详细

Vue Vue项目目录结构梳理

时间:2019-12-24 13:45:18      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:main   view   assets   com   构建   ons   拷贝   依赖   www   

Vue项目目录结构梳理

 

by:授客 QQ1033553122

 

  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
 
 

Vue Vue项目目录结构梳理

标签:main   view   assets   com   构建   ons   拷贝   依赖   www   

原文地址:https://www.cnblogs.com/shouke/p/12090905.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!