探索、理解工程化 Vue 項目的 文件結構與內容：
說起來，像這樣細致而規范地進行一次項目文件結構的探索，然后得到一些對項目架構的理解，還就是從我開始學前端開發開始的。
當我第一次用 Vue CLI 建立起一個項目的時候，面對著這么多我看不懂、甚至連后綴名都不認識的文件，我是一臉懵逼的，所以初學 Vue 的時候確實舉步維艱 ...
所以，要想用好 Vue ，首先得知道為什么、和要怎樣以大致就像初始化后這樣的一個結構去規范開發。
注意！
同樣的，由于我本人對整套筆記的初步設計... 在這里不會展開對 webpack 和 babel 配置文件的相關介紹... 留到后面再統一系統地總結。
我們的頁面在哪里？
當我一步一步按照 Vue.js 的官方教程 第一次 npm run serve ，并在 localhost 8080 看到頁面之后 ...
- 我點開了 Chrome 的 F12 調試臺，看到在 div#app 中有細分下去的 DOM 樹，
- 可是我在文件夾里找到的 index.html 的 div#app 標簽里 什么也沒有 ...
- 并且按照我們之前的學習，至少要有一個地方使用 new Vue( { ... } ) 掛載上一個 Vue 實例，我很疑惑，并不理解它是從哪個地方的 script 腳本里掛載的...
- 那時我也還不理解 “打包” 、“開發模式運行” 等概念 ...
不過，既然我翻開了文件夾，就一定能在 src 即 source 資源文件夾內看到幾個 .vue 文件...
打開之后時這個樣子的三塊結構：
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<script>
....
</script>
<style>
....
</style>
我覺得這和 HTML 很像 ... 因為都有 script 和 style 來定義頁面的樣式和一些腳本。但看到 template 的時候，我只想到了之前第一次課初探時用過的 Vue 實例中的 template ，我類比著思考，覺得這里一定就是掛載的那個 Vue 實例的頁面DOM結構了...
哈，新發現！至少找到了一些 div#app 里的東西啦！
可是那個 router-link 是什么？它可不是什么 html 的原生標簽吧！屬性中的 to 和 " / " 斜杠符號 無不透露著它代表著某種 **路由指向 **... 可能是類似 a 標簽的 href 鏈接吧 ？
如果說 router-link 是鏈接，那么 router-view 又是什么呢？ 路由視圖？聽上去怪怪的 ...
對這個 router 感覺還是一知半解 ... 那不如去看看 上一級文件夾里 也有個叫 router.js 的文件吧
// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
Vue.use(Router);
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
},
],
});
雖然這篇代碼里，我有好多東西都不懂，但是我這個人就是這樣，哪怕看不懂的東西，我也會先撿著我看得懂的讀，慢慢地思考、理解其他的陌生事物可能是什么 ...
那個 mode 顯示是 history 模式，一定就是我們創建時選擇的 用 歷史模式 創建 Vue router 了。
接下來的 routes 是一個 Object 對象數組，既然這個單詞 是復數形式，那么這里一定裝的就是各個路由鏈接的屬性信息了。
path、name 指定了 某個路由鏈接對象的 路由 和 名稱，這個 path 就是之后再瀏覽器中 " /#/ " 之后會訪問的 url 路徑地址。（ 如果你不采用 history 模式的話，就是傳統的 /xxx 路由模式，就沒有 # 號了。）
-
而這個 component 就很眼熟啦！我們不是才學過 TODO List 的組件化開發嗎！
我感覺一下子明白了，原來 .vue 文件 就是更完整、更復雜一些的 Vue.component( { template: ... } ) ，
-
所以其實 每一個 .vue 文件都將是我們開發過程中的一個組件：
比如你需要做一個移動電商網站的底部導航欄，四個小按鈕分別是“ 首頁、 發現好物、 購物車、 我的信息 ”，
它們本質上都差不多嘛！
那么不如將單個按鈕封裝成一個 “ 底部導航欄單按鈕組件 ”， 然后又新建一個 .vue 把這四個按鈕放一起，再次封裝成這樣一整個 “ 底部導航欄 ”，就可以很隨意很方便地在任何地方引入了！
-
當然 .vue 文件的組件內也可以引用組件呀！
比如我們的初始化項目中展示了兩個路由點： Home 和 About 頁面，而 Hello 組件實質上包含了一個 HelloWorld.vue 文件，在 components 文件夾中 ...
在代碼中是這樣引入的：
<script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue'; export default { name: 'home', components: { HelloWorld, // 將引入的組件注冊進來... }, }; </script>我們可以看到，官方 Vue CLI 腳手架生成項目后的注釋非常細致，它告訴了我們，@ 字符在路徑中表達的就是我們的 src 文件夾目錄，畢竟 src 文件夾是我們項目的總資源庫，所有東西基本都在這里，所以這在之后我們會經常用到這個簡寫。
-
當然光 import 也是不夠的，就像我們在學習 Vue 單 html 頁面實例掛載時一樣，同樣也需要將組建注冊到這個 .vue 的組件中！
你看這里也 export default 了一個對象，其實這也可以看做是一個 Vue 對象，因為最后你就是把這個 .vue 文件所代表的組件給導出了嘛 ...
多提一句 組件的引入與導出
其實當我看到 import 的時候還好，明白就是從某某文件中引入某個東西 ...
但是那個 export default 導出就讓我有點看著面生了 ...
隨著時代的發展 和 ECMAScript 的逐漸完善，ES6 開始可以讓我們自由地將你這一個 js 文件中的 對象 導出，并可以由其他 js 文件 導入進行使用 ... 聽上去和 python 的 from xxx import xxx 很類似 ，也就不難理解了...
組件化開發、工程化開發也必定是前端開發未來的大趨勢。
既然我們還在說 router 路由，那么其實關于底部導航欄，還有更好的辦法，那就是一并使用路由來管理 ... 因為底部 Tab bar 主要的功能 是切換頁面呀！
說完了組件的配置 js 文件，那么進入 main.js
當我們運行 npm install --save 來安裝某個工具包的時候，我們只是將它寫進了 package.json ，并把它下載到了當前項目文件夾的 node-modules 里面。
而 main.js 是整個項目的總舵手，它會以 js 的方式裝載各個引入的組件，這才是在項目中實際地把工具包引入進來哦！
// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
我們終于找到啦！原來項目就是在這里 掛載的全局 Vue 實例 ！
這樣我們和之前的 單頁面單HTML文件 掛在 Vue 實例的方式一對比，就能很清晰明了地明白 ：
- 在 Router 工具包的幫助下，項目以各個 路由點 來作為 組件的開發基礎目標；
- 以組件化化的方式，構建 .vue 文件來拼裝整個項目；
- 通過 main.js 來定義、總領整個項目的 Vue 架構 ...
- 通過 ESLint 來規范項目的代碼內容、通過 Webpack 、Babel 等工具來打包發布項目 ...
這不禁令我感嘆，原來前端開發也大有學問、大有可為。
事實證明，在干任何事情之前，首先你得要有一個總體的把握和認識，一個清晰的思路。
“ 努力是好的，但也要努力對方向，不要讓自己白費力氣！” —— 看《青春有你》時聽徐明浩說到的一句很有意義的話。
