To create a Vue 2 project using Vite, you need to specify the @vitejs/plugin-vue2 plugin. Unfortunately, Vite doesn’t offer a direct preset for Vue 2 as it does for Vue 3, but you can set it up manually. Here’s how you can do it:
- Create a Vite project: Run the following command to initialize a new Vite project:
|
1 |
npm create vite@latest my-vue2-project |
- Select “Vanilla” as the template: When prompted to select a framework, choose
Vanilla.
- Install dependencies for Vue 2: Navigate to the project directory and install Vue 2 and the Vue 2 plugin:
|
1 2 |
cd my-vue2-project npm install vue@2 @vitejs/plugin-vue2 |
Update vite.config.js: Modify your vite.config.js file to include the Vue 2 plugin:
|
1 2 3 4 5 6 |
import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue2'; export default defineConfig({ plugins: [vue()], }); |
Update the main entry point: Create or update your main.js file to initialize a Vue 2 application:
|
1 2 3 4 5 6 |
import Vue from 'vue'; import App from './App.vue'; new Vue({ render: (h) => h(App), }).$mount('#app'); |
Set up your index.html: Ensure your index.html has a root element for mounting the app:
Run the development server: Start the development server with:
npm run dev
