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 [email protected]

（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的全部过程了

后续还会更新更多的代码问题多多关注！！！