搭建步骤 1.安装编辑器

是uni-app官方团队专门定制的一款编辑器。在优化Vue方面投入了大量的精力，支持uni-app官方库API的智能提示和推理。同时我们还可以通过编辑器快速创建各种场景。简而言之，下面的项目模板是使用 uni-app 进行应用程序开发的首选编辑器。您可以访问其官方网站下载并安装它。点击以下链接可直接跳转：

官方下载地址

2. 初始化项目

安装完成后，打开编辑器，点击左上角菜单中的“文件”->“新建”，选择“项目”，然后进入初始化项目设置界面。界面大致如下：

选择项目类型：默认选择uni-app即可。其他类型基本上与制作小程序无关，所以我们不需要关心；填写项目名称：建议用英文命名（当然用中文也不是不可以）；选择项目的路径：建议选择一个自己经常记得清楚的目录，以免日后寻找项目位置的麻烦；选择模板：提供了很多针对不同场景的示例模板，对于新手来说，建议使用默认模板就好，内容较少，我们可以慢慢加减功能； Vue版本选择：已经是2023年了，当然选择Vue3，毕竟Vue3是兼容Vue2的；支持：这是集成云开发。新手不需要打开它；上传代码到托管平台：即项目源码托管在git上。你不需要在这里选择它。如果需要托管，我们可以稍后自行选择。

配置完成后点击确定即可生成工程。可以看到生成的工程目录如下：

在core目录下，只能看到一页，那么如何运行呢？因为我们要开发一个微信小程序，而微信小程序官方提供了开发调试工具，所以如果我们需要让项目运行起来，我们就得安装微信开发者工具。

3.安装并配置微信开发者工具

微信官方提供的小程序开发文档提供了微信开发者工具的下载地址。点击以下链接可直接跳转：

微信开发者工具下载地址

只需选择与您的操作系统相对应的版本并安装即可。

安装完成后，打开软件左上角菜单中的设置，选择安全设置

然后设置服务端口打开。

打开服务端口是为了它可以自动为我们打开微信开发者工具。很多新手会卡在这一步，发现运行项目时没有任何反应。其实是因为这里的服务端口没有开放。

4.启动项目

微信开发者工具配置完成后，我们在左上角的菜单区域选择“运行”->“运行到小程序模拟器”->“微信开发者工具”。或者直接点击下面的运行图标，选择微信开发者工具。点击后，等待一段时间，微信开发者工具会自动打开并加载我们的项目。

注意：第一次运行时，会安装一些依赖文件，所以会提示我们再次运行。这个时候再点击一下就可以了。正常启动后，控制台显示大致如下：

在微信开发者工具中，还可以看到该模板项目的界面外观：

我们可以尝试找到 //.vue 文件并在“ ”中设置数据。编辑完成后保存，然后切换回微信开发者工具。可以看到页面也将进行热更新更改。

{{title}}

配置和修改缩进长度

为了让开发更加方便，我们可以进行一些设置，让开发体验更好。我喜欢2个空格的缩进，默认是4个空格。我们可以在左上方菜单中找到“首选项”->“常用设置”，然后找到制表符长度，将4设置为2。

保存时自动格式化代码

它带有代码风格的格式化功能，默认情况下不启用保存时的自动格式化。我们可以在“首选项”->“编辑器配置”中找到“保存时自动格式化”并勾选。

设置大括号保存时不换行

作者尝试修改Vue3中的代码，如下：

可以看到保存后的缩进配置和自动格式化已经生效，但是在导入ref的那行代码中，大括号自动换行了。这是由于代码格式化插件中默认设置的影响。我们可以修改它来保存而不换行。

我们可以在“首选项”->“插件配置”中找到“打开File.js”，点击打开，然后找到属性，将值改为“”:“,-”

然后保存并返回原页面，缩进大括号并再次保存。可以发现自动格式化不会导致大括号再次换行。

接下来我们就可以舒舒服服的写代码了！

关于作者

计算机专业，8年以上Web开发经验，多年Vue2、Vue3技术栈经验。拥有丰富的全栈开发经验，技能树涵盖了从前端工程到部署上线的整个流程。紧跟技术潮流，我们始终关注各种新兴技术趋势并积极进行实践探索，追求优雅的开发体验、极致的开发效率、高标准的开发质量。可以提供前端简历修改、面试指导、前端新人开发指导、前端学徒招聘、协助完成开发任务等服务。

联系我：（微信）