Vue2.x版本的购物车改成Vue3.x版本

前段时间学习制作了一个vue2.6.11版本的购物车，今天试着改成了vite（vue3.2.38版本）的。如图所示：

运行下面命令，新建了一个vite项目

npm init vue@latest

然后把原先vue2.x中出现的文件、组件等都拷贝或替换到新的项目中。运行命令:

npm run dev

网页不能正常运行，逐个报错，按照报错信息，依次安装了缺少的文件。

1.安装axios

npm install axios -D

2.安装less

npm install less -D

3.安装mitt依赖包

npm install [email protected]

修改eventBus.js文件为：

import mitt from 'mitt'

const bus=mitt()

export default bus

另外，还需修改组件中相应的代码：

bus.$on()改为bus.on()

bus.$emit()改为bus.emit()

4.安装BootStrap

npm install bootstrap --save-dev

main.js文件中，引入BootStrap。

import {
    
     createApp } from 'vue'

import App from './App.vue'

// import './assets/main.css'

import 'bootstrap/dist/css/bootstrap.min.css'

createApp(App).mount('#app')

做完上述操作，项目就能正常运行了。感觉两个版本在子组件向父组件传递数据时有变化，main.js文件跟2.x版相比有变化，其他的没怎么变。