一、vue3和vue2
1.创建vue2项目:基于构建工具webpack
vue create 项目名称基于webpack的项目有一个问题,就是编译速度慢
解决:使用vite
vite优势:在开发过程中大大提升我们的效率
2.创建vue3项目:基于vite
npm init @vite/app 项目名称 / npm create vite@latest 项目名称 --template vue
选择vue(默认版本是vue3)2.1 vite+vue3的方式
把create创建的vue3的src整个复制粘贴到基于vite的项目中
把create创建的package.json中的 "dependencies"整个复制替换 vite中的
npm i:安装依赖
npm run dev 启动修改错误
2.2 vite+vue2的方式
把create创建的vue2的src整个复制粘贴到基于vite的项目中
把create创建的package.json中的 "dependencies"整个复制替换 vite中的 项目
npm i:安装依赖
npm install vite-plugin-vue2 -D
在vite的config.js中配置:
import { createVuePlugin } from 'vite-plugin-vue2'
export default {
plugins: [ createVuePlugin(/* options */) ],
}
npm i vue-template-compiler -S
二、vite
vite官网:Vite中文网
- 什么vite?——新一代前端构建工具
- 优势如下
- 开发环境中,无需打包操作,可快速的冷启动
- 轻量快速的热重载(HMR)
- 真正的按需编译,不再等待整个应用编译完成
注意:使用vite构建工具构建的vue3项目,将自己创建的项目放在App.vue组件/HelloWorld.vue组件中,不需要注册(使用vue脚手架构建vue3项目需要),只需要导入即可。