在webpack中封裝並渲染vue元件(筆記)

2022-06-13 03:45:09 字數 1629 閱讀 8524

傳統的做法可用性不好,不利於團隊協作開發。

在模組化開發的前提下,它給我們提供了一種新的使用元件的方式

如果我們需要乙個元件,就建立乙個.vue的檔案來封裝這個元件(實現了對單獨的元件的模組化封裝)

這個元件裡面有三個根元素template,script,style

注意:在這裡元件的data成員必須是乙個函式,還需要有return來返回,而methods仍舊是乙個物件。

首先需要匯入元件:

由於我們用的是vue的框架,所以我們需要匯入的就是vue的包,由於main.js識別不了模板,所以需要安裝外掛程式

強調:"vue-loader": "^15.x.x",版本 用法:

1.要在webpack.config,js檔案中匯入vue-loader的外掛程式,

輸入命令:

在webpack.config.js中引入vue-loader15所依賴的外掛程式

2.接下來需要配置webpack外掛程式的節點

3.配置節點,如果是以.vue結尾的檔案,就用vue-loader。

以下貼出案例部分**截圖:

在html中以標籤的形式來使用

怎麼使用路由?

1.首先需要安裝vue-router包,在終端輸入命令: npm i vue-router  -s

2.然後匯入包,將路由物件掛載到vue身上

3.匯入子元件,

接下來配置路由規則(首先配置路由物件)

將路由物件掛載到vuemedel身上

在根元件內部「刨坑」

效果圖:

如何使用子路由?

首先先建立子元件檔案

配置路由:

引入進來子元件:

效果圖:

在vue中封裝axios

將 axios 新增到vue的原型中 例項物件可以直接使用原型物件中的屬性或方法 所有的元件都是vue的例項 說明 只要是像 axios 這樣的第三方庫 與vue沒有任何關係 都應該通過這種方式來統一匯入 然後在元件中就用this.http代替axios 然後在元件的路徑可以寫成這樣 只要配置了攔擊...

vue中封裝svg icon元件並使用

1.使用vue cli3.0腳手架執行搭建乙個專案,位址 截圖如下 2.components檔案下新建svgicon元件 檔案中的 如下 3.將所需svg檔案放置icons的svg資料夾下 icons檔案下的index.js檔案中的 如下 import vue from vue import svg...

在dll中delphi中封裝窗體

dll工程library formdll uses sysutils,classes,forms,dllform in dllform.pas dllfrom2 in dllfrom2.pas begin end.dll單元檔案一 unit dllform inte ce uses windows,...