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"
	    }
    }
}

安装依赖
运行