Vue+Router+Webpack+Axios 构建项目实战（二）认识项目文件

在《Vue+Router+Webpack+Axios 构建项目实战（一）项目搭建》中，我们通过安装 nodejs 系统环境，以及 vue-cli 脚手架工具，在执行完命令后，我们就已经将一个初始项目跑起来了。

但是，我们的项目代码，还一个都没有看到。因此，这个章节，我们来认识一下所有的文件。

• ├── node_modules // 项目依赖包文件夹
• ├── build // 编译配置文件，一般不用管
• │     ├── build.js
• │     ├── check-versions.js
• │     ├── dev-client.js
• │     ├── dev-server.js
• │     ├── utils.js
• │     ├── vue-loader.conf.js
• │     ├── webpack.base.conf.js
• │     ├── webpack.dev.conf.js
• │     └── webpack.prod.conf.js
• ├── config // 项目基本设置文件夹
• │     ├── dev.env.js // 开发配置文件
• │     ├── index.js // 配置主文件
• │     └── prod.env.js // 编译配置文件
• ├── src // 我们的项目的源码编写文件
• │     ├── App.vue // APP入口文件
• │     ├── assets // 初始项目资源目录，回头删掉
• │     │   └── logo.png
• │     ├── components // 组件目录
• │     │   └── Hello.vue // 测试组件，回头删除
• │     ├── main.js // 主配置文件
• │     └── router // 路由配置文件夹
• │     │     └── index.js // 路由配置文件
• └── static
• ├── index.html // 项目入口文件
• ├── package-lock.json // npm5 新增文件，优化性能
• ├── package.json // 项目依赖包配置文件

好，如上，就是我们的 vue 初始化后得到的一个项目的完整结构。其他大多数文件我们是不用管的。如果要管的话，我在后面的章节也会去详细说明。

我们绝大多数的操作，就是在 src 这个目录下面。默认的 src 结构比较简单，我们需要重新整理。

删除    src/assets/logo.png，src/components/hello.vue，

创建    src/page/home.vue，src/assets/main.scss

项目文件整理的差不多了，接下来将app.vue内容部分的css以及html部分id = app的内容删除

到现在我们的准备工作也进行的差不多了，下一篇就开始正式使用《Vue+Router+Webpack+Axios 构建项目实战（三）调整 App.vue 和 router 路由》