uniapp使用uview搭建小程序脚手架
接下来将介绍uview如何配置到uniapp项目中
如果你想了解到更详细的文档，进入uview官网查看：http://uviewui.com/components/install.html
首先要去官网下载最新的包 下载地址 http://uviewui.com/components/install.html
官网提供了三种包
第一种方式只有uview源码，这是uview的核心。
第二种方式类似于一个uview项目的脚手架，这是个空项目，但它已经帮我们配置好uview了，所以如果你是一个新的uniapp项目，可以选择下载这个。
方式三是整个uView演示项目，里面有uView核心，组件演示，模板等。此项目运行用于查看UI演示效果，复制模板案例，通过里面的示例，可以快速掌握某一个组件的用法。（可以下载一个，体验uview项目的所有组件与模版）
因为我们是教大家怎么配置一个uview，所以我们下载第一个包。
接下来我们使用HBuilderX创建一个uniapp的项目
创建完成之后，我们将刚刚下载的包(几百k 的那个)，直接复制到项目的根目录下。
因为uview的使用的是scss，所以我们需要使用HBuilderX安装scss的插件。
点击工具，插件安装，找到 scss/sass编译 点击右方的安装
再点击下图红框内的
我的已经安装过，显示下面这个
对HBuilderX的配置就结束了，接下来要对项目进行设置。（分为4步）
一、引入uView主JS库
在项目根目录中的main.js中，引入并使用uView的JS库， 注意这两行要放在import Vue之后。
// main.js
import uView from "uview-ui";
Vue.use(uView);
二、在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。
/* uni.scss */
@import 'uview-ui/theme.scss';
三、引入uView基础样式
在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
四、配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。
uni-app为了调试性能的原因，修改easycom规则不会实时生效，
配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
// pages.json
{
"easycom": {
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}
到此处，我们已经将uview配置好了，接下来写个示例验证一下
我新建了三个组件，正常下面会自动生成对应的路径，如果没有就手动添加。注意，如果新建后又删除或多建了一层文件夹之类的又删掉的话，注意修改下路径。按下 alt 键把鼠标悬浮在路径上面，路径显示深色即路径正确。
在static文件夹下添加图片，作为程序底部导航栏按钮，
在同级下添加 tabBar
"tabBar":{
"color":"#808080",
"selectedColor":"#007AFF",
"borderStyle":"black",
"backgroundColor":"#F8F8F8",
"list":[
{
"pagePath":"pages/index/index",
"iconPath":"static/component.png",
"selectedIconPath":"static/componentHL.png",
"text":"首页"
},{
"pagePath":"pages/home/home",
"iconPath":"static/extui.png",
"selectedIconPath":"static/extuiHL.png",
"text":"我的"
},{
"pagePath":"pages/showpets/showpets",
"iconPath":"static/extui.png",
"selectedIconPath":"static/extuiHL.png",
"text":"展示宠物"
}
// ,{
// "pagePath":"pages/appointment/appointment",
// "iconPath":"static/extui.png",
// "selectedIconPath":"static/extuiHL.png",
// "text":"萌宠约会"
// }
]
},
在运行前先把hbuilder和小程序开发者工具关联起来，忘了，后期百度吧。
成功如图：
把之前下载的demo用hbuilder打开
打开任何一个组件，在里面随意点击下，
点击 运行 … Chrome
稍等会，就自动在浏览器打开了。
按F12
看看喜欢的组件，然后根据名字在hbuilder的demo中找到。我找了表单form的demo，然后点击打开，把里面内容全都拷贝到我的项目里。
点击保存，到小程序开发者工具里即可查看效果。
备注：uniapp小程序没有alert(),直接使用uni.showToast({})和uni.showModal({})
uni.showToast({
title: '成功跳转...',
duration: 2000
});
// uni.showModal({
// title: '提示',
// content: '这是一个模态弹窗',
// success: function(res) {
// if (res.confirm) {
// console.log('用户点击确定');
// } else if (res.cancel) {
// console.log('用户点击取消');
// }
// }
// });
如果想跳转到一个 非 底部导航页面，使用
uni.navigateTo({
url: '/pages/appointment/appointment?id=1&name=uniapp'
});
非 底部导航页面不能在 pages.json 的tabBar 里注册
注意pages前面有一个斜杠，后面可以传参数，在即将要跳转到的页面接收即可，
如果想跳转到一个 是 底部导航页面，使用uni.switchTab
uni.switchTab({
url: '/pages/showpets/showpets?id=1&name=uniapp'
});
这个不能传参，如果想传参，参考这篇https://blog.csdn.net/ly2983068126/article/details/79931409