title: Hbuilder项目转vue-cli项目
date: 2023-02-22 10:26:33
category:
  - 工作
  - 技能提升
cover: https://www.yuucn.com/wp-content/uploads/2023/02/1677184306-68f663351001bd8.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 node-sass@4.14.1 --save
npm install sass-loader@8.0.0 --save

替换文件

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

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

正常使用

npm run serve

其他

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