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 实例在此建立，也在这边挂载，后面咱们引入啥全局组件，搞啥全局配置，基本都在这边搞啦。

好啦，关于项目结构的简单解析就到这里，你们内心有个底就差很少啦，下面就回到咱们的开发搭建中啦。