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 實例在此建立，也在這邊掛載，後面咱們引入啥全局組件，搞啥全局配置，基本都在這邊搞啦。

好啦，關於項目結構的簡單解析就到這裏，你們內心有個底就差很少啦，下面就回到咱們的開發搭建中啦。