1.打开hbuilder软件，新建uniapp项目
2.关联unicloud服务空间
2.1 项目文件夹鼠标右键，打开uicloud web控制台
2.2 注册HBuilder 账号
2.3 新建服务空间
大约等待2分钟，服务空间初始化完毕！就可以使用了。
2.4 hbuilder项目中关联服务空间
2.5 确保登录账号和关联服务空间
2.6 运行项目
3.安装uview插件
3.1 使用Hbuilder X方式进行安装
在dcloud插件市场中找到uview
uview插件
需要登录dcloud账号！！！
选择项目，导入uview插件。
3.2 项目中进行uview插件的配置
配置步骤
-
引入uView主JS库
在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。``` // main.js import uView from '@/uni_modules/uview-ui' Vue.use(uView) ``` -
在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。``` /* uni.scss */ @import '@/uni_modules/uview-ui/theme.scss'; ``` -
引入uView基础样式
注意！在App.vue中首行的位置引入，注意给style标签加入lang=”scss”属性
``` <style lang="scss"> /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */ @import "@/uni_modules/uview-ui/index.scss"; </style> ``` -
配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。
温馨提示uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
如果您是通过uni_modules形式引入uView，可以忽略此配置// pages.json { // 如果您是通过uni_modules形式引入uView，可以忽略此配置 "easycom": { "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue" }, // 此为本身已有的内容 "pages": [ // ...... ] }
3.3 测试uview是否安装成功。
首页中引入uview插件的button按钮
<u-button type="primary" text="确定"></u-button>
如果显示如下，证明安装配置成功；可以使用uveiw的其他组件了。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/135741.html
