vue項(xiàng)目目錄及主要文件的初步分析

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

現(xiàn)在已經(jīng)成功創(chuàng)建了一個(gè)vue項(xiàng)目，它的目錄如下：

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

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

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

HelloWorld沒有被定義，如此看來import 后跟XX，上面的標(biāo)簽就要是XX，這兩個(gè)是一個(gè)東西。但是當(dāng)我把標(biāo)簽改為helloWorld，和import后面跟著的名字一樣的時(shí)候，還是報(bào)錯(cuò)，依然說HelloWorld is not defined。這時(shí)將目光移到下面

import下面有一個(gè)export的對(duì)象，它應(yīng)是起到導(dǎo)出作用，那么導(dǎo)出到哪里呢,把什么東西到處去呢？default對(duì)象里有一個(gè)name屬性，值為‘a(chǎn)pp‘,那么這個(gè)app剛好是作為index.html里唯一的div的id使用的，也就是說這一整個(gè)template被命名為app傳給index.html使用。再又可以看到，name下面還有components名為Helloworld，整個(gè)頁面也就這里有HelloWorld了，把它變?yōu)閔elloWorld后vue應(yīng)用又正常了，不再報(bào)錯(cuò)，那么我可以下結(jié)論了，對(duì)于一個(gè)vue文件來說，每當(dāng)我們?cè)趖emplate里使用另外一個(gè)vue文件里內(nèi)容的時(shí)候，需要1：import 這個(gè)vue文件，取名為XXX，2：在template里使用時(shí)名字也要是XXX，最后把本vue文件給別人使用時(shí)要導(dǎo)出去，而且要在components里聲明XXX。這三處要一致，三位一體。
最后的style沒有特別之處，我們?cè)賮砜碒elloWorld.vue：

我們先將目光移到script里，我們可以看到name是‘HelloWorld’，這個(gè)HelloWorld不知作用在哪里，暫且先打一個(gè)問號(hào)，因?yàn)槭褂迷撐募臅r(shí)候，名字并不一定要是HelloWorld。但是不管怎么說，都保持一致總是沒錯(cuò)的。
接下來引人注目的是一個(gè)props對(duì)象，里頭有一個(gè)msg：String?？雌饋硎菍?duì)一個(gè)變量msg聲明類型為String。我查閱了props這個(gè)單詞，是支柱、支持者的意思，那么它支持了哪里呢？
可以看到頁面頭部有一個(gè){{msg}}，用雙花括號(hào)包括了，顯然這里不是直接顯示msg這是三個(gè)字母，這個(gè)msg是一個(gè)變量，類型為String，那么這個(gè)變量的值是什么呢？在這個(gè)HelloWorld文件里我們找不到答案。我們回過頭去找App.vue

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

它以兩句import為開頭，import APP很好理解，因?yàn)閺慕Y(jié)構(gòu)上看app.vue應(yīng)當(dāng)是囊括了整個(gè)vue應(yīng)用的主體內(nèi)容的，它里頭又import了各種各樣的下級(jí)vue文件。所以可以把a(bǔ)pp.vue抽象看做整個(gè)應(yīng)用的內(nèi)容，即body部分。而import Vue呢？因?yàn)槟夸浵乱谎劭床坏絍ue，所以我們把目光投向node_modules，果然再里面發(fā)現(xiàn)了Vue文件夾。
下一句是給Vue的一項(xiàng)屬性設(shè)置為false，我暫且不管它。最后從語法上是new 了一個(gè)Vue對(duì)象，參數(shù)是一個(gè)函數(shù)，然后給對(duì)象掛載‘#app’。在里面看到了render一詞，它表示渲染，是否可以認(rèn)為把App里的內(nèi)容渲染到某一個(gè)地方呢？而后面‘#app’明顯是一個(gè)id選擇器，類似jquery的語法，index.html里正好有一個(gè)id為App的div。
我可以想象，這個(gè)new語句應(yīng)該當(dāng)是把指向頁面內(nèi)容的App對(duì)象在Vue的構(gòu)造函數(shù)里做了某種處理，應(yīng)當(dāng)是將其轉(zhuǎn)化為正常的html代碼，得到可以被瀏覽器直接解析的內(nèi)容，然后把這些內(nèi)容掛載到index.html里的id為app的div里

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