uview如何配置到uniapp项目中?
如果你想了解到更详细的文档,进入 uview官网 查看
1、使用安装包方式
首先要去官网下载最新的包 下载地址
官网提供了三种包:
第一种方式只有uview源码,这是uview的核心。
第二种方式类似于一个uview项目的脚手架,这是个空项目,但它已经帮我们配置好uview了,所以如果你是一个新的uniapp项目,可以选择下载这个。
第三种是整个uView演示项目,里面有uView核心,组件演示,模板等。此项目运行用于查看UI演示效果,复制模板案例,通过里面的示例,可以快速掌握某一个组件的用法。(可以下载一个,体验uview项目的所有组件与模版)
因为我们是教大家怎么配置一个uview,所以我们下载第一个包。
接下来我们使用HBuilderX创建一个uniapp的项目
- 创建完成之后,我们将刚刚下载的包,直接复制到项目的根目录下。
因为uview的使用的是scss,所以我们需要使用HBuilderX安装scss的插件。
- 引入uView主JS库
在项目根目录中的main.js中,引入并使用uView的JS库, 注意这两行要放在import Vue之后。
- 在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。
/* uni.scss */
@import 'uview-ui/theme.scss';
- 引入uView基础样式
在App.vue中首行的位置引入,注意给style标签加入lang="scss"属性
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
- 配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。
uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。
- 1
- 2
// pages.json { "easycom": { "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue" },
// 此为本身已有的内容 <span class="token string">"pages"</span><span class="token keyword">:</span> <span class="token punctuation">[</span> // <span class="token punctuation">..</span><span class="token punctuation">..</span><span class="token punctuation">..</span> <span class="token punctuation">]</span>
process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzkyNTcz,size_16,color_FFFFFF,t_70#pic_center" alt=“在这里插入图片描述”>
到此,我们已经将uview配置好了。