前段时间学习制作了一个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版相比有变化,其他的没怎么变。