Vue3 (beta) + TypeScript + vue-router + Vuex 환경 구축 메모

Vue CLI 설치

yarn global add @vue/cli

프로젝트 만들기

vue create try-vue-next

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, Linter
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling
JSX)? No
? Use history mode for router? (Requires proper server setup for index fallback in production) No

? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

Vue 3 CLI 플러그인 추가

cd try-vue-next
vue add vue-next

package.json 업데이트

  ...
  "dependencies": {
    "vue": "^3.0.0-beta.24" 
  },
  "devDependencies": {
    ...
    "@vue/compiler-sfc": "^3.0.0-beta.24",
    ...

오류 수정

declare module "*.vue" {declare module "*.vue" {
  // import Vue from "vue";
  // export default Vue;
  import { defineComponent } from 'vue'
  export default defineComponent
}

...
<script lang="ts">
// import Vue from "vue";
import { defineComponent } from 'vue'

// export default Vue.extend({
export default defineComponent({
  name: "HelloWorld",
  props: {
    msg: String
  }
});
</script>
...

// import { RouteConfig, createRouter, createWebHashHistory } from "vue-router";
import { RouteRecordRaw, createRouter, createWebHashHistory } from "vue-router";
import Home from "../views/Home.vue";

// const routes: Array<RouteConfig> = [
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
...

// import Vuex from "vuex";
import { createStore } from "vuex";

// export default Vuex.createStore({
export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
});

동작 확인

yarn serve

참고