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

Vue CLI 설치

yarn global add @vue/cli

프로젝트 만들기

Typescript, Router, Vuex를 넣어 둡니다.

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 업데이트

최신 버전의 Vue beta를 사용해야 합니다.

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

오류 수정

이대로 움직이지 않기 때문에 몇 가지 수정합니다.
참고까지 변경전의 코드는 코멘트 아웃했습니다.

shims-tsx.d.ts
삭제

shims-vue.d.ts

shims-vue.d.ts

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

component/HelloWorld.vue

HelloWorld.vue

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

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

router/index.ts

index.ts

// 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
  },
...

store/index.ts

index.ts

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

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

동작 확인

yarn serve

평소 페이지가 표시되었습니다.

참고

Vue 3.0.0-beta의 시험 환경을 Vue CLI로 만들어 보았습니다.