天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
宫女如花满春殿，只今惟有鹧鸪飞。
——《越中览古》
文章目录
- vue项目结构
- 1. vue项目结构概览
- 2. vue项目结构详述
- 2.1 build
- 2.2 config
- 2.3 node_modules
- 2.4 src
- 2.5 static
- 2.6 index.html
- 2.7 package.json
- 2.8 .xxx文件
- 2.9 README.md
Vue3入门
vue项目结构
1. vue项目结构概览
项目结构概览表格
| 目录或文件 | 说明 |
|---|---|
| build | 项目构建脚本目录，是项目构建（webpack）的相关代码 |
| config | 项目配置目录，包括端口号等，初学使用默认即可，后续可配置 |
| node_modules | npm加载的项目依赖模块的目录 |
| src | 项目开发目录，前端开发基本都是在这个目录，包含几个目录和文件 |
| static | 静态资源目录，如字体、图片等静态资源，该目录不会被webpack构建 |
| index.html | 首页入口文件，可添加一些meta信息或统计代码等。该文件是应用的模板文件，vue应用通过这个文件页面来运行，也可通过lodash等模板语法在这个文件中插值。注：index.html文件不是负责管理页面最终展示的模板，而是管理vue应用之外的静态html文件，一般用在高级功能的时候会修改该文件 |
| package.json | 项目配置文件，即npm包配置文件，定义了项目的npm脚本、依赖包等信息 |
| test | 出实测实目录，可删除 |
| .xxxx文件 | 以.开头的文件都是一些配置文件，如语法配置、git配置等 |
| README.md | 项目说明文档，markdown格式 |
2. vue项目结构详述
2.1 build
关于build文件夹的内容详述
build目录时构建脚本目录
build目录下的文件与说明如下表
| 文件 | 描述 |
|---|---|
| build.js | 生产环境构建脚本 |
| check-versions.js | 检查npm、node.js版本 |
| utils.js | 构建相关工具方法 |
| vue-loader.conf.js | 配置css加载器以及编译css之后自动添加前缀 |
| webpack.base.conf.js | webpack基本配置 |
| webpack.dev.conf.js | webpack开发环境配置 |
| webpack.prod.conf.js | webpack生产环境配置 |
2.2 config
config是vue项目配置文件目录
关于其中的文件和描述下表
| 文件 | 描述 |
|---|---|
| dev.env.js | 开发环境变量 |
| index.js | 项目配置文件 |
| prod.env.js | 生产环境变量 |
2.3 node_modules
该目录是vue项目的npm加载依赖模块的存储目录，用于存放npm加载的项目依赖模块
2.4 src
src目录是开发目录，开发的内容基本都在这个目录完成
该目录包含的文件和目录如下表
| 文件或目录 | 描述 |
|---|---|
| assets | 资源目录，用于存放图片或公共js、公共css等，因为属于代码目录下，所以可以用webpack来操作和处理，即可以使用一些预处理，比如Sass/SCSS或者Stylus |
| components | 用于存放自定义组件的目录，里面会默认有一个示例组件 |
| router | 前端路由目录，需要配置的路由路径写在index.js里面 |
| App.vue | 根组件，该文件为Vue应用的根节点组件 |
| main.js | 应用的入口文件，该文件主要引用vue框架、根组件及路由设置，并定义vue实例，即初始化Vue应用并且指定应用挂载到index.html文件中的哪个HTML元素上，通常还会做一些注册全局组件或添加额外的Vue库的操作 |
2.5 static
static目录是静态资源目录，用于存放图片、字体等资源，不会被webpack构建
2.6 index.html
index.html文件为首页入口文件，可添加一些meta信息或统计代码等。该文件是应用的模板文件，vue应用通过这个文件页面来运行，也可通过lodash等模板语法在这个文件中插值。注：index.html文件不是负责管理页面最终展示的模板，而是管理vue应用之外的静态html文件，一般用在高级功能的时候会修改该文件
2.7 package.json
package.json文件是项目配置文件，即npm包配置文件，定义了项目的npm脚本、依赖包等信息
2.8 .xxx文件
以.开头的文件，是一些配置文件，如语法配置、git配置等
如下表是一些常用文件
| 文件 | 描述 |
|---|---|
| .babelrc | babel编译参数 |
| .editorconfig | 编译器相关的配置，代码格式 |
| .eslintignore | 配置需要忽略的路径，一般build、config、dist、test等目录会配置忽略 |
| .eslintrc.js | 配置代码格式风格检查规则 |
| .gitignore.git | 上传需要忽略的文件配置 |
| .postcssrc.js | css转换工具 |
2.9 README.md
README.md是项目说明文档，markdown格式
感谢阅读，祝君暴富！
