跟著官文走了下還是採坑了,應該是自己的問題,記錄下來這個實踐過程~
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,還是挺不錯,做東西很快。忽然想到這可能也是一種心法,少即是多。當我心中設想著很多複雜效果時,發現沒有可用的工具 但一旦我確定...