建站
咨詢
售后
建站咨詢
新聞中心
今天開始學(xué)習(xí)vue的基本用法，用npm install -g @vue/cli后成功把@vue文件夾安裝到了npm文件夾的同級目錄下，然后發(fā)現(xiàn)node的目錄下--即npm命令腳本目錄下添加了一個vue命令腳本(意外發(fā)現(xiàn)當(dāng)初安裝express框架的時候也出現(xiàn)了這個情況)。由于改目錄已經(jīng)添加到系統(tǒng)路徑里，所以vue命令也可以跟npm一樣直接使用了~。
然后可以用vue create my-project在命令行當(dāng)前目錄下新建一個vue項目。
現(xiàn)在已經(jīng)成功創(chuàng)建了一個vue項目，它的目錄如下：
可以看到主要有三個下級目錄：node_modules、public 和 src。首先node_modules存放的是該項目所需要的node模塊；public里存放靜態(tài)文件，這里有了網(wǎng)頁的小圖標(biāo)favicon.ico和應(yīng)用的主頁index.html。
在如上的index.html里，只有兩個東西我們可能不熟悉，一個是noscript，看里頭的文字描述，它因該是當(dāng)用戶的瀏覽器沒有啟用javascript時，瀏覽器自動顯示noscript里的文字，如果瀏覽器開啟了javascript，那么這段文字不顯示。另一個id為app的div無疑是最重要的部分，看來vue的所有的內(nèi)容都應(yīng)該被包含在這個div里面。
assets里面就是一張圖片，沒有什么奇怪的，看來重頭戲就在helloWorld.vue和App.vue里面了。先來看App.vue
包含三個部分：template，javascript和css。template里頭的內(nèi)容顯然是描述頁面結(jié)構(gòu)的，里面有一張圖片和一個名為HelloWorld的標(biāo)簽，然后我們又可以看到components文件夾下正好有一個HelloWorld.vue，那么我們是否可以認(rèn)為凡是在components里定義的XXX.vue文件，我們可以在其他地方用
這句話從字面意思上來看顯然是引入HelloWorld.vue這個東西，把它賦給，或者說命名為HelloWorld，然后在這里可以使用HelloWorld。這句話一定程度上證實了上面我的看法，然后我修改import HelloWorld為helloworld，刷新頁面后得到如下錯誤：
HelloWorld沒有被定義，如此看來import 后跟XX，上面的標(biāo)簽就要是XX，這兩個是一個東西。但是當(dāng)我把標(biāo)簽改為helloWorld，和import后面跟著的名字一樣的時候，還是報錯，依然說HelloWorld is not defined。這時將目光移到下面
import下面有一個export的對象，它應(yīng)是起到導(dǎo)出作用，那么導(dǎo)出到哪里呢,把什么東西到處去呢？default對象里有一個name屬性，值為‘a(chǎn)pp‘,那么這個app剛好是作為index.html里唯一的div的id使用的，也就是說這一整個template被命名為app傳給index.html使用。再又可以看到，name下面還有components名為Helloworld，整個頁面也就這里有HelloWorld了，把它變?yōu)閔elloWorld后vue應(yīng)用又正常了，不再報錯，那么我可以下結(jié)論了，對于一個vue文件來說，每當(dāng)我們在template里使用另外一個vue文件里內(nèi)容的時候，需要1：import 這個vue文件，取名為XXX，2：在template里使用時名字也要是XXX，最后把本vue文件給別人使用時要導(dǎo)出去，而且要在components里聲明XXX。這三處要一致，三位一體。
最后的style沒有特別之處，我們再來看HelloWorld.vue：
我們先將目光移到script里，我們可以看到name是‘HelloWorld’，這個HelloWorld不知作用在哪里，暫且先打一個問號，因為使用該文件的時候，名字并不一定要是HelloWorld。但是不管怎么說，都保持一致總是沒錯的。
接下來引人注目的是一個props對象，里頭有一個msg：String?？雌饋硎菍σ粋€變量msg聲明類型為String。我查閱了props這個單詞，是支柱、支持者的意思，那么它支持了哪里呢？
可以看到頁面頭部有一個{{msg}}，用雙花括號包括了，顯然這里不是直接顯示msg這是三個字母，這個msg是一個變量，類型為String，那么這個變量的值是什么呢？在這個HelloWorld文件里我們找不到答案。我們回過頭去找App.vue
發(fā)現(xiàn)helloworld里面有一個msg，值為字符串，瀏覽器頁面里也確實顯示了這個字符串，那么也就是說，在一個vue文件的props里聲明變量XXX為某一個數(shù)據(jù)類型，然后就可以在template里使用這個變量了，變量的具體值由使用這個vue文件的另一個父template里確定，只需要在子template構(gòu)成的標(biāo)簽上，這里是helloWorld，加上XXX=......即可（數(shù)據(jù)類型要符合定義）。
最后還有一個main.js，從名字上來說這個js文件是構(gòu)建整個vue應(yīng)用的入口。
它以兩句import為開頭，import APP很好理解，因為從結(jié)構(gòu)上看app.vue應(yīng)當(dāng)是囊括了整個vue應(yīng)用的主體內(nèi)容的，它里頭又import了各種各樣的下級vue文件。所以可以把a(bǔ)pp.vue抽象看做整個應(yīng)用的內(nèi)容，即body部分。而import Vue呢？因為目錄下一眼看不到Vue，所以我們把目光投向node_modules，果然再里面發(fā)現(xiàn)了Vue文件夾。
下一句是給Vue的一項屬性設(shè)置為false，我暫且不管它。最后從語法上是new 了一個Vue對象，參數(shù)是一個函數(shù)，然后給對象掛載‘#app’。在里面看到了render一詞，它表示渲染，是否可以認(rèn)為把App里的內(nèi)容渲染到某一個地方呢？而后面‘#app’明顯是一個id選擇器，類似jquery的語法，index.html里正好有一個id為App的div。
我可以想象，這個new語句應(yīng)該當(dāng)是把指向頁面內(nèi)容的App對象在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里面。
由此，整個vue項目目錄的主要文件都簡要做了初步的分析，更深入的分析留到后面，讓我們利用現(xiàn)有的知識以及一些猜想從此刻開始就構(gòu)建屬于自己的vue項目吧，just do it！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
網(wǎng)頁名稱：vue項目目錄及主要文件的初步分析-創(chuàng)新互聯(lián)
URL標(biāo)題：http://fisionsoft.com.cn/article/dhcgip.html
