怎样理解 Vue 项目的目录结构?

  Vue 项目的目录结构如下, 我们将会在后面逐个去了解它们的作用:

01. build - 存储项目构建相关的代码, 比如 webpack.

02. config - Vue 的配置目录,包括端口号等, 分为开发环境 / 测试环境 / 生产环境.

03. node_modules - 存储项目的各种依赖模块, 比较大, 平时通过 npm install xxx 安装的库就放在这里

04. src - 项目的开发目录, 包括图片目录 / 入口文件 / 组件 / 路由 / 核心文件等

05. static - 静态资源目录, 存放图片 / 字体等

06. test - 测试目录, 可是存放 mock 数据等.

07. .babelrc - Babel 的配置文件

08. .editorconfig - 编辑器配置文件

09. .eslintignore - eslint 的忽略项配置文件

10. .eslintrc.js eslint 的配置文件

11. .gitignore - git 的忽略 push

12. .postcssrc.js - 处理 CSS 前缀

13. index.html - 首页入口文件

14. package.json - 项目的配置文件

15. package-lock.json - 在 npm install 时候生成一份文件,用以记录当前状态下实际安装的各个 npm package 的具体来源和版本号, 用于管理 package 之间依赖关系

16. README.md - 项目的说明文档

原文地址:https://www.cnblogs.com/aisowe/p/11420016.html

时间: 2024-08-28 05:27:21

怎样理解 Vue 项目的目录结构?的相关文章

Vue项目开发目录结构

最近做一些CI+Vue开发的简单项目,由于刚开始一直从事后端,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两位的博客提供了很大的帮助,现将该部分知识做以下总结. 下图为Vue项目文件夹: 以下就项目文件夹中的各文件的作用进行介绍: ├── build/ # Webpack 配置目录 ├── dist/ # build 生成的生产环境下的项目 ├── config/ # Vue基本配置文件,可以设置监听端口

了解vue项目的目录结构

希望可以帮到初学vue的同学. 这里解释一下vue-cli生成的项目结构中每一个文件是做什么的? 1 build 和 config  这两个文件夹都是webpack配置相关. 2 node_modules  是 npm install 时安装的依赖代码库. 3 src 是存放源码的文件夹(开发的代码). 4 staic 是存放第三方静态资源的文件夹. 5 babelrc  是babel的一些配置(es6语法转换相关) 其中:  presets : 预设.  stage-2:就是2到3 ,一共是0

从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的

每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起来. 初级前端初始化目录篇 项目伊始,我们肯定是先在terminal终端命令行(以下简称terminal)cd进入<project name>根目录,然后输入 npm init 初始化

C#程序员学习Android开发系列之Android项目的目录结构

今天开始正式学习Android开发的种种细节,首先从最基本的概念和操作学起. 首先看一下Android项目的目录结构. 这是我随便建立的一个test项目,我们重点关注一下几个方面的内容: 1.src目录:存放java源代码的目录,里面建立一个包,包里面有4个java源文件(分别都继承自Activity).由于java要求比较严格,因此要求类名与文件名一致. gen(Generated Java Files)目录:自动产生Java源文件的目录,是由工具自动生成的,一般不需要自己修改.里面主要有一个

Android开发系列之Android项目的目录结构

今天开始正式学习Android开发的种种细节,首先从最基本的概念和操作学起. 首先看一下Android项目的目录结构. 这是我随便建立的一个test项目,我们重点关注一下几个方面的内容: 1.src目录:存放Java源代码的目录,里面建立一个包,包里面有4个java源文件(分别都继承自Activity).由于java要求比较严格,因此要求类名与文件名一致. 2.gen(Generated Java Files)目录:自动产生Java源文件的目录,是由工具自动生成的,一般不需要自己修改.里面主要有

Android下apk安装的过程,安卓项目的目录结构

安卓下软件安装的过程: 1:拷贝XXX.apk到/data/app/XXX-1.apk 2.在/data/data目录下创建一个文件夹     文件夹名称  当前应用程序的包名. 安卓项目的目录结构: bin:编译后的文件目录 gen:自动生成的文件目录 project.properties:代表编译的版本 对应Android.jar的版本 res:资源目录 drawable:存放应用程序的图标 h :高分辨率(以此类推) x:特大分辨率

Go 项目的目录结构 及 安装技巧

项目目录结构如何组织,一般语言都是没有规定.但Go语言这方面做了规定,这样可以保持一致性 1.一般的,一个Go项目在GOPATH下,会有如下三个目录: |--bin |--pkg |--src 其中,bin存放编译后的可执行文件:pkg 存放编译后的包文件:src 存放项目源文件.一般,bin 和 pkg 目录可以不创建,go 命令会自动创建(如 go install),只需要创建src目录即可. 对于 pkg 目录,曾经有人问:我把 Go 中的包放入 pkg 下面,怎么不行啊?他直接把 Go

Android Studio初体验之揭秘AS的项目的目录结构

(因为是初步,难免有错误出现,如果哪里记录的有问题,欢迎各位指正,共同成长) 我们默认你的AS是已经安装并好的,关于AS的安装,网上一大把,请各位自行寻找资源 下面记录一些配置以及AS的项目的目录结构 配置: 1.config:用户的配置文件,保存用户的个人设置(你所设置的所有的熟悉,注意备份,就不会一次次去设置)   2.restart:不用关心   3.system:运行的生成的缓存环境(会越来越大) ①考虑配置在磁盘空间大的磁盘中 ②可以删除,但是第一次使用的时候会初始化一些数据 项目结构

在IOS开发中,项目的目录结构如何搭建?

网上有很多关于IOS开发的学习资料.然而却很少有关于设计一个项目时,如何设计其目录结构?这对于自学IOS的程序猿们,无疑有诸多不利.接下来,我就简单的谈下真正在公司中,项目的目录结构如何搭建: 以上为第一种,先按照功能模块进行划分,然后遵循MVC设计模式,分别设置model,view,control子文件夹.对于非项目模块类,以及一些自己写的一些分类,第三方框架等等,存储在other中,如上图所示. 至于另外一种方案,则是先以MVC进行划分,然后针对于model,view,control,进行子