uni-app项目搭建，vsCode编辑项目，微信开发者平台实时调试

首先全局配置淘宝镜像，方便以后下载相关依赖

cnpm install npm -g

• 1：打开cmd，调出终端，全局安装脚手架

npm install -g @vue/cli

• 2: 创建项目，my-project为项目名

//dcloudio/uni-preset-vue 表示创建uni-app项目
vue create -p dcloudio/uni-preset-vue my-project

若出现如下问题：

 

• 3: 切换到my-project路径

cd my-project

• 4: 启动项目（微信小程序）

npm run dev:mp-weixin

• 5: 下载安装微信开发者工具
  点击项目->导入项目->选择刚创建的文件

• 6: 然后点击dist文件夹

 

• 7: 选择dev文件夹

 

• 8： 选择mp-weixin文件夹进行导入

   

  

  image.png

• 9：如何用vscCode编辑项目src文件，然后同步到微信开发者工具进行实时调试：
  用vsCode打开my-project文件夹，然后点击终端，新建终端

   

  

  image.png

• 10: 运行项目，出现如下结果则成功进行监听了，vsCode编辑完后记得保存，才可以实时查看结果

 

npm run dev:mp-weixin