01通過npm的方式安裝uView組件庫
uView依賴SCSS，您必須要安裝此插件，否則無法正常運行。
如果您的項目是由HBuilder X創建的，
相信已經安裝scss插件，
如果沒有，請在HX菜單的 工具->插件安裝中找到"scss/sass編譯"插件進行安裝，
如不生效，重啟HX即可
然后執行 npm install uview-ui
這樣就可以下載組件庫了
除了通過npm的方式。
也可以通過下載的方式進行安裝。[我推薦使用下載的方式進行安裝]
下載的方式進行安裝需要注意的是
在項目根目錄的pages.json中去設置是不同的。
並且需要你調整一下目錄結構哈
說明你已經安裝了Scss了
02引入和注冊uView
//在main.js中引入，
//需要注意注意這兩行要放在import Vue之后。
import uView from "uview-ui";
Vue.use(uView);
03引入uView的全局SCSS主題文件
在uni.scss文件送引入
@import 'uview-ui/theme.scss';
04引入uView基礎樣式
在App.vue中【首行】的位置引入，
為什么是首行，因為你后面的樣式可以覆蓋uView組件內置的樣式
注意給style標簽加入lang="scss"屬性
否者會出現問題，我已經已經踩過坑了。
<style lang="scss">
/* 注意要寫在第一行，同時給style標簽加入lang="scss"屬性 */
@import "uview-ui/index.scss";
</style>
04置easycom組件模式
此配置需要在項目根目錄的pages.json中去設置
{ // 添加組件配置模式
"easycom": {
//這是通過npm的方式進行配置的
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
//這是通過下載到本地的方式進行配置的
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
//這兩者是有區別的，不知道各位小伙伴清楚不？
},
// 下面的就是你自己的內容
"pages": [
// ......
]
}
05 使用組件CountDown倒計時
<template>
<view class="">
<u-count-down :timestamp="timestamp"></u-count-down>
</view>
</template>
<script>
export default {
data() {
return {
timestamp: 86400,
}
}
}
</script>
說明組件使用成功了
使用uni-app開發小程序的小建議
uni-app官方推薦的是scss。
我們也要積極使用scss.
就不要說你喜歡less。就在項目中使用less了。
雖然這樣使用沒有什么問題，但是終歸是不好的~
uni.scss具有一些特點
1==>無需引入，在uni-app在編譯時，
會自動引入聲明<style lang="scss"></style>的文件中
2==>定義的scss變量，可以全局使用，比如說定義顏色，尺寸或者變量
關於壓縮和發行以及開發
我們都知道小程序預覽和發布的主包大小不能夠超過2M,
否者真機就無法預覽和發布。
有的小伙伴會說，使用uView這個組件庫的時候，會不會增加小程序的體積呀？
uView是按需引入的。
在【發行==>為小程序或者為其他類型的時候】
會自動刪除我們平時沒有使用的組件哈~
需要注意的是：如果你上傳小程序的時候，沒有點擊發行。
那么將不會刪除你沒有使用到的組件。
所以只要點擊了【發行】完全不需要擔心小程序的體積太大~
還有一個點需要注意的是：
在我們調試的時候，也就是開發的時候。
HBuilderX默認是沒有對JS進行壓縮和去除注釋的。【因為為了方便調試】
也沒有對組件進行按需引入。
所以在控制台經常會看見這樣一句友好的提示：
【運行模式下不壓縮代碼且含有sourcemap，體積較大；
若要正式發布，請點擊發行菜單進行發布】
人家提示在發布的時候==點擊發布這樣體積會大大的較少~
我們開發的時候，也可以這樣處理
HBuilderX 運行->運行到小程序模擬器->勾選 運行時是否壓縮代碼
MyTip在小程序中，我也不推薦使用很超前的語法
因為語法超前會轉化為es5
從而增加代碼量~
uni.scss會編譯到每個scss文件中(很重要)
這樣就可以將重復的顏色定義在一起了
uni.scss這個文件不是那么簡單
uni.scss會編譯到每個scss文件中(很重要)
我們在uni.scss中所寫的所有代碼。
會被編譯到每一個聲明了scss的文件中，
這就意味着.如果我們的uni.scss如果有幾百行,大小10k左右.
那么這個10k都會被注入聲明scss文件(頁面)中。
如果我們的項目有50個頁面。你可以算一下
也就是說可能因此導致整體的包體積多了50 * 10 = 500k的大小
是不是很可怕呀。所以這個uni.scss文件盡量不要超過5k。
還有就是如果頁面沒有樣式，就不要去聲明
<style lang="scss"></style>它了。
原因你可能也知道了吧~
對於樣式覆蓋的問題
為了避免樣式被用戶覆蓋或者被污染,
我們會組件或者頁面都會給style標簽加上scoped屬性。
組件
<template>
<view class="zujian"></view>
</template>
<style scoped>
.zujian {
background-color: #007AFF;
}
</style>
在頁面中更改組件顏色.
我們一般通過v-deep或/deep/指令修改，如下寫法
<template>
<my-zujain></my-zujain>
</template>
<style scoped>
//這是沒有使用scss的寫法
::v-deep .zujian {
background-color: red;
}
</style>
<style scoped lang="scss">
//這是使用scss的寫法
::/deep/ .zujian {
background-color: red;
}
</style>
上面的寫法，在App和H5正常的。
但是在小程序上卻不正常了。
它要求我們在::v-deep或/deep/前面必須還要有父元素的類名存在
所以我們更改為如下
在小程序上的寫法
<template>
<view class="cont-box">
<my-zujain></my-zujain>
</view>
</template>
<style scoped>
.cont-box ::v-deep .zujian {
border: 1px solid blue;
}
</style>
這樣就可以了，所以我個人推薦使用
在::v-deep或/deep/前面添加有父元素的類名
因為這樣可以兼容App和H5和小程序都是正常的