如何使用touchwx？

环境安装

Touch WX支持在Windows上开发或者在Mac开发。

在使用Touch WX前，我们需要安装node以及开发工具。

微信开发者工具安装

下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

node安装

我们推荐使用node 6.10.0，node下载地址：

1. https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0-x64.msi Windows64位下载
2. https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0-x86.msi Windows32位下载
3. https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0.pkg macOS系统下载安装成功后，windows电脑可以通过cmd，macOS可以通过终端 输入 node -v 来验证是否安装成功。安装成功会弹出如图所示：

开发工具下载

进入官网进行下载。Visual Studio Code下载地址：https://code.visualstudio.com

Touch WX构成

Touch WX插件，提供右键菜单，通过可视化的方式来执行命令

touchui-wx-cli 脚手架环境 ，需要手动全局安装

touchui-wx-components组件库， 在使用插件创建工程时会自动安装项目依赖，其中包含了这部分。

安装插件

1、下载安装完成后，打开Visual Studio Code。我们需要安装一些插件来帮助我们更好地进行开发。

Touch WX框架提供的插件：Touch WX，提供启动／停止开发服务、编译、转换等功能。

接下来，我们来学习如果在Visual Studio Code中如何安装插件。

首先我们需要点击扩展，如下图所示的红框位置。

在这里可以搜索我们想要安装的插件，找到Touch WX ，然后点击安装。

2、安装完成后，会显示重新加载。我们点击重新加载，这个插件就可以使用了。

3、除了Touch WX之外，还需要安装Vue相关的插件。比如Vetur E。Vetur E是我们基于vue语法插件Vetur进行了扩展，具有微信小程序API语法提示功能。

插件安装的方法，和之前安装Touch WX的方法一致。

因为Touch WX是基于Vue来做的。在我们的框架中，使用.wx和.wxa为后缀，安装Vue相关的插件后，我们会自动将.wx和.wxa文件以Vue语言识别。

4、由于连接的是微软服务器下载插件，国内网络有可能会出现无法正常下载的情况。如果长时间无法下载插件可以尝试使用手机热点连接wifi下载。

全局安装touchui-wx-cli

windows电脑可以通过cmd，macOS可以通过终端。或者直接启动Visual Studio Code在终端栏目里输入以下：

npm install -g touchui-wx-cli

如果没有终端栏目，可通过以下方式打开。

查看是否安装成功

tui -v

如果windows系统无法成功安装touchui-wx-cli，可能需要以管理员身份启动命令行工具（如果是win10也可以直接打开PowerShell）

全局更新touchui-wx-cli

当开发过程中，如果插件提示需要更新touchui-wx-cli。

或者在更新说明的文档中，有较高版本。

则需要使用以下命令进行更新。

全局更新。【如果该命令未成功更新到想要的版本，可以通过下面的命令。】

npm update touchui-wx-cli -g

全局安装指定版本。例如安装1.0.89

npm install touchui-wx-cli@1.0.89 -g

安装成功后可通过以下命令查看版本

tui -v

更新touchui-wx-components

当开发过程中，如果插件提示需要更新touchui-wx-components。或者在更新说明的文档中，有较高版本，则需要使用以下命令进行更新。

更新。【如果该命令未成功更新到想要的版本，可以通过下面的命令。】

npm update touchui-wx-components

安装指定版本。例如安装1.0.89

npm install touchui-wx-components@1.0.89

安装成功后可以通过以下命令查看版本

npm list touchui-wx-components