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

冷不防 2022-11-28 15:28 78阅读 0赞

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

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

若出现如下问题：

![format_png][]

*  3: 切换到my-project路径

cd my-project

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

npm run dev:mp-weixin

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

*  6: 然后点击dist文件夹

![format_png 1][]

*  7: 选择dev文件夹

![format_png 2][]

*  8： 选择mp-weixin文件夹进行导入
    
     
    
    ![format_png 3][]
    
    image.png
 *  9：如何用vscCode编辑项目src文件，然后同步到微信开发者工具进行实时调试：  
    用vsCode打开my-project文件夹，然后点击终端，新建终端
    
     
    
    ![format_png 4][]
    
    image.png
 *  10: 运行项目，出现如下结果则成功进行监听了，vsCode编辑完后记得保存，才可以实时查看结果

npm run dev:mp-weixin

![format_png 5][]

[format_png]: /images/20221124/1f2d7262dec84748be8bcfcf47e273be.png
[format_png 1]: /images/20221124/90b2fa0dcc3a441c96597793fccf8bcf.png
[format_png 2]: /images/20221124/625ce621bfbf4775ad56e7bbcbea20b8.png
[format_png 3]: /images/20221124/e0ddcf7d2cc045a39930f75c70f6c970.png
[format_png 4]: /images/20221124/e418f41191cb4bad84245a69ddaff5b2.png
[format_png 5]: /images/20221124/0d738480791b491dafeea9f5d15709a7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，78人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp项目实践第二章：使用vscode开发uniapp项目

使用vscode开发uniapp项目简介：本文讲解如何使用vscode开发uniapp项目。首先使用vscode打开项目 ![在这里插入图片描述][122bd0

﹏ヽ暗。殇╰゛Y/ 2024年03月23日 23:41/ 0 赞/ 166 阅读

相关 vsCode搭建vue项目

在我们安装好vue脚手架（vue-cli）之后，接下来我们将使用vsCode来搭建vue项目运行以下命令来创建一个新项目： vue create hello-wo

拼搏现实的明天。/ 2023年10月02日 19:24/ 0 赞/ 42 阅读

相关 uni-app项目搭建，vsCode编辑项目，微信开发者平台实时调试以及各平台调试命令

启动各个端的命令 //启动项目（微信小程序） npm run dev:mp-weixin //启动项目（h5） npm run

忘是亡心i/ 2023年03月13日 05:22/ 0 赞/ 169 阅读

相关 VScode搭建vue项目

1. 首先新建终端，打开到创建的文件夹 2. 输入 vue create 你的项目名称 3. 选择第三个选项，回车 ![在这里插入图

Dear 丶/ 2023年01月21日 05:25/ 0 赞/ 270 阅读

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

首先全局配置淘宝镜像，方便以后下载相关依赖 cnpm install npm -g 1：打开cmd，调出终端，全局安装脚手架 npm install

冷不防/ 2022年11月28日 15:28/ 0 赞/ 79 阅读

相关 rust 开发调试环境搭建vscode

linux rust install https://www.rust-lang.org/tools/install vscode install http

我不是女神ヾ/ 2022年10月28日 04:57/ 0 赞/ 252 阅读

相关 VSCode搭建vue项目

安装环境： 1.默认Vscode、nodejs已经安装好了 2.全局安装vue-cli，vue-cli帮助我们快速构建Vue项目。 npm install -

我就是我/ 2022年08月31日 01:51/ 0 赞/ 256 阅读

相关微信web开发者工具调试

前几天写了一篇使用fiddler调试微信端页面的，然后博友评论说使用fiddler太麻烦了，推荐使用微信web开发者工具调试微信页面，这两天弄着玩了一下，很强大。这篇文章只是做

短命女/ 2022年06月12日 11:36/ 0 赞/ 358 阅读

相关 VsCode搭建Java开发环境（Spring Boot项目创建、运行、调试）

[VsCode搭建Java开发环境（Spring Boot项目创建、运行、调试）][VsCode_Java_Spring Boot] 安装如下两个主要扩展即可，这两个扩展

雨点打透心脏的1/2处/ 2021年10月08日 05:16/ 0 赞/ 481 阅读

相关 VSCode搭建Vue项目

个人资源与分享网站：[http://xiaocaoshare.com/][http_xiaocaoshare.com] 1.假设Vscode、nodejs等已经安装好了。

系统管理员/ 2021年09月24日 04:06/ 0 赞/ 423 阅读