先从最外层走起(根目录文件):
- babelrc:作为项目babel的配置文件(Babel 是一个 JavaScript 编译器,作为我们项目对js的编译),可以将我们项目es5以上的语法编译成大多浏览器都支持的es5语法等功能,还可以在这里配置一些框架的按需加载(如element-ui)
- .editorconfig:项目中编辑代码风格
- .gitignore : 用于git的忽略文件配置(我们使用git提交的时候,有些文件是不需要提交的,如node模块的node_modules文件夹、打包成功的dist文件夹等)
- .postcssrc.js: 用于对style的less语法支持配置
- index.html: 项目的首页,即我们编写的代码会通过这个文件显示给浏览器
- package.json package-lock.json: 这个就不用多说了吧,大家都懂是项目包的依赖文件
- README.md: 展现在GitHub上的描述文件
build文件夹
- build.js: 作为项目打包的时候(npm run build)的入口文件,通过这个js将整体项目打包
- check-versions.js:用于版本node和npm版本的检测
- dev-client.js
- 引入eventsource-polyfill模块
- 监听dev-server.js中webpack-hot-middleware发布的事件并作相应的处理
4.dev-server.js
- 检查npm与node的版本
- 引入相关插件和配置
- 创建express服务器和webpack编译器
- 配置开发中间件(webpack-dev-middleware)和热重载中间件(webpack-hot-middleware)
- 挂载代理服务和中间件
- 配置静态资源
- 启动服务器监听特定端口(8080)
- 自动打开浏览器并打开特定网址(localhost:8080)
- utils.js:用于项目中关于loader器的引用和项目title、icon等设置
- vue-loader.conf.js:因为项目是基于vue的,所以,需要一个vue-loader来识别.vue后缀的文件,这个文件,就是vue-loader的配置文件
- webpack.base.conf.js:项目webpack的基础配置文件
- webpack.dev.conf.js:开发环境下的webpack配置文件
- webpack.prod.conf.js:生产环境下的webpack配置文件
config文件夹
- dev.env.js、prod.env.js:用于配置项目的环境变量
- index.js:用于webpack的一些配置信息
node_modules文件夹
项目包存储的地方
src文件夹
- assets文件夹:这里放置项目的模块静态资源,如css,js还有图片、字体
- components文件夹:使用vue的都知道,vue是模块化的框架,我们将页面中的元素分模块编写,从而提高代码修改的方便性以及重用的效率,这个文件夹内就是我们项目的模块存放地址
- router文件夹:vue-router让我们能处理vue的路由,从而更佳的使用component,这个文件夹内就是个vue-router的配置文件
- APP.vue:作为项目的根组件,也就是我们直接吧这个组件装到index.html中进行渲染
- main.js:作为webpack项目的入口文件,在这个文件夹内,我们是可以引用静态资源以及对整体vue的配置
static文件夹
用于存放在整体项目的静态资源,如图片,字体等
参考:https://blog.csdn.net/crazy_jialin/article/details/80433020