vue项目目录结构

VUE项目目录结构

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

目录/文件	说明
build	这个是咱们最终发布的时候会把代码发布在这里，在开发阶段，咱们基本不用管。
config	配置目录，默认配置没有问题，因此咱们也不用管
node_modules	这个目录是存放咱们项目开发依赖的一些模块，这里面有不少不少内容，不太高兴的是，咱们也不用管
src	咱们的开发目录，基本上绝大多数工做都是在这里开展的
static	资源目录，咱们能够把一些图片啊，字体啊，放在这里。
test	初始测试目录，没用，删除便可
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。基本不用管，放着就是了
index.html	首页入口文件，基本不用管，若是是开发移动端项目，能够在head区域加上你合适的meta头
package.json	项目配置文件。前期基本不用管，可是你能够找一下相关的资料，学习一下里面的各项配置。至少，要知道分别是干吗的。初期就无论了。
README.md	不用管

如上，基本上就是这么个状况。重要的，仍是src文件夹。

SRC文件夹的状况

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

commponents目录里面放了一个演示的组件文件，你能够打开看下。固然，也能够直接删除，而后根据个人博文往下走。

App.vue是项目入口文件。固然，咱们须要改造，改形成咱们可使用的样子的。后面的博文会说。

main.js这是项目的核心文件。全局的配置都在这个文件里面配置，我后面会详细的讲这里怎么搞。

整理目录

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

如上图所示，把文件夹和文件都新建好，后面的博文我会详细给出每一个文件的代码的。这里，都新建空文件便可。注意，我是用scss来写css文件的。因此看官你最好也学习一下scss的相关内容，个人博客里面有，搜索也是一大把。

文件\目录	说明
component	组件文件夹咱们写的一些公用的内容能够放在这里的。
config	核心配置文件夹
frame	存放自路由的文件夹
page	项目模板文件夹,全部的页面文件所有存放与此，后面会根据须要来创建各类子目录
style	样式存放目录

vue支持每个模板里面写css，这样能够作到随用随取。可是，我我的不太喜欢这样，我仍是喜欢吧css给单独放出来，由于这样便于整理，另外，使用scss的朋友都知道，咱们会预设大量的变量，代码片供咱们在写css的时候使用，若是每一个模板文件里面都须要引用一次那是及其操蛋的。

你能够先根据我这一套来。而后等你所有融会贯通了以后，你能够想怎么玩儿怎么玩儿。随便。

这篇博文先到这里，后面咱们继续讲。

首发地址：blog.csdn.net/fungleo/art…