uniapp项目怎么运行,uniapp怎么部署

　　本文介绍了将uViewUI引入uniapp项目并简单使用的方法。希望对你有帮助！

　　UNI-APP开发(仿饿)开发课程：进入学习

uni-app 引入uViewUI

　　 HBuilder中uviewui的插件市场X:https://ext.dcloud.net.cn/plugin? Id=1593 uviewui官方地址：https://uviewui.com/1、npm 安装或者更新 uViewUI

　　1.1、安装

　　//安装

　　npm安装uview-ui1.2、更新

　　您要更新的版本已经安装并可以使用。

　　//更新

　　国家预防机制更新uview-ui1.3、查看版本号

　　有两种方法可以查询正在使用的uView版本：

　　由console.log打印

　　console.log(这个。$ u . config . v)；

　　//或(两者等效)

　　console.log(这个。$ u . config . version)；查看源代码的形式

　　可以参考uwiew的配置文件，了解当前版本号。具体位置是“/u view-ui/libs/config/config . js”。

　　2、npm 安装方式的配置

　　乌维尤依靠SCSS。您必须安装这个插件，否则它将无法正常工作。

　　2.1、HBuilderX 工具中要安装 scss 插件： HX菜单的 工具-插件安装中找到 "scss/sass编译" 插件进行安装

　　外挂市场直接进口：https://ext.dcloud.net.cn/plugin? id=2046

　　注意：插件市场不支持IE跳转，推荐使用谷歌Chrome。

　　如果您的项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持。如果已经安装，请跳过它。

　　//安装节点-sass

　　npm i节点-sass -D

　　//安装sass-loader

　　npm i sass-loader -D3、对相关文件进行配置

　　3.1、在 main.js 文件全局引入 uView

　　//main.js文件

　　从“uview-ui”导入uView；

　　vue . use(uView)；如图所示：

　　3.2、uni.scss 文件 引入 uView 的全局 SCSS 主题文件

　　@ import uview-ui/theme . scss ；如图所示：

　　3.3、在App.vue文件引入uView基础样式

　　风格

　　/*注意把它写在第一行，把lang=scss 属性加到style标签*/

　　@ import uview-ui/index . scss ；

　　/style如图所示：

　　4、全局引入和按需加载

　　4.1、全局引入

　　在pages.json上配置easycom

　　注意：uni-app为了调试性能，修改easycom规则不会实时生效。配置完成后，需要重启HX或者重新编译项目才能正常使用uView的功能。

　　请确保您的pages.json中只有一个easycom节，否则请自行合并多个预约规则。

　　//pages.json

　　{

　　Easycom: {u-(。*): u view-ui/components/u-$ 1/u-$ 1 . vue }，//这是自己已有的内容 pages: [//.]}如图所示：

　　4.2、按需加载

　　在某些情况下，您可能不想通过easycom引用组件(尽管我们强烈建议您使用easycom)，那么您可以使用导入，一种常规的日期确定方法，如下所示：

　　模板

　　u-动作表：list= list v-model= show /u-动作表

　　/模板

　　脚本

　　从“u view-ui/components/u-action-sheet/u-action-sheet . vue”导入uActionSheet

　　导出默认值{

　　组件：{

　　行动表

　　},

　　data() {

　　返回{

　　列表：[{

　　文本：“喜欢”，

　　颜色：蓝色，

　　字体大小：28

　　}, {

　　文本：“共享”

　　}, {

　　文本：“评论”

　　}],

　　显示：真实

　　}

　　}

　　}

　　/脚本推荐：《uniapp教程》以上是如何在uniapp项目中介绍和使用uViewUI的详细内容。更多请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。