使用Vite4开发Vue2

别问为什么，我就是想用 Vite 写 Vue2，也别说 Vue3 支持 Vue2 写法，那不得劲，嘎嘎。

创建 Vite 项目。

yarn create vite

框架选择 Vanilla。

添加对 vue2 支持的依赖。

yarn add vite-plugin-vue2

创建 vite.config.js 文件并配置。

import { defineConfig } from "vite"; 
import { createVuePlugin } from "vite-plugin-vue2"; 

export default defineConfig({ 
  plugins: [createVuePlugin()], 
});

安装 vue2 和 vue 模板依赖。

yarn add vue@2.7.16
yarn add vue-template-compiler@2.7.16

删掉没用的文件夹和文件，创建自己习惯的vue项目结构。

main.js 修改成

import Vue from "vue";
import App from "./src/App.vue";

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

现在就能正常的使用 Vite 开发 Vue2 了。

再配置一下 路由 和 饿了么UI

安装路由依赖

yarn add vue-router@3.1.3

创建并配置路由文件，创建 Index.vue 文件

router/ndex.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: '',
    component: () => import('../views/Index.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

main.js

import Vue from "vue";
import App from "./src/App.vue";
import router from "./src/router";

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <router-view/>
</template>

安装 Element UI

yarn add element-ui

创建 ElementUI.js 引入 Button 和 Message，在 main.js 引入 ElementUI.js

ElementUI.js

import Vue from 'vue'; 
import { Button, Message } from "element-ui"; 

Vue.use(Button); 

Vue.prototype.$message = Message;

main.js

import Vue from "vue";
import App from "./src/App.vue";
import router from "./src/router";
import 'element-ui/lib/theme-chalk/index.css';
import "./src/utils/ElementUI.js";

Vue.config.productionTip = false;

new Vue({
  router,
    render: h => h(App)
}).$mount("#app");

Index.vue

<template>
  <div>
    <h1>嘎嘎</h1>
    <el-button @click="showMsg" type="primary">按钮</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        text: "嘎嘎嘎嘎"
      }
    },
    methods: {
      showMsg() {
        this.$message({
          type: "success",
          message: this.text
        })
      }
    }
  }
</script>

放一下 package.json

{
  "name": "demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^4.3.2"
  },
  "dependencies": {
    "element-ui": "^2.15.13",
    "vite-plugin-vue2": "^2.0.3",
    "vue": "2.7.16",
    "vue-router": "3.1.3",
    "vue-template-compiler": "2.7.16"
  }
}

开始愉快的使用 Vite4 来开发 Vue2 吧（在生产环境使用我也没试过，斟酌）。