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預處理器可參考原文操作。