Vue 如何在vue cli中建立並引入自定義元件

2022-02-02 05:21:27 字數 2574 閱讀 7283

vue-cli中的所有元件都是存放在components資料夾下面的，所以在components資料夾下面建立乙個名為first.vue的自定義元件：

<


template


>


<


div>


<


h1>}


h1>


div>


template


>


<


script


>


//1、export 表示匯出,在自定義元件裡面使用export default匯出 


export 


default


}}script


>
1、在標籤裡面使用import匯入自定義的標籤：

// 1、匯入自定義元件 first即first.vue元件裡面設定的name值


import first from "./components/first"
2、在export裡面新增自定義元件：

// 2、新增自定義元件


components:
3、在標籤裡面引入自定義元件：

<


template


>


<


div 


id>


<


img 


src="./assets/logo.png"


>


<


first


>


first


>


div>


template


>
完整**如下：

<


template


>


<


div 


id>


<


img 


src="./assets/logo.png"


>


<


first


>


first


>


div>


template


>


<


script


>


//1、匯入自定義元件 first即first.vue元件裡面設定的name值


import first from 


"./components/first


"export 


default


}script


>


<


style


>


style


>
效果：

<


template


>


<


div>


<


h1>}


h1>


div>


template


>


<


script


>


export 


default


}}script


>



<


template


>


<


div>


<


h1>}


h1>


<


second


>


second


>


div>


template


>


<


script


>


//1、使用import匯入second.vue


import second from 


'./second';


//export 表示匯出


export 


default


},//2、新增自定義元件元件


components:


}script


>



<


template


>


<


div 


id>


<


img 


src="./assets/logo.png"


>


<


first


>


first


>


div>


template


>


<


script


>


//1、匯入自定義元件 first即first.vue元件裡面設定的name值


vue cli 建立快速 vue 專案
注意這安裝的是 vue cli2 版本的 vue 專案！雖然可以安裝，但是就目前而言並不適用！一般現在都用vue cli 3 1.首相你需要先有 node.js 使用node v npm v 去查詢自己是否安裝好 2.由於使用npm 下包很慢，因為是國際的問題，所以我們可以使用國內的 映象 映象安裝...


使用vue cli建立vue工程
在windows環境下，開啟命令列視窗，跳轉至想建立工程的路徑。如 d mywork 22 github rexel cn rexel jarvis 建立vue工程，命令 vue create rexel visual 可以選擇合適的載入控制項，我這裡選擇了管用的模式。也可以選擇default。進入...


vue使用vue cli建立專案
安裝執行環境 node和npm 安裝vue cli 檢視是否安裝成功vue v 安裝webpack 新建專案 1 vue init webpack 專案名稱 2 配置專案有關的資訊 專案名稱，開發者，描述，安裝路由，使用eslint 規範，測試單元 4 進入專案的資料夾下，使用npm run dev...