uniapp引用uView和vant Weapp组件
前言:现在的公司一般用的是uniapp来开发进行小程序,它对于我这种熟悉vue但是不怎么会原生小程序开发的人很友好。因为uniapp基于vue进行开发只要有点vue基础学上不到一个星期(保守数据)都可以使用,而使用uniapp我们肯定要用上其他的UI库,就比如uView、vant Weapp等,这里我就只介绍这两个库,其他的你们可以自行查找.........
提示:uView是依赖scss的所以需要用到scss这个插件如果是HBuilder X用户就去插件安装一下就好了......
// 安装sass
npm i sass -D// 安装sass-loader
npm i sass-loader -D
1.uView的安装引入和使用(安装分为下载安装和NPM安装)
下载安装:
这是下载地址 点击下载就会得到一个uniapp项目实例找到uni_modules把文件复制到你新项目的根目录(这是我新创建的uniapp项目)示例如下:
(1) 在main.js引入uView主JS库
// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
(2)在uni.scss引入uView的全局SCSS主题文件
/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';
(3)App.vue引入uView基础样式
<style lang="scss">/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */@import "@/uni_modules/uview-ui/index.scss";
</style>
(4)在pages.json配置easycom组件模式
提示:
- 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": [// ......]
}
NPM安装
(1)命令行安装
// 安装
npm install uview-ui@2.0.31
(2)在main.js引入uView主JS库
// main.js
import uView from "uview-ui";
Vue.use(uView);
(3)在引入uView的全局SCSS主题文件
/* uni.scss */
@import 'uview-ui/theme.scss';
(4)App.vue引入uView基础样式
<style lang="scss">/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */@import "uview-ui/index.scss";
</style>
(5)在pages.json配置easycom组件模式
// pages.json
{"easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},// 此为本身已有的内容"pages": [// ......]
}
运行项目然后小程序工具控制台显示如下就表示你成功了!
2.vant Weapp安装引入和使用
(1)下载vant Weapp(命令行安装)
下载或者使用命令行安装都可以进行安装看个人喜欢,下载地址在这里命令行如下:
// 安装
npm i vant-weapp -S --production
(2)在app.vue引入全局的css样式(可能有两种情况,第一种就是你下载的文件名和我的不一样出现的错误记得去更改;第二种就是路径出现了问题需要去调试路径问题)
// vant Weapp
@import "@/wxcomponents/vant/common/index.css";
(3)在pages.json引入组件(引入组件可以分为单独页面引入或者是全局引入)
"usingComponents": {"van-button": "./wxcomponents/vant/button/index" // 引入了button
}
单独页面引入在pages里面找到你需要在的页面上面引入,就像下面这样子:
全局引入就需要在globalStyle里面配置代码如下:
可以了,这就是uniapp引入uview和vant Weapp的全部过程了
后续还会更新更多的代码问题多多关注!!!
uniapp引用uView和vant Weapp组件相关推荐
- 使用vant weapp组件做左拉删除功能
目录 实现效果 声明 实现代码 引用组件 WXML WXSS JS 实现效果 声明 此功能通过vant weapp组件制作,未安装vant weapp无法实现效果,安装vant weapp 实现代码 ...
- 微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
- 在微信小程序里引入Vant Weapp组件库详细步骤
1. 新建一个文件夹. 2. 使用微信开发者工具 选择一个模板(这里以javaScript 基础模板 为例) 选择完模板之后如下: 2. 右键打开终端:按如下步骤执行命令. ① npm init 解释 ...
- 微信小程序之引入使用Vant Weapp组件
Vant Weapp官网地址:https://youzan.github.io/vant-weapp/#/quickstart,自己可以去其官网详细了解. 这里主要总结下微信小程序中如何使用该组件. ...
- 微信小程序使用@vant/weapp组件
打开微信小程序项目终端,如果根目录没有package.json文件,就先执行命令npm init -y 之后安装@vant/weapp组件,执行命令npm i @vant/weapp -S --pro ...
- uni-app项目中引入Vant UI组件库(完美避坑!!!)纯净版
文章目录 第一步,HBuilder X中新建一个uni-app的项目 第二步,HBuilder X提示项目创建成功,在HBuilder X用命令行窗口打开创建的项目(或直接在创建的项目文件夹内用cmd ...
- 微信小程序中使用Vant Weapp组件--以card为例
一.构建环境: Vant Weapp官网文档: https://youzan.github.io/vant-weapp/#/quickstart 1.方法一注意要在微信小程序根目录下安装:用cmd命令 ...
- 小程序接入vant Weapp组件的详细步骤
大家好,我是小佑@小佐:https://blog.csdn.net/Smell_rookie,是一名页面仔工程师,我会不定时在CSDN更新我的博客,有兴趣的可以点个关注来逛逛我的主页. 刚创建的项目的 ...
- 微信小程序中使用Vant Weapp组件库
介绍 Vant 是一个轻量.可靠的移动端组件库,于 2017 年开源. 目前 Vant 官方提供了 Vue 2 版本.Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序 ...
最新文章
- 眼图在通信系统中有什么意义_悟空CRM:施行CRM系统对汽车行业有什么意义
- 【NOIP2015模拟10.27】挑竹签
- 迎开学水题狂欢赛(舞踏会[dp+三叉树],HH去散步[矩阵快速幂],排序[模拟],铁路旅行[线段树])
- 具有多个查询参数的Camel CXF服务
- 在Matlab2006a中如何创建.net组件
- [转] 关于 WCF 中数据压缩的几篇文章
- 为什么shell脚本第一行要#!/bin/sh
- 整合Flume和Kafka完成实时数据采集
- 第三部分 03 使用HTTP GET进行调用
- windows 下 opencv 3.x 的安装及常见问题的解决
- Xcode 12: building for iOS Simulator, but linking in object file built fo... for architecture arm64
- 比继承更有弹性的装饰者模式
- 斯坦福AI百年报告2017:人工智能与机器学习全景式概览
- HTML5期末考核大作业,个人网站—— 程序员个人简历模板下载HTML+CSS+JavaScript
- JS:验证、限制纯数字或者英尺英寸格式的值
- 利用python爬取网易云歌手top50歌曲歌词
- 对不起,精英主义与特斯拉精神背道而驰
- 获取某个时间的当月起止时间
- 使用jupyter notebook运行卷积神经网络出现的版本问题
- seo优化后多久能够看见效果