一 下载安装 hbuilderx

• uni-app官方文档地址：https://uniapp.dcloud.io/

特别说明：在uni-app项目中body的元素选择器请改为page，同样，div和ul和li等改为view、span和font改为text、a改为navigator、img改为image

• 下载最新版本hbuilderx，根据 操作系统选择对应的开发版（200多M）

https://www.dcloud.io/hbuilderx.html

下载下来解压安装即可；

• 注册 账号

打开 hbuilderx ，然后在左下角有个登陆图标，进行账号注册；注册完还要进行邮箱验证，登陆

https://dev.dcloud.net.cn/ 进行验证；

验证地方为导航栏下面的淡黄色行，点击蓝色字体进行邮箱验证；

二 创建 uni-app项目

2.1 创建 uni-app项目

如图所示新建项目；

填入项目名称后创建uni-app项目

创建完成目录结构如下

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

2.2手动安装uni-ui组件

如果 选择 默认 安装 后面需要安装 uni-ui组件按如下方式；

如果是使用 HBuiderX 创建的项目，需先执行以下命令初始化：

npm init -y

安装 uni-ui

npm i @dcloudio/uni-ui --save

npm i sass -D

npm i sass-loader -D

在 script 中引用组件：

例如我们需要导入 uni-badge 组件

import {uniBadge} from '@dcloudio/uni-ui'
export default {
    components: {uniBadge}
}

方式3（vue-cli + easycom）

使用 方式2 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom

打开项目根目录下的 pages.json 并添加 easycom 节点：

// pages.json

{
    "easycom": {
        "autoscan": true,
        "custom": {
            // uni-ui 规则如下配置
            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
    },

    // 其他内容
    pages:[
        // ...
    ]
}

2.3 手动安装 iview

如果不想用uni-app自带的组件要使用 iview 按如下方式安装。

首先也需要安装scss，然后 npm安装依赖；

npm install uview-ui

1. main.js引入uView库

   // main.js
   import uView from 'uview-ui';
   Vue.use(uView);

2. App.vue引入基础样式(注意style标签需声明scss属性支持)

   /* App.vue */
   <style lang="scss">
   @import "uview-ui/index.scss";
   </style>

3. uni.scss引入全局scss变量文件

   /* uni.scss */
   @import "uview-ui/theme.scss";

4. pages.json配置easycom规则(按需引入)

// pages.json
{
    "easycom": {
        // 下载安装的方式需要前面的"@/"，npm安装的方式无需"@/"
        // 下载安装方式
        "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
        // npm安装方式
        // "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}

2.4 安装插件

除了如上方式安装插件，也可以通过插件市场进行安装；

地址 ：https://ext.dcloud.net.cn/

如图右侧，也可以通过hbuilderx 进行安装或者下载zip安装；拉动文档到下面也有手动安装方式；

2.5 图标支持

uni-app 也提供原生的一些图标但不多：https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons

三 调试运行

3.1 运行在微信小程序

下载安装微信开发者工具，然后登陆公众平台进行账号注册，登陆pc端在设置中开启安全端口；

在 hbuilderx 中配置 微信小程序的 APPID

菜单栏中选择运行到微信开发者工具

如果hbuilderx 没有配置微信开发者安装路径根据提示配置即可

效果如下

3.2 运行在浏览器

同理也可以运行到 谷歌浏览器；