Vue Vue项目目录结构梳理
Vue项目目录结构梳理
by:授客 QQ:1033553122
- 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
- 2. 文件修改
调整目录后需要对相关文件进行修改
src/App.vue存放路径更改,需要修改默认src/main.js
修改
import App from './App'
为
import App from './app/App';
- 3. 参考链接
Vue Vue项目目录结构梳理的更多相关文章
- II、Vue的项目目录结构 一些语法
Vue目录结构 这是某闭源项目的web端目录结构: 目录解析: -目录/文件 - build 项目构建(webpack)相关代码 config 配置目录.端口号:也有默认的 node_modules ...
- 【vue】项目目录结构及使用多的知识点
项目目录: Node_modules/npm安装的该项目的依赖库 vuex/文件夹存放的是和 Vuex store 相关的东西(state对象,actions,mutations) router/文件 ...
- vue项目目录结构
VUE项目目录结构 如上图所示,我们的目录结构就是这样的了. 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管. config 配置目录,默认配置没 ...
- Vue.js-项目目录结构解析
1.Vue初始化项目目录如下: 2.目录各项含义如下:
- Laravel项目目录结构说明
Laravel项目目录结构说明: |- vendor 目录包含你的 Composer 依赖模块及laravel框架. |- bootstrap 目录包含几个框架启动跟自动加载配置的文件. |- app ...
- MVVM 模式下iOS项目目录结构详细说明
➠更多技术干货请戳:听云博客 我们在做项目的时候,会经常用到各种设计模式,最常见的要数 MVC (模型,视图,控制器)了.但是,今天我们要说的是另一种设计模式——MVVM. 所以 MVVM 到底是什么 ...
- 1-5Tomcat 目录结构 和 web项目目录结构
对应我的安装路径: web项目目录结构
- Android开发学习之路--Android Studio项目目录结构简介
既然已经搭建好环境了,那就对Android Studio中项目目录结构做个简单的了解了,这里以最简单的Hello工程为例子,新建好工程后看如下三个工程视图: 1.Android工程 manifests ...
- 【Android Studio安装部署系列】三、Android Studio项目目录结构
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 简单介绍下Android studio新建项目的目录结构. 常用项目结构类型 在Android Studio中,提供了以下几种项目结 ...
随机推荐
- 阶段3 1.Mybatis_03.自定义Mybatis框架_5.自定义Mybatis的编码-创建两个默认实现类并分析类之间的关系
把XMLConfigBuilder的包名补全 这样我们就可以调用里面的loadConfiguration方法了 创建工厂实现类 实现SqlSessionFactory的接口 实现接口里面的方法 把cf ...
- 《React+Redux前端开发实战》笔记1:不涉及React项目构建的Hello World案例
本小节实现一个不涉及项目构建的Hello World. [React的第一个Hello World网页] 源码地址:https://jsfiddle.net/allan91/2h1sf0ky/8/ & ...
- 【Windows Server存储】windows文件系统
windows文件系统 弹性文件系统(ReFS) 无检查磁盘,Windows 8或Windows Server 2012以上运行. 参考资料表明,这是一个失败的文件系统,以后将不会商用. 参考资料:h ...
- 深入理解java:2.2. 同步锁Synchronized及其实现原理
同步的基本思想 为了保证共享数据在同一时刻只被一个线程使用,我们有一种很简单的实现思想,就是 在共享数据里保存一个锁 ,当没有线程访问时,锁是空的. 当有第一个线程访问时,就 在锁里保存这个线程的标识 ...
- java文件编译后,出现xx$1.class的原因
java编译后的文件名字带有$接数字的就是匿名内部类的编译结果,接名字的就是内部类的编译结果 例如:TestFrame$1.class是匿名内部类的编译结果, TestFrame$MyJob.clas ...
- 扫描 + 注解完成bean的自动配置
链接:https://pan.baidu.com/s/1W3TINXNnqpxmkIADOcJZCQ 提取码:fmt5 我们知道,我们一般是通过id或name调用getBean方法来从IOC容器中获取 ...
- Windows netcat 的工具的简单使用
1. 下载 https://eternallybored.org/misc/netcat/ 2. 将目录添加到环境变量 C:\Work\netcat 3. 简单实验 4. 查看说明 UPDATE // ...
- HDU 1043 Eight 八数码问题 A*算法(经典问题)
HDU 1043 Eight 八数码问题(经典问题) 题意 经典问题,就不再进行解释了. 这里主要是给你一个状态,然后要你求其到达\(1,2,3,4,5,6,7,8,x\)的转移路径. 解题思路 这里 ...
- Proxy does not work using sudo in Debian
To resolve this issue you can add Defaults env_keep += "http_proxy https_proxy" to your /e ...
- Dire Wolf——HDU5115(区间DP)
题意 就是有一对狼,每个狼有初始的攻击力,并且还能给左右两边的狼提供攻击力加成,当冒险家杀死一头狼的时候他也会受到这个狼目前攻击力的伤害 实例解析 33 5 78 2 0 有三头狼,刚开始第二头狼给他 ...