HbuilderX 现有uniapp项目迁移到vscode中(HbuilderX工程改vuecli工程)

HbuilderX 现有uniapp项目迁移到vscode中

前言
解决方法
- - 1、安装cli 脚手架
  - 2、创建vue-cli uniapp项目
  - 3、迁移文件
  - 4、安装依赖
  - 5、测试运行项目
  - 6、优化
  - 7、安装uniaap相关扩展插件

前言

我想对苍穹外卖的前端小程序源码进行二次开发，发现他们提供的源码是编译后的，随后找到了开发版本，用的是uniapp。在HbuilderX中运行正常，准备迁移到vscode开发时运行命令：npm run dev:%PLATFORM%出现：“uni‘ 不是内部或外部命令，也不是可运行的程序”的报错。排查缺少package.json文件，以下是解决方法

解决方法

本方法主要参考uniapp 官方教程，将HbuilderX工程改为vue-cli工程

1、安装cli 脚手架

npm install -g @vue/cli

2、创建vue-cli uniapp项目

vue create -p dcloudio/uni-preset-vue 项目名

上面的命令可能会报错，需要将项目下载到本地，下面是项目地址
https://github.com/dcloudio/uni-preset-vue
下载后把dcloudio/uni-preset-vue 替换为下载的路径

‪vue create -p 路径 项目名

选择模板，选择默认模板
在这里插入图片描述

3、迁移文件

将生成的vuecli项目中的src目录文件(uni.promisify.adaptor.js除外)删除，再将HbuilderX 项目的文件（ node_modules、unpackage目录除外）复制到src路径中
在这里插入图片描述
对比修改两个项目的package.json文件，将HbuilderX项目的配置复制到vuecli项目中。

4、安装依赖

因为HBuilderX 工程自带插件帮我们安装了less-loader或者sass-loader，所以迁移到vue-cli工程项目的时候，我们需要再安装一次。在package.json文件中的devDependencies属性下加入，例：

"devDependencies": {
        ...
        "sass": "^1.42.1",
        "sass-loader": "10.1.1"
        ...
    }

运行命令

npm install

目前项目结构如下：
在这里插入图片描述

5、测试运行项目

输入命令：

npm run dev:mp-weixin

在这里插入图片描述
这里显示成功了
使用vscode 需要手动导入小程序项目，打开，微信开发者工具, 导入编译后的路径 dist\dev\mp-weixin 运行。

6、优化

运行编译命令可以使用npm脚本一键运行
在这里插入图片描述
若侧边栏没有npm请打开设置搜索npm，把自动检测npm脚本打开即可

然后我们可以把，常用的命令放在脚本靠前的位置，这样不用往下翻了

7、安装uniaap相关扩展插件

uni-helper
uniapp小程序扩展
uni-create-view

如果解决了，不妨点个赞吧！

标签