vscode中用vue开发小程序插件

开发小程序用的IDE比较单一，像微信开发者工具或者IDEA的小程序插件，但是如果你熟悉VS Code，想用VS Code作为小程序开发工具，我们可以通过安装插件来达到我们的目的。

首先理解一下小程序的文件结构：根目录下有一个app.js、app.json、app.wxss和一个pages文件夹。pages下面的文件夹就是小程序的几个页面，简单了解一下这个结构后，我们就可以着手进行插件的安装和配置。

首先我们需要安装两个插件：Minapp和Minapp VS Code插件。

Minapp：提供一些小程序的基本命令和工具支持，比如启动工作区、打开小程序地址等等。

Minapp VS Code插件：帮助我们按照小程序的结构创建Vue文件或模板，提供基于Vue的开发方式

配置完这两个插件后，我们就可以开始写小程序了。

Vue文件的编写

在VS Code中打开项目，首先我们需要一个新的页面。选择小程序的pages文件夹，右键，选择New Folder，输入文件夹的名字后，右键再次选择New File，输入.vue文件的名字，则新的页面就创建好了。

例如，我们创建了一个叫做“my-page”的页面，则VS Code就会自动生成一个my-page.js、my-page.json、my-page.wxss，而.vue文件则需要我们手动编写。

在.vue文件中，我们可以使用template2minapp模板引擎编写我们的小程序页面，例如下面的代码示例：

```html

```

Vue文件引入

新建好的.vue文件需要在app.vue(或者其他页面)中引入，如下：

```html

```

设置小程序导航栏

在my-page.json文件中，添加以下代码：

```json

{

"navigationBarTitleText": "我的页面"

}

```

其中navigationBarTitleText就是小程序中标题的内容，可以修改为自己需要的。

实际显示效果：


至此，用Vue编写小程序开发流程就完成了。如果你是Vue高手，非常熟悉Vue的编码方式，这种方式对你会更适合。