title: Hbuilder项目转vue-cli项目 date: 2023-02-22 10:26:33 category:   - 工作   - 技能提升 cover: https://s1.ax1x.com/2022/11/23/z8L8PS.jpg tags:   - uniapp description: 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.1  nvm use 14.1.0 

安装sass

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

npm install [email protected] --save  npm install [email protected] --save 

替换文件

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

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

正常使用

npm run serve 

其他

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