HBuilder X中uniapp使用Vant Weapp、uView UI

1、使用Vant Weapp

安装：
npm init -y
npm i @vant/weapp@1.3.3 -S --production

在项目目录中新建目录wxcomponents，把node_modules中的**@vant里面的dist文件复制到wxcomponents目录**中，把dist名称修改为vant(自定义)

在pages.json中

全局引用：

"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "","navigationBarBackgroundColor": "#C00000","backgroundColor": "#FFFFFF","usingComponents": {"van-card": "/wxcomponents/vant/card/index"}},

局部引用：(主包、分包)

 {"path": "pages/my/my","style": {"enablePullDownRefresh": false,"usingComponents": {"van-card": "/wxcomponents/vant/card/index"}}}

2、使用uView
uView依赖SCSS，您必须要安装此插件，否则无法正常运行。

// 安装node-sass
npm i node-sass -D// 安装sass-loader
npm i sass-loader -D

参考文档有全部步骤：http://v1.uviewui.com/components/intro.html
安装

npm init -y
npm install uview-ui@1.8.4

配置

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

在项目根目录的uni.scss中引入此文件。

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

在APP.vue中:注意要写在第一行

<style lang="scss">/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */@import "uview-ui/index.scss";
</style>

在pages.json中:配置easycom组件模式

{"easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},// 此为本身已有的内容"pages": [// ......]
}

HBuilder X中uniapp使用Vant Weapp、uView UI相关推荐

uni-app配置Vant Weapp
uni-app配置vant-------浏览器运行环境下不兼容 1.创建uni-app项目 2.创建wxcomponents目录 3. 安装vant需要的模块包 3.1找一个空文件cmd 进入执行 3 ...
关于uniapp引入Vant Weapp第三方组件，遇到的问题和解决方式
1.在根目录下创建wxcomponents 2.引入vant weapp 1.我们到https://github.com/youzan/vant-weapp下载最新的压缩包 2. 解压,将里面的dis ...
小程序(uniapp) | 引入Vant Weapp
1.找到项目的文件夹,输入cmd 打开终端 2.进入vant官网:Vant Weapp - 轻量.可靠的小程序 UI 组件库先初始化npm init, 再根据 # 通过 npm 安装 npm i @ ...
通过Hbuilder X创建uni-app项目并引入UView
创建uni-app项目首先通过HBuilder X 创建一个 uni-app项目安装UView 然后进入uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市场,使用HBuilde ...
MPX + Vant Weapp 在微信小程序中实现Picker选择器
目录功能概述实现步骤在MPX项目中引入Vant Weapp Popup与Picker组件结合实现Picker选择器代码效果实现单页面中的多个Picker选择器代码 Picker选择器的多 ...
UI组件库Vant Weapp的下载和使用
Vant Weapp - 轻量.可靠的小程序 UI 组件库为了提高小程序的开发效率,通常考虑使用第三方UI组件来实现界面的视觉统一.开发者可以方便的引用已经事先设计好的自定义组件来快速搭建小程序界面 ...
uniapp引用uView和vant Weapp组件
前言:现在的公司一般用的是uniapp来开发进行小程序,它对于我这种熟悉vue但是不怎么会原生小程序开发的人很友好.因为uniapp基于vue进行开发只要有点vue基础学上不到一个星期(保守数据)都可 ...
在小程序中安装有赞的vant weapp
前提是你先下载并安装好node.js 一.在小程序端设置:在详情中勾选使用npm模块二.在根目录下面打开终端,执行以下代码 npm init -y 三.#通过 npm 安装 npm i @vant ...
微信小程序中使用Vant Weapp组件--以card为例
一.构建环境: Vant Weapp官网文档: https://youzan.github.io/vant-weapp/#/quickstart 1.方法一注意要在微信小程序根目录下安装:用cmd命令 ...

HBuilder X中uniapp使用Vant Weapp、uView UI

HBuilder X中uniapp使用Vant Weapp、uView UI相关推荐

最新文章

热门文章