- npm create vite
- 不要选择vue 默认是3 选vanilla
- 进入目录 安装官方推荐的插件 underfin/vite-plugin-vue2
- yarn add underfin/vite-plugin-vue2 -D
- npm i underfin/vite-plugin-vue2 -D
- 添加配置文件 , github上步骤
// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'
export default {
plugins: [
createVuePlugin(/* options */)
],
}
- 安装vue 这里选2.x版本
- yarn add vue@2
- npm i vue@2
- 新建一个src文件夹 , 把之前main.js中的代码都删掉
//main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: (h) => h(App),
}).$mount()
- 在src中创建一个App.vue组件
- 修改index.html里main.js文件的路径
<script type="module" src="./src/main.js"></script>
- yarn vite 启动 ~~报错了
提示没有vue-template-compiler这个包
那就 yarn add vue-template-compiler -D
- 再一次yarn vite 或者npm run dev成功了
最后贴一下完整的文件目录,回到了vue2的样子, vite真是快啊 相比vue-cli少了很多的等待时间