NPM引入元件

2021-09-24 02:59:36 字數 685 閱讀 7429

原來前端開發的適配也是如此的雜亂無章，感覺比移動端還扯淡，特別是ie8及以下的。

在安卓開發中，我們需要經常引入第三方元件，那麼在前端改怎麼引入的？以我們移動端常見的輪播圖為例，

首先在github上找到輪播圖的元件

//git 上的位址

下面是使用說明

使用說明：


獲取 amaze ui swiper


使用 npm: npm install amazeui-swiper


引入 swiper 樣式（位於 dist 目錄下的 css）：


在 jquer 後面引入 swiper 外掛程式（位於 dist 目錄下）：
有兩種引入方式，

對於npm不熟悉的可以看下這個

上面是css的引入

這裡一定要注意引入的順序，不然會導致找不到資源，最好把juery.js放在最上面，因為所有的js都需要用到，然後把自己的js檔案放在最下面，因為你自己的js檔案中可能需要引入三方js的檔案

執行結果如下：

npm發布元件

vue cli建立vue專案以及配置檔案梳理 一 vue打包後靜態資源路徑 設定config index.js檔案裡build部分的assetspublicpath 二 vue打包後部分路徑不對 設定build utils.js檔案裡cssloaders部分的publicpath 1.註冊npm賬號...

動態引入元件

在頁面上建立標籤 主要使用的是非同步元件 使用多個時可以使用for迴圈進行建立 通過require.context方法獲取路徑下元件的物件 let requirecomponent require.context components fromitem 在當前目錄下查詢 false,不遍歷子資料夾 ...

建立npm 元件包

1.安裝node.js 2.登入 npm login 3.查詢當前登入資訊 npm who am i 4.建立專案 5.發布 npm publish 6.解決方案 更換npm registry路徑 npm config set registry 7.重新 npm publish 8.registry...