uniapp vue2项目迁移vue3项目

Posted 2023-04-19

参考技术A uniapp vue2项目迁移vue3项目，必须适配的部分

v-model 的适配

Vue3 的 v-model 相对 Vue2 来说 ，有了较大的改变。可以使用多 model ,相应语法也有变化。 更多

事件返回

将之前的 this. emit('update:modelValue') ，vue3 中将省略这一步骤

自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件：

若需要更改 model 名称，作为组件内 model 选项的替代，现在我们可以将一个 argument 传递给 v-model：

插槽的适配

Vue3 将不支持 slot="xxx" 的用法 ，请使用 v-slot:xxx 用法。 更多

vue-cli搭建uniapp项目过程及踩坑记录

首先来到uniapp官网，找到以下页面

然后就可以跟着步骤创建项目了… …下面我说下我的创建方式

第一步：全局安装vue-cli

npm install -g @vue/cli@4

第二步：创建正式版uni-app

vue create -p dcloudio/uni-preset-vue 你的项目名

第三步：选择默认模板

这个时候项目就已经创建完成了，接下来是项目首次启动过程
（ps：启动过程其实可以参考项目中的README.md文档）

第四步：初始化依赖

npm install

第五步：启动项目

npm run serve

咳咳，正常来说上面这些步骤都没什么问题。但由于我最近换了笔记本，新建项目时就遇到了很多问题。为了防止以后再一次踩坑，所以有必要记录一下。
首先是第一步vue-cli安装成功后文件不一定存放在nodejs目录下面，而是c盘用户文件下面（如：C:\\Users\\xxx\\AppData\\Roaming\\npm）
这个时候你在控制台输入

vue -V

发现居然报错，解决办法就是将vue-cli所在文件路径添加到环境变量Path当中：

添加之后就可以在控制台正常通过vue-cli脚手架去搭建项目了。

然而，搭建成功之后，在第四步项目依赖初始化这步又遇到了npm install下载缓慢的问题，解决办法是配置npm代理，方法如下：

// 配置nmp代理来提高速度，如设置淘宝镜像
npm config set registry https://registry.npm.taobao.org

// 查看配置是否成功
npm config get registry

// 成功后重新npm install安装
npm install

等待一会，项目依赖就初始化完成了，最后就可以启动项目啦！

下面这个就是启动之后的页面啦。