基于Vite创建一个Vue2项目

没有导语没有前言，直接上正文
vitejs 官网：https://cn.vitejs.dev/

创建项目

npm create vite@latest
1

注意了，这里不要使用后面的附加命令创建一个 Vue 模板，因为 Vite 创建的默认版本是 Vue3

关于更多的create-vite模板细节，点击这里

下载之后的目录长这样子

这个时候就可以手动整理一下，不必要的都删除掉，然后新建src目录，再拖动文件位置

然后我们再添加Vue2相关的插件

下载 Vue2 的指定版本

我们直接npm install vue的话会直接下载 Vue 的最新版，所以我们需要指定版本

npm install vue@2.6.14 -S
1

Vue2 现在已经更新到 2.7 了（ 😐 ）

寡下一个 Vue 是显然不行的，我们还需要下载相对应的依赖插件

npm install vue-template-compiler@2.6.14 -D

npm install vite-plugin-vue2 -D
1
2
3

• 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()]
}
1
2
3
4
5

详细文档: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')
1
2
3
4
5
6
7
8

App.vue

<template>
  <div>你好，Vite + Vue2div>
template>

<script>
  export default {}
script>

<style lang="scss" scoped>style>
1
2
3
4
5
6
7
8
9

运行

npm run dev
1

运行结果