Vue 项目尝鲜（二） 项目结构简析

前言 上回我们成功搭建运行了一个 vue 项目，这次的话我们来捋一捋这个项目的结构，当然也是简单看看，深入的话，其实我也不是很懂（手动捂脸）

目录结构

首先我们大概看一下他的结构，然后我们一个一个捋。

.
├── README.md
├── build
│   ├── build.js
│   ├── check-versions.js
│   ├── logo.png
│   ├── 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
├── index.html
├── package.json
├── node_modules
│   ├── ...
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   └── router
│       └── index.js
└── static

build 文件夹

如其名，这里面放着都是关于项目构建打包的文件，webpakc 这些配置在这边写，这个我们刚入门就用不到了，也动不了，但是后面设置请求跨域代理的时候我们可以来这边稍改。所以现在，out

config 文件夹

这边放着一些环境配置的文件，基本不碰。

node_modules 文件夹

装完依赖后，放依赖的地方，不用管他。

static 文件夹

说实话，我也不知道这家伙用来干啥的，先不管吧。

package.json

项目总的配置文件，前期也不用我们手动修改，但是后面可能会回来这边看，所以可以先去瞄瞄。

index.html

挂载 vue 实例的页面，看到里面那个 id="app"，大概就明白了吧。

src 文件夹

重点来啦，这个就是要我们自己搞的地方啦。这个里面的文件我们一一来看哈。

assets 文件夹

这个是用来放一些静态文件的，像我们的 css，图片，一些 js 文件都分门别类的放在这个文件夹里面。

components 文件夹

这个是用放我们 vue 组件的地方，vue 嘛，组件化开发啦，所以后面我们会写很多的组件复用，就都放在这边啦。

router 文件夹

这里是用来配置 vue-router 的，vue 做单页面应用，视图间的跳转是通过路由来搞的，所以这个东西，我们后面也是经常用到，要注意一下，有空可以先去 vue-router 官网看看先。

App.vue

这个是我们项目的根组件，外面 html 挂载的就是他，一般也不会去搞他，但是如果想直接搞全局的视图结构的话，可以试试去搞他。

main.js

这个是我们项目的入口文件，我们的 vue 实例在此创建，也在这边挂载，后面我们引入啥全局组件，搞啥全局配置，基本都在这边搞啦。

好啦，关于项目结构的简单解析就到这里，大家心里有个底就差不多啦，下面就回到我们的开发搭建中啦。