最近做一些CI+Vue開發的簡單項目，由於剛開始一直從事后端，對Vue了解不是很多，fork了團隊的項目代碼發現項目的文件夾很多，一時間有些懵，上網上參考了部分資料，博客園中的放晴的天空與獅子愛吃草兩位的博客提供了很大的幫助，現將該部分知識做以下總結。
下圖為Vue項目文件夾：
以下就項目文件夾中的各文件的作用進行介紹：
├── build/ # Webpack 配置目錄 ├── dist/ # build 生成的生產環境下的項目 ├── config/ # Vue基本配置文件，可以設置監聽端口，打包輸出等 ├── node_modules/ # 依賴包，通常執行npm i會生成 ├── src/ # 源碼目錄（開發的項目文件都在此文件中寫） │ ├── assets/ # 放置需要經由 Webpack 處理的靜態文件，通常為樣式類文件，如css，sass以及一些外部的js │ ├── components/ # 公共組件 │ ├── filters/ # 過濾器 │ ├── store/ # 狀態管理 │ ├── routes/ # 路由，此處配置項目路由 │ ├── services/ # 服務（統一管理 XHR 請求） │ ├── utils/ # 工具類 │ ├── views/ # 路由頁面組件 │ ├── App.vue # 根組件 │ ├── main.js # 入口文件 ├── index.html # 主頁，打開網頁后最先訪問的頁面 ├── static/ # 放置無需經由 Webpack 處理的靜態文件，通常放置圖片類資源 ├── .babelrc # Babel 轉碼配置 ├── .editorconfig # 代碼格式 ├── .eslintignore # （配置）ESLint 檢查中需忽略的文件（夾） ├── .eslintrc # ESLint 配置 ├── .gitignore # （配置）在上傳中需被 Git 忽略的文件（夾） ├── package.json # 本項目的配置信息，啟動方式 ├── package-lock.json # 記錄當前狀態下實際安裝的各個npm package的具體來源和版本號 ├── README.md # 項目說明（很重要，便於其他人看懂）
我們以后用到最多的就是src文件夾，因為我們編寫的代碼要放在里面。
一開始在學習Vue中，總是理解不清楚各文件之間的邏輯，所以導致自己一直在原地徘徊，在自己嘗試了微信小程序的開發之后，大致有了一個模糊的分時，反過頭來繼續從事Vue項目的開發，結果原來理不清的東西都豁然開朗了。
參考獅子愛吃草朋友的博客，結合自己的心得進行總結：
在根目錄下存在index.html文件，在src目錄下存在main.js，App.vue以及在router文件夾下存在index.js，搞清楚這幾個文件之間的關系將對后續開發理清思路。
index.html---主頁，項目入口
index.html為項目訪問的首站點，一般我們之定義一個空的根節點，在main.js里面定義的實例將掛載到根節點下，內容都通過vue組件來進行填充。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>首頁title</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
App.vue---根組件
我們在Vue中要經常建立后綴名為.vue的文件，.vue的文件通常由三部分構成，分別用<template></template>，<script></script>與<style></style>標簽包裹。
我們可以將上述三個部分理解為原來我們學習前端的html，javascript與css三個部分。
其中，<template></template>通常建立我們要用的網頁界面，<script></script>通常與數據打交道，定義數據的首發方式等，面向邏輯，而<style></style>主要負責<template></template>標簽中的樣式。
上面三者的結合，就構成了我們所見到的網頁，一般我們在開發新的頁面中一般是建立一個新的.vue文件，在文件中完成三個環節的編寫。
<template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: "app" }; </script> <style> .add-container { margin-bottom: 20px; } </style>
補充：
【template】
其中模板只能包含一個父節點，也就是說頂層的div只能有一個（例如上圖，父節點為#app的div，其沒有兄弟節點）
<router-view></router-view>是子路由視圖，后面的路由頁面都顯示在此處
打一個比喻吧，<router-view>類似於一個插槽，跳轉某個路由時，該路由下的頁面就插在這個插槽中渲染顯示
【script】
vue通常用es6來寫，用export default導出，其下面可以包含數據data，生命周期(mounted等)，方法(methods)等。
【style】
樣式通過style標簽<style></style>包裹，默認是影響全局的，如需定義作用域只在該組件下起作用，需在標簽上加scoped，<style scoped></style>
如要引入外部css文件，首先需給項目安裝css-loader依賴包，打開cmd，進入項目目錄，輸入npm install css-loader,回車。安裝完成后，就可以在style標簽下import所需的css文件。這樣，我們就可以把style下的樣式封裝起來，寫到css文件夾，再引入到頁面使用，整個vue頁面也看上去更簡潔。
<style> import './assets/css/public.css' </style>
main.js---入口文件
main.js主要是引入vue框架，根組件及路由設置，並且定義vue實例，下圖中的
components:{App}就是引入的根組件App.vue
后期還可以引入插件，當然首先得安裝插件。
import Vue from 'vue' /*引入vue框架*/ import ElementUI from 'element-ui' /*引入element-ui樣式*/ import App from './App' /*引入根組件*/ import router from './router' /*引入路由設置*/ Vue.config.productionTip = false /*關閉生產模式下給出的提示*/ /*定義一個新實例*/ new Vue({ el: '#app', router, store, template: '<App/>', components: { App } /*此處為引入的根組件的App.vue*/ })
router.js---路由配置
在router文件夾下，有一個index.js文件，即為路由配置文件。
import Vue from 'vue' /*引入vue框架*/ import Router from 'vue-router' /*引入路由依賴*/ import Hello from ‘@、components/Hello’ /*引入頁面組件，命名為Hello*/ Vue.use(Router) /*使用路由依賴*/ /*定義路由*/ export default new Router({ router:[ { path: '/ ', name: 'Hello', component: Hello } ] })
這里定義了路徑為'/'的路由，該路由對應的頁面是Hello組件，所以當我們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Hello組件.類似的，我們可以設置多個路由，‘/index’,'/list'之類的，當然首先得引入該組件，再為該組件設置路由。
大致是這些內容，在下一篇總結一下個文件之間的調用思路吧！