title: Hbuilder项目转vue-cli项目date: 2023-02-22 10:26:33category:  - 工作  - 技能提升cover: https://s1.ax1x.com/2022/11/23/z8L8PS.jpgtags:  - uniappdescription: Hbuilder项目转vue-cli项目步骤记录

Hbuilder 项目转 vue-cli 项目步骤记录全局安装vue-cli

npm install -g @vue/cli

创建一个空的uni-app工程

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

创建工程后选择默认模板

安装nvm

可以参考菜鸟教程的步骤,[点击跳转](使用 nvm 管理不同版本的 node 与 npm | 菜鸟教程 (runoob.com))

安装14版本的node并切换

nvm install 14.1nvm use 14.1.0

安装sass

注意在新建的模板目录中运行安装

npm install node-sass@4.14.1 --savenpm install sass-loader@8.0.0 --save

替换文件

  1. 删除新建工程目录中的src里所有内容

  2. 把Hbuilder新建的项目所有文件复制到src中,node_modules也需要

正常使用

npm run serve

其他

此文参考[凌晨肆点的洛杉矶](Uni-app工程转vue-cli工程步骤 – 凌晨肆点的洛杉矶 – 博客园 (cnblogs.com)) 的文章结合本人实际操作而来,感谢大佬的付出。其余步骤如修改css预处理器可参考原文操作。