HBuilderX 工程项目转换为 vue-cli 工程项目

步骤 1、安装 vue-cli

npm install -g @vue/cli

步骤 2、新建通过 vue-cli 搭建的项目

vue create -p dcloudio/uni-preset-vue vue-cli-project

选择默认版本

步骤 3、新建存放旧项目的文件夹

mkdir newProject

步骤 4、项目迁移

第一步

在newProject文件夹的根目录下新建src文件夹，将 HBuilderX 创建的工程项目里面所有的文件 copy 进src文件夹。

第二步

将vue-cli-project项目这些文件 copy 进newProject文件夹的根目录下。

第三步

修改newProject文件夹根目录下的 package.json 文件，将src文件夹下的package.json文件的相关配置 copy 到根目录下的package.json文件。然后删除src文件夹下的package.json文件与package-lock.json文件。

第四步

安装相关依赖，注意：
需安装less-loader与sass-loader，因为 HBuilderX 工程自带插件帮我们安装了less-loader或者sass-loader，所以迁移到 vue-cli 工程项目的时候，我们要安装一次。

例如我用的是sass
package.json
{
...
    "devDependencies": {
        ...
        "sass": "^1.42.1",
        "sass-loader": "10.1.1"
        ...
    }
...
}

yarn 

步骤 5、运行与发布项目（小程序举例）

具体项目类型可以根据 官方文档 进行运行与发布, 或者查看 package.json 的script字段。

例如我的是小程序
npm run dev:mp-weixin

完成之后终端会输出，编译后的文件放在哪里

打开微信开发者工具，引入这个编译后的文件位置