前言

   uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

安装 HBuilder X 开发工具

        用 HBuilder X 开发工具来开发 uni-app 类型的项目比较方便

HBuilder X 官网 https://dcloud.io/hbuilderx.html 
 

安装 scss/sass 编译插件

插件市场https://ext.dcloud.net.cn/?cat1=1&cat2=11

在插件市场搜索 scss/sass 编译插件

点击插件，选择下载插件并导入 HBuilder X

新建 uni-app 项目

        点击左上角的文件，点击新建，选择新建项目

        选择模板和 vue 版本

uni-app 项目的目录结构

把项目运行在微信开发者工具

1.填写自己微信小程序的 AppID

• 点击 manifest.json 文件
• 选择微信小程序配置
• 输入微信小程序的 AppID

2.在 HBuilder X 配置“微信开发者工具的安装路径”

• 在 HBuilder X 工具上方选择工具，选择设置
• 选择运行配置
• 找到微信开发者工具路径的输入框，输入路径

3.打开微信开发者工具的服务端口

        点击设置 -> 安全设置 -> 将服务端口打开

4.配置项目运行到微信开发者工具

        选择运行 -> 运行到小程序模拟器 -> 微信开发者工具

        点击运行后就会自动启动“微信小程序开发者工具”运行 uni-app 项目