Nutui 移動端輕量級Vue元件庫自己上手操作

2021-10-06 11:24:42 字數 1529 閱讀 7448

跟著官文走了下還是採坑了,應該是自己的問題,記錄下來這個實踐過程~

nutui(是一套京東風格的移動端元件庫,開發和服務於移動web介面的企業級前中後台產品。

雖然是基於京東的業務累計生成的ui庫,但是由於移動端的視覺規範和互動效果大體類似,且這個元件庫可以很好地做到按需引入,並不會引起資源浪費。目前,線上執行的穩定版本是2.*,正在開發基於vue3.0版本,開發團隊前端有50名成員組成,且開源,所以值得推薦。

整體來說,nutui是屬於可以10分鐘上手的元件庫,官文也很簡單易懂,大家可以進行碎片化學習。

在使用vue cli腳手架構建的vue工程中安裝nutui

npm i @nutui/nutui -s
在專案的主入口檔案(main.js)載入nutui

import vue from 'vue';

import nutui from '@nutui/nutui';

import '@nutui/nutui/dist/nutui.css';

nutui.install(vue);

上述方式會引入所有元件,如果你的工程體量很小,只需要按需引入即可,下面來說明

1. 安裝webpack外掛程式

npm i @nutui/babel-plugin-separate-import -d
2. 配置babel的配置檔案

]

]}

如果是vuecli3+,在package.config同級目錄下的babel.config.js中新增編譯配置

module.exports = },}

}

3. 修改 webpack 配置檔案的 sass-loader 配置

}

如果是vuecli3+,在package.config同級目錄下建立 vue.config.js,配置scss的載入路徑

"plugins": [

["@nutui/babel-plugin-separate-import", ]

]

4. 在專案中(main.js)只引入用到的元件

import vue from 'vue';

import from '@nutui/nutui';

dialog.install(vue);

picker.install(vue);

元件的使用方式和vue中其他元件的使用方式一致,開心~

日期選擇

有預設日期,選擇後自動回填的~~~

}

npm run serve / npm run dev 跑一下,成功啦~~~

移動端網頁輕量級日期控制項LCalenda

移動端網頁輕量級日期控制項lcalenda 所用專案 9dian9 aicc dianxin 這裡僅記錄一下在vue cli裡的使用 type text name start date id start date placeholder 開始日期 readonly readonly v model ...

京東風格的移動端Vue元件庫NutUI2 0來啦

移動端 vue 元件庫 nutui 自發布以來受到了廣泛的關注。據不完全統計,目前至少有30多個京東的 web 專案正在使用 nutui 經過一段時間緊鑼密鼓的開發,近期,京東正式發布了 nutui 的 2.0 版。nutui 2.0 定位於乙個京東風格的移動端精品元件庫,並不是 nutui 1.x...

輕量級的移動 webapp 框架Jingle

一大早爬起來,發現這樣的乙個東東,國產,感覺實用性很強,試著用用。1.28補記 試著用jingle做了乙個 的移動版,感覺如果在布局上要求不高的話 目前支援的布局只有list,還是挺不錯,做東西很快。忽然想到這可能也是一種心法,少即是多。當我心中設想著很多複雜效果時,發現沒有可用的工具 但一旦我確定...