使用uni-app开发微信小程序，若从vue2迁移到vue3，有几个地方需要修改

使用uni-app开发微信小程序，若从vue2迁移到vue3，有几个地方需要修改。

• 事先声明：以下仅代表我个人观点，所有问题均来自本人亲身经历。
• 开发工具：HBuilder X 3.3.10.20220124

1、创建应用的方式要改。main.js内容如下所示：

import store from '@/store'  
import { createSSRApp } from 'vue'  

export function createApp () {  
  // 创建应用  
  const app = createSSRApp(App)  

  // 使用app.component方法绑定全局组件  
  // 使用app.config.globalProperties属性绑定全局方法  

  // 使用store  
  app.use(store)  

  // 导出应用  
  return { app }  
}

2、全局组件的注册，需要修改。需要注册到app上。以前是直接注册到Vue上。示例如下所示：

import BaseCopyright from '@/components/BaseCopyright'  

app.component('BaseCopyright', BaseCopyright)

• 上面的BaseCopyright组件会生效。
• 注：亲测发现，在uni-app中，组件需要写成单文件组件，如果写成template的形式则组件不生效。
• 下面的GlobalComponentName组件不会生效。

  app.component('GlobalComponentName', { template: `<view>GlobalComponentName</view>` })

3、创建store的方式要改且vuex需要使用"vuex": "^4.0.0-0"版本。store.js内容如下所示：

import { createStore } from 'vuex'  

export default createStore({  
  state: {},  
  mutations: {},  
  actions: {},  
  modules: {}  
})

• 注：选择vue版本为2时，在uni-app中，不能在模板里直接使用store，需要使用computed中转一下。此时开发者工具appData中展示的数据是给人看的（展示完整的键名）。
• 注：选择vue版本为3时，在uni-app中，能在模板里直接使用store。此时开发者工具appData中展示的数据不是给人看的（展示a、b、c、d、e等被简化后的键）。

4、scss问题 - 和dart-sass版本以及vite打包工具多少有点关系。

• 路径需要拼全，index不能省，后缀也不能缺，否则会报错。
  • 选择vue版本为2时，可以这么用：~@/scss/config。
  • 选择vue版本为3时，必须这么用：~@/scss/config/index.scss。
• 不能直接使用/进行除法，需要使用math.div。

5、js问题 - 和打包工具换成vite以及选择vue版本为3多少有点关系。

• 不能使用module.exports = {}进行导出。需要使用export default {}进行导出。
  • 第三方组件中亦如此，mp-html组件中的module.exports需要更换为export default。
• api响应的数据发生了变更，以前返回一个数组，第一个值是出错信息，第二个值是响应结果。现在直接返回响应结果，而错误信息需要用catch捕获。
  • 这个有点坑，需要改的地方有点多。
• 选择vue版本为2时，在uni-app中，可以直接使用Vue.prototype.$sleep进行方法的绑定。
  • vue3需要使用app.config.globalProperties.$sleep进行方法的绑定。
• 类似:visible.sync的用法，需要统一更换为，类似v-model:visible的用法。

6、第三方组件mp-html无法正常使用，需要做如下改动：

• PR：https://github.com/jin-yufeng/mp-html/pull/398
• 1、parse.js中module.exports = Parser更改为export default Parser。
• 2、mp-html.vue中const Parser = require('./parser')更改为import Parser from './parser'。
• 3、node.vue中wxs相关的代码转移到js中。
  • node.vue中handler.use别忘了更换为转移后的方法。