Vue3（beta）+ TypeScript + vue-router + Vuex 環境構築メモ

7675 ワード
Vue.js JavaScript vue-router Vuex JavaScript テキストリンク

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で作ってみた