HbuilderX的uniapp项目迁移到cli项目（支持VS Code等编辑器/IDE）

HbuilderX的uniapp项目迁移到cli项目（支持VS Code等编辑器/IDE）
HBuilderX 工程转换为 vue-cli 工程
vue-cli 版更新频率较高，当需要使用一些新特性时可以转换为 vue-cli 工程

步骤
1.使用 vue-cli 模式，新建一个 uni-app 项目。
先用 vue-cli （vue cli 3.0及以上版本） 新建一个“Hello uni-app” 项目

1. vue create -p dcloudio/uni-preset-vue my-project

复制代码

选择 Hello uni-app，生成后项目目录结构如下：

生成后删除src/下的文件

2.复制原先项目的文件到src/下
将 HBuilderX 项目根目录内的文件，除 unpackage、node_modules 目录之外，所有内容拷贝至 vue-cli 项目内 src 目录。

3.修改新项目的依赖
该项目用到了一些新的 devDependencies，提供两种方式

修改 package.json （uni-app需要的依赖附在文末）
npm install * -D 或者 yarn add * -dev
根据个人喜好或者项目需求选用 yarn 或者 npm
若目录下存在 node_modules/ 、yarn.lock、package-lock.json 则先删除他们

将 src 目录下package.json 下的dependencies 和devDependencies拷贝到 根目录下的 package.json文件对应 位置。并删除 src目录下的package.json。

4.安装
在 vue-cli 工程内重新安装 npm 依赖  npm install

因为Hbuilder自带了 css scss编译器，在cli项目下需要下在单独的 node-sass和sass-loader; 需要注意node-sass和sass-loader版本如果版本太高会编译报错。需要使用合理的node-sass和sass-loader版本组合；

5.最终目录结构
项目主文件在 src/ 下

1. .
   
2. ├── babel.config.js
   
3. ├── node_modules
   
4. ├── package-lock.json
   
5. ├── package.json
   
6. ├── postcss.config.js
   
7. ├── public
   
8. ├── src
   
9. ├── tsconfig.json
   
10. └── yarn.lock

复制代码