vue項目目錄及主要文件的初步分析

今天開始學習vue的基本用法，用npm install -g @vue/cli后成功把@vue文件夾安裝到了npm文件夾的同級目錄下，然后發現node的目錄下--即npm命令腳本目錄下添加了一個vue命令腳本(意外發現當初安裝express框架的時候也出現了這個情況)。由于改目錄已經添加到系統路徑里，所以vue命令也可以跟npm一樣直接使用了~。
然后可以用vue create my-project在命令行當前目錄下新建一個vue項目。

現在已經成功創建了一個vue項目，它的目錄如下：

可以看到主要有三個下級目錄：node_modules、public 和 src。首先node_modules存放的是該項目所需要的node模塊；public里存放靜態文件，這里有了網頁的小圖標favicon.ico和應用的主頁index.html。
在如上的index.html里，只有兩個東西我們可能不熟悉，一個是noscript，看里頭的文字描述，它因該是當用戶的瀏覽器沒有啟用javascript時，瀏覽器自動顯示noscript里的文字，如果瀏覽器開啟了javascript，那么這段文字不顯示。另一個id為app的div無疑是最重要的部分，看來vue的所有的內容都應該被包含在這個div里面。

assets里面就是一張圖片，沒有什么奇怪的，看來重頭戲就在helloWorld.vue和App.vue里面了。先來看App.vue

包含三個部分：template，javascript和css。template里頭的內容顯然是描述頁面結構的，里面有一張圖片和一個名為HelloWorld的標簽，然后我們又可以看到components文件夾下正好有一個HelloWorld.vue，那么我們是否可以認為凡是在components里定義的XXX.vue文件，我們可以在其他地方用<XXX/>來使用它呢？這個暫且打一個問號，我們來看下面的：import HelloWorld from ‘./components/HelloWorld.vue’
這句話從字面意思上來看顯然是引入HelloWorld.vue這個東西，把它賦給，或者說命名為HelloWorld，然后在這里可以使用HelloWorld。這句話一定程度上證實了上面我的看法，然后我修改import HelloWorld為helloworld，刷新頁面后得到如下錯誤：

HelloWorld沒有被定義，如此看來import 后跟XX，上面的標簽就要是XX，這兩個是一個東西。但是當我把標簽改為helloWorld，和import后面跟著的名字一樣的時候，還是報錯，依然說HelloWorld is not defined。這時將目光移到下面

import下面有一個export的對象，它應是起到導出作用，那么導出到哪里呢,把什么東西到處去呢？default對象里有一個name屬性，值為‘app‘,那么這個app剛好是作為index.html里唯一的div的id使用的，也就是說這一整個template被命名為app傳給index.html使用。再又可以看到，name下面還有components名為Helloworld，整個頁面也就這里有HelloWorld了，把它變為helloWorld后vue應用又正常了，不再報錯，那么我可以下結論了，對于一個vue文件來說，每當我們在template里使用另外一個vue文件里內容的時候，需要1：import 這個vue文件，取名為XXX，2：在template里使用時名字也要是XXX，最后把本vue文件給別人使用時要導出去，而且要在components里聲明XXX。這三處要一致，三位一體。
最后的style沒有特別之處，我們再來看HelloWorld.vue：

我們先將目光移到script里，我們可以看到name是‘HelloWorld’，這個HelloWorld不知作用在哪里，暫且先打一個問號，因為使用該文件的時候，名字并不一定要是HelloWorld。但是不管怎么說，都保持一致總是沒錯的。
接下來引人注目的是一個props對象，里頭有一個msg：String。看起來是對一個變量msg聲明類型為String。我查閱了props這個單詞，是支柱、支持者的意思，那么它支持了哪里呢？
可以看到頁面頭部有一個{{msg}}，用雙花括號包括了，顯然這里不是直接顯示msg這是三個字母，這個msg是一個變量，類型為String，那么這個變量的值是什么呢？在這個HelloWorld文件里我們找不到答案。我們回過頭去找App.vue

發現helloworld里面有一個msg，值為字符串，瀏覽器頁面里也確實顯示了這個字符串，那么也就是說，在一個vue文件的props里聲明變量XXX為某一個數據類型，然后就可以在template里使用這個變量了，變量的具體值由使用這個vue文件的另一個父template里確定，只需要在子template構成的標簽上，這里是helloWorld，加上XXX=......即可（數據類型要符合定義）。
最后還有一個main.js，從名字上來說這個js文件是構建整個vue應用的入口。

它以兩句import為開頭，import APP很好理解，因為從結構上看app.vue應當是囊括了整個vue應用的主體內容的，它里頭又import了各種各樣的下級vue文件。所以可以把app.vue抽象看做整個應用的內容，即body部分。而import Vue呢？因為目錄下一眼看不到Vue，所以我們把目光投向node_modules，果然再里面發現了Vue文件夾。
下一句是給Vue的一項屬性設置為false，我暫且不管它。最后從語法上是new 了一個Vue對象，參數是一個函數，然后給對象掛載‘#app’。在里面看到了render一詞，它表示渲染，是否可以認為把App里的內容渲染到某一個地方呢？而后面‘#app’明顯是一個id選擇器，類似jquery的語法，index.html里正好有一個id為App的div。
我可以想象，這個new語句應該當是把指向頁面內容的App對象在Vue的構造函數里做了某種處理，應當是將其轉化為正常的html代碼，得到可以被瀏覽器直接解析的內容，然后把這些內容掛載到index.html里的id為app的div里

檢查瀏覽器得到這樣的內容，id為app的div依然在，而里面的內容都是正常的html元素，可以認為$mount就是把內容全部放在id為app的div里面。
由此，整個vue項目目錄的主要文件都簡要做了初步的分析，更深入的分析留到后面，讓我們利用現有的知識以及一些猜想從此刻開始就構建屬于自己的vue項目吧，just do it！