uniapp + uni-ui + vue3转cli

用HBuilder创建的项目，转成可以在vscode中打包、运行的项目。

本文不涉及ts，如有需要，请自行寻找其他需要适配内容。

1.创建新的 CLI 项目结构

# 创建新的 CLI 项目
vue create -p dcloudio/uni-preset-vue my-cli-project
# 选择默认模板

2.代码迁移

将下方文件及文件夹内容放到新项目的src目录下
- pages/                 → src/pages/
- static/               →  src/static/（若放到public/下，记得修改引入路径）
- App.vue               → src/App.vue
- main.js               → src/main.js
- manifest.json         → src/manifest.json
- pages.json            → src/pages.json
- uni.scss              → src/uni.scss将index.html复制到根目录下，修改index.html中的引入
<script type="module" src="/src/main.js"></script>

3.修改package.json 配置（以下配置是基于h5可用的配置，若有其他小程序或应用位置，请自行修改，其他依赖自行添加）

{"name": "my-cli-project","version": "0.1.0","private": true,"scripts": {"dev:h5": "cross-env NODE_ENV=development uni","build:h5": "cross-env NODE_ENV=production uni build"},"dependencies": {"@dcloudio/uni-app": "3.0.0-4020420240722002","@dcloudio/uni-app-harmony": "3.0.0-4020420240722002","@dcloudio/uni-app-plus": "3.0.0-4020420240722002","@dcloudio/uni-components": "3.0.0-4020420240722002","@dcloudio/uni-h5": "3.0.0-4020420240722002","@dcloudio/uni-mp-alipay": "3.0.0-4020420240722002","@dcloudio/uni-mp-baidu": "3.0.0-4020420240722002","@dcloudio/uni-mp-jd": "3.0.0-4020420240722002","@dcloudio/uni-mp-kuaishou": "3.0.0-4020420240722002","@dcloudio/uni-mp-lark": "3.0.0-4020420240722002","@dcloudio/uni-mp-qq": "3.0.0-4020420240722002","@dcloudio/uni-mp-toutiao": "3.0.0-4020420240722002","@dcloudio/uni-mp-weixin": "3.0.0-4020420240722002","@dcloudio/uni-mp-xhs": "3.0.0-4020420240722002","@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002","@dcloudio/uni-ui": "^1.5.11","vue": "^3.4.21"},"devDependencies": {"@dcloudio/types": "^3.4.8","@dcloudio/uni-automator": "3.0.0-4020420240722002","@dcloudio/uni-cli-shared": "3.0.0-4020420240722002","@dcloudio/uni-stacktracey": "3.0.0-4020420240722002","@dcloudio/vite-plugin-uni": "3.0.0-4020420240722002","@vue/runtime-core": "^3.4.21","sass": "1.77.8","sass-loader": "^8.0.2","vite": "5.2.8","vue-loader": "^16.0.0"}
}

4.新建/修改vite.config.js 配置

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'import { resolve } from 'path'
export default defineConfig({plugins: [uni()],resolve: {alias: {'@': resolve(__dirname, 'src')}}
})

5.修改pages.json

{"pages": [...],"easycom": {"autoscan": true,"custom": {"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"}}
}

6. 安装依赖

7. 运行