第一步
- 创建好uniapp项目,如果根目录没有package.json,使用：
npm init -y
第二步 下载Uview ui组件库
<!-- 下载 -->
npm install uview-ui@2.0.31
<!-- 更新 -->
npm update uview-ui
第三步
如果是 HBuilder X 创建项目 是内置sass的，所以不用下载 ，这一步跳过
// 安装sass
npm i sass -D
// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D
第四步
- 在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在 import Vue 之后。
// main.js
import uView from "uview-ui";
Vue.use(uView);
第五步
/* uni.scss */
@import 'uview-ui/theme.scss';
第六步 引入uView基础样式
- 在App.vue中的 style标签 首行的位置引入，注意给style标签加入lang="scss"属性
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
第七步 配置easycom组件模式
- 此配置需要在项目根目录的pages.json中进行
// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
第八步 从新打开 HBuilder X 使用以下代码测试是否成功
<template>
<u-swiper
:list="list3"
indicator
indicatorMode="line"
circular
></u-swiper>
</template>
<script>
export default {
data() {
return {
list3: [
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
],
}
}
}
</script>
