关于VUE项目目录

在这里插入图片描述

1. build: 构建脚本目录

1) build.js ==> 生产环境构建脚本
2) check-version.js ==> 检查npm, node.js版本
3) utils.js ==> 构建相关工具方法
4) vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀
5) webpack.base.conf.js ==> webpack配置环境
6) webpack.dev.conf.js ==> webpack开发环境配置
7) webpack.prod.conf.js ==> webpack生产环境配置

2. config: 项目配置

1) dev.env.js ==> 开发环境变量
2) index.js ==> 项目配置文件
3) prod.env.js ==> 生产环境变量

3. node_modules: npm 加载的项目依赖模块

使用该命令,将package.json安装所需要的组件放在生成的node_modules文件夹中

4. src: 开发目录

这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
1) assets: 资源目录,放置一些图片或公共js、公共css。这里的资源会被webpack构建;
2) components: 组件目录,我们写的组件就放在这个目录里面;
3) router: 前端路由,我们需要配置的路由路径写在index.js里面;
4) App.vue: 根组件;
5) main.js: 入口js文件;

5. static

静态资源目录,如字体、图片等。不会被webpack构建

6. index.html

首页入口文件,可以添加一些meta信息等

7. package.json

npm包配置文件,定义了项目的npm脚本、依赖包等信息  (包含less依赖)

8. README.md

项目的说明文档,markdown格式

9. .xxxx文件

这些是一些配置文件,包括语法配置、git配置等

10. webpack

webpack是一个前端资源加载/打包工具。
它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

猜你喜欢

转载自blog.csdn.net/CH_whale/article/details/118667311