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 的根组件;

│       └── ...

  1. ├── views                        # 我们的页面组件文件夹
  1.    ├── content.vue             # 准备些 cnodejs 的内容页面
  1.    └── index.vue               # 准备些 cnodejs 的列表页面
  1. ├── style                        # 样式存放目录
  1.    └── 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.   参考链接
  1. https://www.jianshu.com/p/75cf57e53451
  1. https://www.cnblogs.com/zhaowy/p/8513070.html
  1.  
  1.  

Vue Vue项目目录结构梳理的更多相关文章

  1. II、Vue的项目目录结构 一些语法

    Vue目录结构 这是某闭源项目的web端目录结构: 目录解析: -目录/文件 - build 项目构建(webpack)相关代码 config 配置目录.端口号:也有默认的 node_modules ...

  2. 【vue】项目目录结构及使用多的知识点

    项目目录: Node_modules/npm安装的该项目的依赖库 vuex/文件夹存放的是和 Vuex store 相关的东西(state对象,actions,mutations) router/文件 ...

  3. vue项目目录结构

    VUE项目目录结构 如上图所示,我们的目录结构就是这样的了. 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管. config 配置目录,默认配置没 ...

  4. Vue.js-项目目录结构解析

    1.Vue初始化项目目录如下: 2.目录各项含义如下:

  5. Laravel项目目录结构说明

    Laravel项目目录结构说明: |- vendor 目录包含你的 Composer 依赖模块及laravel框架. |- bootstrap 目录包含几个框架启动跟自动加载配置的文件. |- app ...

  6. MVVM 模式下iOS项目目录结构详细说明

    ➠更多技术干货请戳:听云博客 我们在做项目的时候,会经常用到各种设计模式,最常见的要数 MVC (模型,视图,控制器)了.但是,今天我们要说的是另一种设计模式——MVVM. 所以 MVVM 到底是什么 ...

  7. 1-5Tomcat 目录结构 和 web项目目录结构

    对应我的安装路径: web项目目录结构

  8. Android开发学习之路--Android Studio项目目录结构简介

    既然已经搭建好环境了,那就对Android Studio中项目目录结构做个简单的了解了,这里以最简单的Hello工程为例子,新建好工程后看如下三个工程视图: 1.Android工程 manifests ...

  9. 【Android Studio安装部署系列】三、Android Studio项目目录结构

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 简单介绍下Android studio新建项目的目录结构. 常用项目结构类型 在Android Studio中,提供了以下几种项目结 ...

随机推荐

  1. 阶段3 1.Mybatis_03.自定义Mybatis框架_5.自定义Mybatis的编码-创建两个默认实现类并分析类之间的关系

    把XMLConfigBuilder的包名补全 这样我们就可以调用里面的loadConfiguration方法了 创建工厂实现类 实现SqlSessionFactory的接口 实现接口里面的方法 把cf ...

  2. 《React+Redux前端开发实战》笔记1:不涉及React项目构建的Hello World案例

    本小节实现一个不涉及项目构建的Hello World. [React的第一个Hello World网页] 源码地址:https://jsfiddle.net/allan91/2h1sf0ky/8/ & ...

  3. 【Windows Server存储】windows文件系统

    windows文件系统 弹性文件系统(ReFS) 无检查磁盘,Windows 8或Windows Server 2012以上运行. 参考资料表明,这是一个失败的文件系统,以后将不会商用. 参考资料:h ...

  4. 深入理解java:2.2. 同步锁Synchronized及其实现原理

    同步的基本思想 为了保证共享数据在同一时刻只被一个线程使用,我们有一种很简单的实现思想,就是 在共享数据里保存一个锁 ,当没有线程访问时,锁是空的. 当有第一个线程访问时,就 在锁里保存这个线程的标识 ...

  5. java文件编译后,出现xx$1.class的原因

    java编译后的文件名字带有$接数字的就是匿名内部类的编译结果,接名字的就是内部类的编译结果 例如:TestFrame$1.class是匿名内部类的编译结果, TestFrame$MyJob.clas ...

  6. 扫描 + 注解完成bean的自动配置

    链接:https://pan.baidu.com/s/1W3TINXNnqpxmkIADOcJZCQ 提取码:fmt5 我们知道,我们一般是通过id或name调用getBean方法来从IOC容器中获取 ...

  7. Windows netcat 的工具的简单使用

    1. 下载 https://eternallybored.org/misc/netcat/ 2. 将目录添加到环境变量 C:\Work\netcat 3. 简单实验 4. 查看说明 UPDATE // ...

  8. HDU 1043 Eight 八数码问题 A*算法(经典问题)

    HDU 1043 Eight 八数码问题(经典问题) 题意 经典问题,就不再进行解释了. 这里主要是给你一个状态,然后要你求其到达\(1,2,3,4,5,6,7,8,x\)的转移路径. 解题思路 这里 ...

  9. 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 ...

  10. Dire Wolf——HDU5115(区间DP)

    题意 就是有一对狼,每个狼有初始的攻击力,并且还能给左右两边的狼提供攻击力加成,当冒险家杀死一头狼的时候他也会受到这个狼目前攻击力的伤害 实例解析 33 5 78 2 0 有三头狼,刚开始第二头狼给他 ...