在 uniapp 項(xiàng)目上使用 uView UI框架
前言(廢話) ---- 不看也行
剛工作不久, 公司直接給了一手新項(xiàng)目, 微信小程序的, 經(jīng)常聽到群里有小伙伴用這兩套進(jìn)行開發(fā), 感覺很香, 所以決定我也用這一套整整
用 uniapp 創(chuàng)建uniapp容易, 結(jié)果引用 uView 的時(shí)候有點(diǎn)懵... 決定整一手教程,
如果按照我的方法用不了的話, 麻煩提醒下我哈, 我更新或者刪除, 避免后面小伙伴被我坑了....
正文開始
-
下載 uView 插件
官方下載地址 ?? https://ext.dcloud.net.cn/plugin?id=1593
1.1 點(diǎn)擊 "下載插件ZIP"
1.2 將下載的壓縮包解壓的到其中 uview-ui 的文件夾并進(jìn)行復(fù)制
1.3 將 uviw-ui 文件夾復(fù)制到創(chuàng)建好的 uni-app 項(xiàng)目根目錄下
下載uview插件.png
- 在 uniapp 項(xiàng)目根目錄下
main.js文件 引入并使用uView庫
// 引入并使用 uView 庫
import uView from 'uview-ui';
Vue.use(uView);
main.js引入uview.png
- 在 uniapp 項(xiàng)目根目錄下
App.vue文件 引入基礎(chǔ)樣式
<style lang="scss">
// 引入 uview 基礎(chǔ)樣式
@import "uview-ui/index.scss";
</style>
注意: 這里用到了scss, 需要 HBuild 有安裝 sass/scss 編譯插件, 否則編譯時(shí)會報(bào)錯(cuò), 安裝方法我放最后頭哈, 沒安裝的話記得安裝一下子
引入uview基礎(chǔ)樣式.png
- 在 uniapp 項(xiàng)目根目錄下
uni.scss文件 引入全局scss變量文件
/* uni.scss */
@import "uview-ui/theme.scss";
引入全局scss變量文件.png
- 在 uniapp 項(xiàng)目根目錄下
pages.json文件 配置easycom規(guī)則
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
配置easycom規(guī)則.png
基礎(chǔ)工作搞完了, 接下來使用一下爽一下
uview官網(wǎng)??https://www.uviewui.com/components/intro.html
uview組件介紹.png
- 左邊列表有很多組件, 找到需要的, 或者喜歡的, 然后復(fù)制組件基本結(jié)構(gòu)代碼到項(xiàng)目中
我們來試試
將上面那副圖綠色框框圈起來的代碼復(fù)制到我們的項(xiàng)目中
uview組件的使用.png
看下效果, 其實(shí)在官網(wǎng)相應(yīng)組件介紹右側(cè)就可以看到效果了
效果圖.png
對了, 組件介紹那邊還有很多屬性可以設(shè)置, 可以按照適合現(xiàn)有項(xiàng)目需求進(jìn)行配置修改(建議使用每個(gè)組件之前瀏覽一下整組件的文檔)
好了, 完事兒, 不懂得話可以問我哈
講一下 sass/scss 編譯插件在 HBuilder上面怎么安裝
1. 直接看圖吧圖片上有介紹哈
sass插件安裝教程.png
2. 進(jìn)入插件官網(wǎng)后 第一個(gè)就是顯示sass插件了, 直接點(diǎn)進(jìn)去, 沒有的話就搜索一下
插件官網(wǎng).png
3. 點(diǎn)擊使用 HBulider 安裝插件, 跟著提示打開返回HBulider
安裝插件.png
4. 回到 HBulider 后會彈出是否安裝插件. 當(dāng)然時(shí)選擇是了哈哈哈, 右下角有安裝提示, 成功后打開我們 HBulier 安裝插件面板確認(rèn)下是否有安裝成功(沒有的話就再試試..)
插件安裝完畢.png
