uniapp中使用uview

不念不忘少年蓝@ 2022-11-19 07:49 403阅读 0赞

**一、在uview中下载文件**  
https://ext.dcloud.net.cn/plugin?id=1593  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70]  
**二、将下载后的文件解压放置在项目的根目录中**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 1]  
**三、安装scss插件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 3]  
**四、在main.js文件中引入uview的js库**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 4]

import uView from "uview-ui";
    Vue.use(uView);

**五、在项目的根目录uni.scss文件中引入uView的全局SCSS主题文件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 5]

/* uni.scss */
    @import 'uview-ui/theme.scss';

**六、在App.vue文件的首行位置引入uView基础样式**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 6]

**七、在pages.json文件中配置easycom组件模式**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 7]

"easycom": { 
    	        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
    	    },

以上就是在uni-app中配置uview的步骤，可以在页面中测试一下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 8]  
效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 9]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70]: /images/20221119/5537828d74d141b2bab17986c9690ac1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 1]: /images/20221119/1231d0a3ee214f14a061196fc2473a17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 2]: /images/20221119/69b7fa10ab1240599cb6215c037b73b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 3]: /images/20221119/7ca6754803814c12aa18eccf36208638.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 4]: /images/20221119/593cca01b31943a2b86d132e7da414c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 5]: /images/20221119/fdd09382b75945f192904da9561487b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 6]: /images/20221119/564740592e0347e18f4407bd6459de7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 7]: /images/20221119/9ccbb0776f2b4137a810a608f91e526b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 8]: /images/20221119/6fd6d5837b334c999433b2e5d105a31a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ0NTM2Mw_size_16_color_FFFFFF_t_70 9]: /images/20221119/cd7a0ba650cb4c419e53acbad3252082.png