uni-app - 创建项目

【HBuilderX官方下载地址】

【微信开发者工具官方下载地址】

根据自己的实际情况进行下载对应的版本就OK

HBuilderX 创建项目

创建项目

1.第一步：打开HBuilderX
新建 => 项目

2.如图所示（可根据自身需要进行调整）
第四步：选择项目类型
第五步：项目名称
第六步：选择文件存放路径
第七步：选择模版
第八步：创建项目

创建完成！～

---

---

运行项目

运行在浏览器：

运行 => 运行到浏览器 => 浏览器选择

目录结构：

运行效果图：

运行在微信小程序：

1.需要安装 微信开发者工具,官方下载地址在文章开头就有。

2.需要配置小程序ID
2.1 打开 mp.weixin.qq.com
2.2 开发 => 开发管理 => 开发设置 => 开发者ID => 复制 AppID(小程序ID)

2.3 项目配置小程序ID
manifest.json => 微信小程序配置 => 微信小程序AppID

运行 => 运行到小程序模拟端=> 微信开发者工具

效果图：

启动微信开发者工具可能有如下报错：

IDE service port disabled. To use CLI Call, open IDE -> Settings -> Security Settings, and set Service Port On. For more details see: https://developers.weixin.qq.com/miniprogram/en/dev/devtools/cli.html 工具的服务端口已关闭。要使用命令行调用工具，请打开工具 -> 设置 -> 安全设置，将服务端口开启。 详细信息: https://developers.weixin.qq.com/miniprogram/dev/devtools/cli.html 微信开发者工具打开项目失败，请参阅启动日志！ 注：请将微信开发者工具升级到最新版本！

解决办法：
打开微信开发者工具 => 设置 => 安全设置 => 服务端端口开启

脚手架创建项目

1. 安装脚手架
   npm install -g @vue/cli
2. 输入创建指令
   vue create -p dcloudio/uni-preset-vue my-project
   模版选择（推荐选择默认模版）：
   
3. 切换目录，启动项目( 微信小程序)
   cd my-project
   npm run dev:mp-weixin
4. 微笑小程序开发者工具导入项目
   注意: 导入的不是根项目，而是打包后dist文件里的指定的项目
   
   
   运行成功：
   

---

---

---

小建议

vscode开发uni-app项目的时候，有几个小建议：

1.安装组件语法提示
yarn add @dcloudio/uni-helper-json
2.导入 HBuilderX 自带的代码块
【github】

3.vscode 插件 uniapp-snippet