VUE项目目录分析(2.9.6)
文章目录
- VUE项目目录分析
-
- 新建一个名为demo的项目
- 使用VSCode打开这个项目
- 分析目录
-
- README.md--项目说明文档
- package.json--依赖配置文件
- package-lock.json--固定版本依赖配置文件
- index.html--入口页面
- .postcssrc.js--自动兼容浏览器特性以及屏幕适配配置文件
- .gitignore--git忽略规则配置文件
- .eslintrc.js--eslint规则配置文件
- .eslintignore--eslint忽略规则配置文件
- .editorconfig--项目编码以及书写格式配置文件
- .babelrc--ES标准转换器配置文件
- build目录--webpack编译配置目录
-
- build.js--设置webpack编译时输出日志效果配置文件
- check-versions.js--检查版本配置文件
- utils.js--设置工具及路径相关配置文件
- vue-loader.conf.js--设置是否使用开发/生产环境配置文件
- webpack.base.conf.js--设置webpack基础配置文件
- webpack.dev.conf.js--设置webpack编译时使用资源路径配置
- webpack.prod.conf.js--设置webpack打包时输出相关配置
- config目录--项目配置目录
-
- index.js--项目基础配置
- dev.env.js--开发环境变量配置文件
- prod.env.js--生产环境变量配置文件
- node_modules目录--依赖目录
- src目录--源代码目录
-
- assets目录--资源目录
- components目录--公共组件目录
- router目录--路由
- app.vue--根组件
- main.js--入口js文件
- static目录--静态资源文件
VUE项目目录分析
注意:此篇使用的vue脚手架版本是2.9.6版本
在学习目录结构时发现了一篇博客已经整理出来了目录地址,但是对于我来说还是太笼统了,
不过对我帮助很大可以去看看传送门
新建一个名为demo的项目
创建方法跟上一篇是一样的,
博客:创建VUE项目
创建的
项目目录名为vueDemo
项目名为demo
今天主要是研究VUE的项目目录结构,这里不重要!!!
使用VSCode打开这个项目
使用文件 -> 打开文件夹形式打开这个项目
分析目录
README.md–项目说明文档
这肯定是项目的说明文档了,
package.json–依赖配置文件
里面记录的是项目的依赖,npm install指令就是根据这个里面的内容来判断需要下载的文件的
package-lock.json–固定版本依赖配置文件
记录了一些需要固定版本的依赖包,
借鉴博客地址
index.html–入口页面
入口页面,项目第一个展示的页面
.postcssrc.js–自动兼容浏览器特性以及屏幕适配配置文件
这个文件中里面写了postcss-load-config官网地址
但是进去看了下发现只是写了怎么去使用它,并没有看懂有什么作用
postcss-load-config地址
查找了一堆博客后发现这个文件很有深度,它的作用应该是css处理,
1.自动适配所有浏览器(有些浏览器拥有单独特性,需要单独处理,通过这个文件可以远离这些烦恼)
2.自动适配尺寸(在开发时使用一套固定尺寸的规范,当打包发布时,这里可以自动转换尺寸单位来适配所有的屏幕)
目前整理出来是这些功能,应该都是通过一些插件来实现的功能,下回单独针对这个文件来研究下
下面是这次查找的一些博客地址
- vue-cli项目中.postcssrc.js
- vue - .postcssrc.js
- 手把手教你根据postcss+axios+vue-router+mock+vuex搭建适配移动前端基础框架
.gitignore–git忽略规则配置文件
这个文件很好理解了,就是git的忽略文件的配置,
.eslintrc.js–eslint规则配置文件
因为这个项目使用了eslint来规范书写格式,所以这个文件就是用来配置eslient的了
参考博客:
vue中eslintrc.js配置最详细介绍
.eslintignore–eslint忽略规则配置文件
这个文件类似于git使用.gitignore来设置忽略哪些文件的规则配置文件,这个文件是eslint的忽略规则配置文件
.editorconfig–项目编码以及书写格式配置文件
editorconfig插件的配置文件,(我自己并没有安装这个插件,可能是在eslint中使用了,或者是vue自己携带的.先不深究了)
作用是设置本项目的编码格式
- EditorConfig官网地址
- Vue中使用eslint和editorconfig (对editorconfig并没有什么帮助,但是看到了关于使用指令来检查代码书写规范的介绍,先存下来吧)
- https://blog.csdn.net/zhanghj819/article/details/79012586(这个最有帮助)
.babelrc–ES标准转换器配置文件
这是babel插件的配置文件,
babel: ES6特性浏览器目前不是全部浏览器支持,但是使用ES6标准还是大势所趋,所以可以先使用ES6的规范来书写代码,在发布时使用babel来将代码转换为浏览器可识别的标准,例如ES6书写,转为ES5标准代码发布
这个文件也很有深度,留待日后深究
参考博客:
- vue-cli中的babel配置文件.babelrc详解(这个博主很有理想,和远见啊.不愧是有文化的人,才开发4年就自己建立了个博客站,我辈楷模.果断给了个star)
build目录–webpack编译配置目录
build.js–设置webpack编译时输出日志效果配置文件
配置文件
主要负责:
- loading效果
- webpack编译
- 输出信息
参考博客地址
check-versions.js–检查版本配置文件
配置文件
主要负责
- 检查node版本
- 检查npm版本
参考博客地址
utils.js–设置工具及路径相关配置文件
配置文件
主要负责
- 设置静态文件的公共路径,用于修改src属性的值
- css加载器的相关配置
- 对.vue文件之外的css文件或css预处理器文件进行处理
参考博客地址
vue-loader.conf.js–设置是否使用开发/生产环境配置文件
配置文件
主要负责
- 根据当前环境(生产/开发)对vue-loader的配置
参考博客地址
webpack.base.conf.js–设置webpack基础配置文件
配置文件
主要负责
- 配置webpack编译入口
- 配置webpack输出路径,名称,和静态文件路径
- 配置不同模块的处理规则与命名规则
参考博客地址
webpack.dev.conf.js–设置webpack编译时使用资源路径配置
配置文件
- 将hot-reload相关的代码添加到entry chunks
- 合并基础的webpack配置
- 使用styleLoaders
- 配置Source Maps
- 配置webpack插件
参考博客地址
webpack.prod.conf.js–设置webpack打包时输出相关配置
配置文件
- 合并基础的webpack配置
- 使用styleLoaders
- 配置webpack的输出
- 配置webpack的插件
- gzip模式下的webpack插件配置
- webpack-bundle分析
参考博客地址
config目录–项目配置目录
项目配置目录
index.js–项目基础配置
项目的基础配置
- 端口号
- 其他
里面有很多配置,目前连菜鸟都算不上的我都涉及不到,只能用上端口号,先留着吧,以后需要使用在慢慢添加
参考博客地址
dev.env.js–开发环境变量配置文件
开发环境变量配置
prod.env.js–生产环境变量配置文件
生成环境变量配置
node_modules目录–依赖目录
这个目录一打开一大片目录,初步判断是项目依赖的包,翻了半天没翻到底,这个还是放弃深究了.这不是我一介凡人能了解的.
src目录–源代码目录
项目源代码目录
assets目录–资源目录
资源目录,这里的资源文件会呗wabpack构建
components目录–公共组件目录
公共组件目录
router目录–路由
前端路由
app.vue–根组件
根组件
main.js–入口js文件
入口js文件
static目录–静态资源文件
我的这个目录里面是空的,只有一个git版本控制功能在空文件夹中添加的标志文件.gitkeep
在网上看作用是纯静态资源,不会被wabpack构建