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项目目录结构梳理的更多相关文章

  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. Apache监控调优

    apache是一款对静态资源处理得比较好的中间件,但是对动态请求处理得不是很好,tomcat则正好相反. apache运用得比较多得工作模式主要是Prefork和Worker两种模式 1.Prefor ...

  2. LoadRunner之检查点

    一.什么是检查点 LoadRunner中检查点是用来判断脚本是否执行成功的.如果不加检查点,只要服务器返回的HTTP状态码是200,VuGen就认为脚本执行通过了.但是很多情况下服务器返回200并不代 ...

  3. javascript 访问 webservice

    xml: <?xml version="1.0" encoding="UTF-8"?> <boolean xmlns="http:/ ...

  4. Linux(Ubuntu)常用命令 & vim基本操作

    Linux先知: Linux历史: 关于这个我就不再多说了,其实是一个很有意思的故事串,网上找下一大堆. 类Unix系统目录结构: ubuntu没有盘符这个概念,只有一个根目录/,所有文件都在它下面 ...

  5. Struts2框架学习笔记1

    1,框架概述 1.1,什么是框架(了解) 将一些重复性的代码进行封装,简化程序员的编程操作,可以使得程序员在编码中把更多的精力放到业务需求的分析和理解上面,相当于一个半成品软件. 1.2,三大框架(掌 ...

  6. 你知道e.g.和i.e.的区别吗?

    见 i.e. 是对前面的完全举例,特指 e.g. 则是不完全举例,有可能是...也有可能是...还可能是其他. 注意,i.e. 和 e.g. 第二个点后面都常跟一个逗号.

  7. [Python3] 001 "Hello World" 与注释

    目录 1. 致敬 1.1 致敬 "Hello World" 1.2 致敬 Python 之父 Guido van Rossum 2. 注释 2.1 单行注释 2.2 多行注释 3. ...

  8. 关于XML的一些事

    XML:可扩展标记语言! 01.很像HTML 02.着重点是数据的保存 03.无需预编译 04.符合W3C标准 可扩展:我们可以自定义,完全按照自己的规划来! 标记:计算机所能认识的信息符号! 比如: ...

  9. cqoj921E整数匹配

    这是一个贪心题,把我坑的好惨,忘还原得70.上午被卡得,, 首先给出长度为n的一组数,可以两两配对相乘也可以进行相加,问怎样才可以使总和最大?那么可以显然看出来,当这个数为0或1时,我们要相加.其余进 ...

  10. [多校联考2019(Round 4 T1)][51nod 1295]Xor key(可持久化trie)

    [51nod 1295]Xor key(可持久化trie) 题面 给出一个长度为n的正整数数组A,再给出Q个查询,每个查询包括3个数,L, R, X (L <= R).求A[L] 至 A[R] ...