没有导语没有前言,直接上正文
vitejs 官网:https://cn.vitejs.dev/
创建项目
npm create vite@latest
注意了,这里不要使用后面的附加命令创建一个 Vue 模板,因为 Vite 创建的默认版本是 Vue3
下载之后的目录长这样子
这个时候就可以手动整理一下,不必要的都删除掉,然后新建src
目录,再拖动文件位置
然后我们再添加Vue2
相关的插件
下载 Vue2 的指定版本
我们直接
npm install vue
的话会直接下载 Vue 的最新版,所以我们需要指定版本
npm install vue@2.6.14 -S
Vue2 现在已经更新到 2.7 了( 😐 )
寡下一个 Vue 是显然不行的,我们还需要下载相对应的依赖插件
npm install vue-template-compiler@2.6.14 -D
npm install vite-plugin-vue2 -D
vue-template-compiler@2.6.14
需要和 Vue2 的版本保持一致用于解析 Vue 模板
vite-plugin-vue2
用于 vite 支持 vue2
新建vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'
export default {
plugins: [createVuePlugin()]
}
详细文档:https://github.com/underfin/vite-plugin-vue2
创建vite.config.js
之后基本就已经搭建好了,其它部分就和vue-cli
创建时一样
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: (h) => h(App)
}).$mount('#app')
App.vue
<template>
<div>你好,Vite + Vue2</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped></style>
运行
npm run dev