这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战

vue 入门-第三章

上几章节讲述了开发环境以及开发工具的常用插件。下面开始记录一下 使用命令 vue init webpack projectName 生成的文件目录各有什么含义

1.目录解析

项目一级目录结构如下图

详细项目文件及解析如下

文件夹/文件	文件	描述
build		项目构建（webpack）相关代码
	build.js	生产环境构建代码
	check-version.js	检查node、npm等版本
	utils.js	构建工具相关
	vue-loader.conf.js	webpack Loader配置
	webpack.base.conf.js	webpack基础配置
	webpack.dev.conf.js	webpack开发环境配置，构架本地服务器
	webpack.prod.conf.js	webpack生产环境配置
config		项目开发环境配置
	dev.env.js	开发环境变量
	index.js	项目变量配置
	prod.env.js	生产环境变量配置
node_modules	npm 加载的项目依赖模块
src	源码目录
	assets	放置一些图片，如logo等
	components	vue公共组件
	router	vue的路由管理
	App.js	项目入口文件
	main.js	程序入口文件，加载各种公共组件
static		静态文件，比如一些图片、字体等。
.babelrc		ES6语法编辑器
.editorconfig		定义代码格式
.gitignore		git上传需要忽略的文件格式
.postcsssrc		postcss配置文件
README.md		备注文件，对项目中需要注意的事项说明
index.html		首页入口页面(可以添加一些信息或统计代码等)
package.json		项目基本信息，包项目依赖等。

---

以上就是vue-cli脚手架自动生成的项目结构了，了解每个文件及文件夹的功能用途有助于我们更好更快的开发。由于标准化的基础架构生成可能无法满足各个项目实际开发的需求，所以我们经常会对初始化项目进行结构上的拓展。此时就需要了解更加详细的代码内容，相关文件如下所示：

1.packge.json

项目的配置文件，定义项目的基本信息及所需的依赖库等

其中 scrips 部分定义的就是 npm 所要执行内容的快捷指令；。

例如 dev => npm run dev 实际执行的是

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

2.webpack.base.conf.js

是开发、测试、生产环境对应配置中的公共配置文件。

3.config/index.js

环境配置文件

4.utils.js

工具文件

5.babelrc

babel配置文件

5.editorconfig

编码规范文件

6.src/main.js

main.js是整个项目的入口文件

7.src/App.vue

项目根组件

<template>标签内为页面dom标签

<script>标签内为js脚本

<style>标签内为页面css样式内容

8.src/router/index.js

路由组件，用于配置项目所访问路径对应的模块页面。

---

以上就是vue-cli生成文件的解析了。熟练掌握项目架构，文件效用，有助于快速理解并开发。

苟日新，日日新，又日新！