前言
入门一个新框架最好是直接上手实战，那么我们就尝试开始做一个社区团购商城吧
准备：掌握Vue基础语法，HbuildX开发工具，uView UI 框架
uView 是专门为uni-app开发的一套ui框架,个人觉得比官方模板，colorui都要好用太多了。
创建项目
首先下载hbuildx工具：hbuildx官网
然后下载uview-cli代码包：下载地址
下载后直接解压，把文件夹拖入到hbuildx中即可
然后点击工具栏->运行->运行到浏览器->Chrome
等待编译完成就可以看到界面了
下面来个日常hello world吧，
// pages/index/index.vue
<template>
<view>
hello, world
</view>
</template>
就是这么简单
页面路由配置全部在pages.json文件中，做过小程序的应该发现这里的配置项几乎一模一样，
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uView-center"
}
},
...
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uView",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}, ...
下面我们来找几个底部导航素材，注意静态图片需要放到static文件目录中
"tabBar": {
"color": "#909399",
"selectedColor": "#ff7410",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/tab/shouye.png",
"selectedIconPath": "static/tab/selected/shouye.png",
"text": "首页"
}, {
"pagePath": "pages/category/category",
"iconPath": "static/tab/quanbu.png",
"selectedIconPath": "static/tab/selected/quanbu.png",
"text": "分类"
}, {
"pagePath": "pages/cart/cart",
"iconPath": "static/tab/gouwuche.png",
"selectedIconPath": "static/tab/selected/gouwuche.png",
"text": "购物车"
}, {
"pagePath": "pages/my/my",
"iconPath": "static/tab/wode.png",
"selectedIconPath": "static/tab/selected/wode.png",
"text": "我的"
}]
}
底部导航就这要ok了，但是这样的导航是固定的，没法动态加载，如果有动态加载需求就得用上自定义的底部导航，并且自己处理路由跳转逻辑，uview框架就自带了这个方案，可以参考-> 底部导航组件
这也是这个ui强大的地方，基本上常用的都帮我们考虑到了。
这个模板暂时还是会用固定导航的方式。
接下来是解决主题颜色的问题，我们一般做项目，ui一般会给我们几个主颜色，这里暂且用橙色作为主色调，那么除了橙色，还有常用的黑白灰，当然，uview已经内置好了，我们可以打开uview-ui文件夹，找到theme.scss，可以看到它定义的一些主题色变量，
$u-main-color: #303133;
$u-content-color: #606266;
$u-tips-color: #909399;
$u-light-color: #c0c4cc;
$u-border-color: #e4e7ed;
$u-bg-color: #f3f4f6;
...
这些我们都可以根据需要进行修改，uview的组件基本上都会有一个type属性，比如 button，我们删掉helloworld，然后输入'<u-' 就会发现列出来一些智能提示，选择button, 这也是uview用起来最舒服的地方，所有组件都直接有提示，简单高效。
<u-button type="primary"></u-button>
输入上面代码，按钮就会显示出来，并且显示的蓝色，
我们把对应的primary主题色全部改掉，换成橙色系
$u-type-primary: #ff7410;
$u-type-primary-light: #ffb285;
$u-type-primary-disabled: #ffb88e;
$u-type-primary-dark: #eb6a0e;
然后页面上的按钮颜色就直接变了，这样一来，我们可以快速的进行换肤操作。
接下来，我们封装一些常用的css，让我们页面写起来更加快速。
我们在根目录创建一个common文件夹，添加main.scss, 并且在App.vue中全局引入，
<style lang="scss">
@import "uview-ui/index.scss";
@import "common/main.scss"; // 照着上面这样的形式
</style>
我们把常用的边框，边距，文字颜色，背景色，阴影，圆角，flex布局等等全部写到样式中去，按语义化命名或者按你自己喜欢, 为了各个项目通用，也可以定义为css，不用uview的主题，用css的变量来定义主题色， 可以参考-> uniapp常用样式表
然后我把变量改成跟uview保持一致
body{
--primary:$u-type-primary;
--secondary: $u-bg-color;
--success: $u-type-success;
--danger: $u-type-error;
--warning: $u-type-warning;
--info: $u-type-info;
--light: $u-light-color;
--dark: $u-main-color;
--muted: $u-content-color;
--white: #fff;
--borderColor:$u-border-color;
--lightmuted:$u-tips-color;
}
我不太喜欢在一个页面的标签中，定义多个classname, 然后在style代码块中写样式，往往我们要上下翻好久，特别是页面复杂一点的时候，太麻烦了，有了这个css表，基本上不需要style了，比如
<view class="d-flex j-sa a-center">
<view class="">
<u-button type="primary"></u-button>
</view>
<view class="">
<u-button type="primary"></u-button>
</view>
</view>
一个flex布局很简单，你也可以自定义更方便的，就跟写行内样式差不多，但是更好维护，也不存在优先级冲突。
好了，前期准备工作就这要差不多结束了，下一篇开始写业务组件。
