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

若出现如下问题:

uni-app项目搭建,vsCode编辑项目,微信开发者平台实时调试_第1张图片

 

  • 3: 切换到my-project路径
cd my-project
  • 4: 启动项目(微信小程序)
npm run dev:mp-weixin
  • 5: 下载安装微信开发者工具
    点击项目->导入项目->选择刚创建的文件
  • 6: 然后点击dist文件夹

uni-app项目搭建,vsCode编辑项目,微信开发者平台实时调试_第2张图片

 

  • 7: 选择dev文件夹

uni-app项目搭建,vsCode编辑项目,微信开发者平台实时调试_第3张图片

 

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

     

    uni-app项目搭建,vsCode编辑项目,微信开发者平台实时调试_第4张图片

    image.png

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

     

    uni-app项目搭建,vsCode编辑项目,微信开发者平台实时调试_第5张图片

    image.png

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

 

npm run dev:mp-weixin

uni-app项目搭建,vsCode编辑项目,微信开发者平台实时调试_第6张图片

 

你可能感兴趣的:(uni-app)