前言:现在的公司一般用的是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的全部过程了
后续还会更新更多的代码问题多多关注!!!