ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vue Vue项目目录结构梳理

2019-12-24 13:00:07  阅读:872  来源: 互联网

标签:Vue 配置文件 App 目录 js 存放 模块 test 梳理


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,配置文件,App,目录,js,存放,模块,test,梳理
来源: https://www.cnblogs.com/shouke/p/12090905.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有