入门：必要的开发环境

在开始编写代码之前，请确保已安装必要的开发环境和工具。以下是一些必需和可选的工具：

1）Node.js

目前前端工具链基本都依赖于Node.js，因此请先安装它。

下载链接：

安装完成后，打开命令行并输入以下命令来验证安装是否成功：

节点——

// 如果成功，输出将类似于：v10.6.0

npm——

// 如果成功，输出类似：6.1.0

然后我们需要执行以下命令将npm下载源切换为国内淘宝镜像，以提高下载速度和成功率：

npm 设置

关注我的微信公众号【前端基础教程从0开始】，加我微信，免费为你答疑解惑。回复“1”加你进程序员技术讨论群。回复“小程序”可领取300个优秀小程序开源代码+一套入门教程。回复“领资源”可领取300G前端、Java、微信小程序等资源，一起学前端吧。

2）vue-cli

vue-cli 是 vue 专用的项目脚手架工具，使用它可以很方便的创建 vue 项目的骨架代码，其中就包括我们接下来要讲的项目代码。我们在安装完 node.js 之后可以通过其自带的 npm 工具来安装 vue-cli，在命令行中输入以下命令：

npm vue-cli -g

安装完成后输入以下命令验证：

vue

// 如果成功，输出如下：

// ：vue []

//

// ：

//

// -V，--

// -h，--帮助

//

// ：

//

// 从 a 开始初始化一个新的

// 列表列表

// 一个新的

// （仅适用于 v3）

// 帮助 [cmd] [cmd] 帮助

3）微信开发者工具

该工具是开发、调试、模拟微信小程序运行的最核心工具，因此必须安装。

下载链接：

4）代码+

Code（简称）是一款非常流行的轻量级代码编辑器，拥有很多好用的辅助开发插件，在我的文章中都会使用这款编辑器来编辑代码。当然还有很多好用的代码编辑器，比如 Text 等等，也可以达到我们的开发目的，大家可以只用自己喜欢的代码编辑器来编写代码。

下载链接：

安装完成后在其插件管理器中搜索并安装，然后重启系统，插件即可生效：

安装插件

它是一个可以提供Vue语法高亮，语法检查，快捷代码输入的插件，可以为我们的开发过程提供很多的便利。

根据创建你的第一个小程序项目代码

花了一些时间安装必要的开发环境后，让我们创建我们的第一个小程序项目。我们将使用之前安装的 vue-cli：

vue 初始化 /-

命令行会一步步引导我们选择或者填写项目的配置信息，如果你不太明白这些内容的含义，可以全部回车：

？ 姓名

？

？ A

？

？ Vue

? 使用 Vuex？是的

? 用来检查代码？是

? 选择一个

? 小程序测试请关注最新微信开发者工具“测试报告”功能

vue-cli·“”。

要得到 ：

cd firstapp npm install npm run dev

可以

在这个过程中，vue-cli主要是从远程代码仓库下载一份注册名为/-的模板代码，然后根据开发者在命令行提示符中输入的信息，生成一份配置好的代码。

该代码还不能运行，因为缺少依赖库。我们需要执行以下命令来安装依赖库：

光盘

npm

经过几分钟的下载安装，依赖库就安装到了目录下，并且可以看到目录下多了一个目录。

然后执行命令运行此代码并进入开发模式：

npm 运行 dev

运行成功后，项目代码会进入开发模式，一旦修改源码就会触发自动编译。因为小程序是采用 Vue+HTML Web 开发方式开发的，最终还是需要转换成小程序代码才可以在小程序环境中运行，所以这里的自动编译就是将 Web 代码编译成小程序代码。编译后的代码会在 dist 目录下：

运行并查看结果

以上步骤中，我们开启开发模式之后，其实是无法看到小程序的执行效果的，如果想要真正看到小程序的运行界面，还是要借助微信开发者工具。

打开微信开发者工具，选择添加新项目：

项目目录选择指向目录：

点击“确定”按钮，进入小程序开发主界面，你可以在左侧的小程序模拟器中看到小程序的执行结果：

【提醒】记得在微信开发者工具的菜单>设置>编辑设置中勾选“保存时自动编译小程序”，这样代码自动编译完成后，模拟器会自动刷新界面。