Vite는 Vue3을 기반으로 프로젝트를 생성해 준다.
개인적으로 최신 버전을 사용하는 것을 좋아하지만 Vue는 아직 Vue3지원하지 않는 모듈이 좀 있는 것으로 보인다.
해서 본의 아니게 Vue2를 사용해야 하는 경우, Vite를 사용하여 Vue2 프로젝트를 생성하는 법을 기록해둔다.
$ npm create vite@latest
$ yarn create vite
{
...
"dependencies": {
"vue": "^2.7.14",
...
},
"devDependencies": {
"vite": "^3.2.3",
}
}
참조. https://www.npmjs.com/package/vue?activeTab=versions
$ npm remove @vitejs/plugin-vue
or
$ npm remove @vitejs/plugin-vue --legacy-peer-deps
$ npm add vite-plugin-vue2 -D
import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
export default defineConfig({
plugins: [createVuePlugin()],
});
Vue2 스타일로 변경하지 않을 경우 아래 에러를 볼 수 있다.
[vite] Internal server error: Component template should contain exactly one root element.
If you are using v-if on multiple elements, use v-else-if to chain them instead.
import Vue from 'vue';
import App from './App.vue';
import './style.css'
new Vue({
render: (h) => h(App),
}).$mount('#app');
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
components: {
HelloWorld
}
}
</script>
<template>
<div id="app">
<h1>Hello App!</h1>
<img alt="Vue Logo" src="./assets/vue.svg" />
<hello-world msg="Hello Vue2 + Vite" />
</div>
</template>