1.uniapp开发准备

创建一个uniapp项目

下载 HBuilderX ，安装 sass 插件
新建项目，选择 uniapp。

├─pages             // 页面存放文件夹，等同于 微信小程序中的 pages
│  └─index          // 默认生成的页面
├─static            // 静态资源存放文件夹
└─uni_modules       // uni-app组件目录
│  └─uni-xxx        // uni-app 所提供的业务组件，等同于 微信小程序中的组件
├─App.vue           // 应用配置文件，用来配置全局样式、生命周期函数等，等同于 微信小程序中的app.js
└─main.js           // 项目入口文件
├─mainfest.json      // 配置应用名称、appid、logo、版本等打包信息，
└─pages.json        // 配置页面路径、窗口样式、tabBar 等页面类信息，等同于 微信小程序中的app.json
└─uni.scss          // uni-app内置的常用样式变量

使用微信开发者工具 运行项目

1. 在 HBuilderX 菜单选项中，选中"运行"，选中"运行到小程序模拟器" ，点击"运行设置"，设置 微信小程序开发工具 的路径（将应用程序中的APP图标拖到终端，即可获得路径）。

   
   

2. 微信开发者工具 "详情"->"本地设置" ✅不校验合法域名

3. 微信开发者工具 菜单栏 "设置"->"安全设置" ✅服务端口

使用 VSCode 编写代码

直接下载VSCode，然后打开项目文件，编辑后 Command + S保存，即可在微信开发者工具的模拟器上看到运行效果。

安装扩展：

1. uni-helper - 让开发者在 VSCode 中开发 uni-* 的体验尽可能好。
2. uni-app-snippets - 支持 uni-app 基本能力的代码片段，包括组件和 API
3. uni-app-schemas - 支持 uni-app pages.json 和 manifest.json 简单的格式校验
4. uni-ui-snippets - 支持 uni-ui 组件代码片段