vue專案學習

2021-09-13 18:34:56 字數 991 閱讀 5500

1、什麼是.vue檔案?

*.vue檔案,是乙個自定義的檔案型別,用類似於html的語法描述乙個vue元件。每個.vue檔案包含三種型別的頂級語言模組,。這三個部分分別代表了html,js,css。其中和是支援用預編譯語言來寫的。我們的專案用了「less」預編譯,是這樣寫的

3、*.vue**解析

這裡就是乙個*.vue檔案的基本結構

下面,不再稱呼*.vue檔案了,改稱為vue元件。首先,乙個vue元件,template則代表它的html結構。需要注意的是,不是**包含在中就可以了,而是必須在裡面放置乙個html標籤來包裹所有的**。上面的截圖例子中,採用了

標籤。會引入需要的元件,除了引用元件之外,我們會將所有的**包裹在export default{}裡面

引入元件之後,要在components:後面進行宣告

data是資料演示**

created表示元件載入完成時,需要執行的內容

methods是這個元件的方法,也可以說是函式。下邊截圖中的**表示,元件自定義了乙個叫getactivitycont的函式

就是寫的樣式

Vue學習 快速建立Vue專案

npm與cnpm cnpm是 團隊做的國內映象,因為npm的伺服器位於國外可能會影響安裝。映象與官方同步頻率目前為 10分鐘 一次以保證盡量與官方服務同步。npm install global vue cli cnpm install global vue cli 此命令只需要執行一次 vue in...

vue專案學習03

但是,我們的專案 還乙個都沒有看到。因此,這個章節,我們來認識一下所有的檔案。readme.md 專案說明文件 node modules 專案依賴包資料夾 build 編譯配置檔案,一般不用管 build.js check versions.js dev client.js dev server.j...

vue專案學習04

如果你按照我的結構框架去調整了之後,那麼,現在你的專案應該是出錯,並且跑不起來了。所以,我們需要進行一些調整,讓專案重新跑起來。我們先把預設專案裡面沒用的東西先刪除掉,把 調整為下面的樣子。router view div template export default script lang scs...