vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（二）

推荐我的vue教程：VUE系列教程目录

通过上一篇文章vue最简单的入门教程+实战+Vue2+VueRouter2+webpack（一），我们已经新建好了一个基于vue+webpack的项目。本篇文章将详细的帮助大家对这个项目的结构进行搭建，然后我们要从这里慢慢进入实战。

提示：希望大家还是多去官网看看教程，踩踩坑，你会有些疑问，我呢则会把我踩过的坑告诉你们，让你们知道怎么解决，不要害怕有疑问，这正是你驶向成功的颠簸。

一、项目目录以及文件结构

如上图所示，我们新建的目录结构就是这样的了。

通过表格给大家展示一下这些目录结构的作用：

目录/文件	说明
build	这个是我们最终发布的时候会把代码发布在这里，在开发阶段，我们基本不用管。
config	配置目录，我们可以进行端口的配置，默认配置没有问题，所以我们也不用管
node_modules	这个目录是存放我们项目开发依赖的一些模块，这里面有很多很多内容，有时我们需要安装一些其他东西，那些东西放在这里，不过高兴的是，我们也不用管
src	我们的开发目录，基本上绝大多数工作都是在这里开展的，这里才是我们需要关注的
static	资源目录，我们可以把一些图片啊，字体啊，放在这里。
test	初始测试目录，没用，删除即可
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。基本不用管，放着就是了
index.html	首页入口文件，基本不用管，如果是开发移动端项目，可以在head区域加上你合适的meta头，有时偶尔会进行一些改动
package.json	项目配置文件。前期基本不用管，但是你可以找一下相关的资料，学习一下里面的各项配置。至少，要知道分别是干嘛的。初期就不管了。
README.md	不用管

如上，基本上就是这么个情况。对于我们来说其实最重要的，还是src文件夹。

二、SRC文件夹的情况

如上图所示，这是src文件夹下面的初始情况，里面有一些示例代码之类的。比如，它吧logo放在assets文件夹里面。我个人很不喜欢这么做，因为代码是代码，资源是资源，各归其位比较好。

commponents目录（组件文件目录）：里面放了一个演示的组件文件，一般在开发中我比较喜欢把VUE组件放在这里面，你可以打开看下。当然，也可以直接删除。

App.vue是项目入口文件（最终的编译全靠它）。当然，我们需要改造，改造成我们可以使用的样子的。后面的博文会说。

main.js这是项目的核心文件。全局的配置都在这个文件里面配置，这里可以配置全局组件和指令等，很好奇吧？我后面会详细的讲这里怎么搞。

整理目录

上面只是让大家了解一下具体是什么情况，下面，我们开始动手，把不想管的干掉，然后把src变成这个样子:

这里关于目录这样构建是有原因的，其中：

文件\目录	说明
component	是存放VUE组件的，组件文件夹我们写的一些公用的内容可以放在这里的。
config	核心配置文件夹，是放一些基础配置，比如一些路由，和api接口
frame	存放自路由的文件夹或者框架
page	项目模板文件夹，存放我们的单页面富应用，所有的页面文件全部存放与此，后面会根据需要来建立各种子目录
style	样式存放目录

我会在以后文章中慢慢详细给出每个文件的代码的，注意，我们开发采取用scss来写css文件的。所以看官你最好也学习一下scss的相关内容。

vue虽然支持每一个模板里面写css，这样可以做到随用随取。但是，在开发中不要这样做，因为这样会让我们很难维护，并且样式之间不能够复用，最好是把css给单独放出来，因为这样便于整理，另外，使用scss的朋友都知道，我们会预设大量的变量，代码片供我们在写css的时候使用，如果每个模板文件里面都需要引用一次那并不是明智之举。

你可以根据我的这一套来。然后等你全部融会贯通了之后，你如果有更好的意见你可以提出来我们进行探讨。

小结：

很简单的项目目录搭建，了了几句，单独提出来，只是希望教会大家有一个良好的项目目录搭建。

由于每天的时间不够，所以文章很短，但是依然感谢大家对我的支持与厚爱。

提示：在最近几天我会慢慢附上VUE系列教程的其他后续篇幅，后面还有精彩敬请期待，请大家关注我的专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。