TypeScript + Vue.js + Vuex + Vuetifyの環境構築
この記事の概要
- Vue.js、Vuex、VuetifyとTypeScriptを用いるプロジェクトの環境構築を行います。
vue-cliでプロジェクト作成
次に、vue-cliのテンプレートプロジェクトを用いてプロジェクトを作成します。
vue create my-project
以下の画面では、Manually select featuresを選択します。
Vue CLI v4.5.9 ? Please pick a preset: (Use arrow keys) > Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) Manually select features
選択すると、各オプションを選択できます。
こちらでは、以下の選択肢をスペースキーで指定します。
Vue CLI v4.5.9 ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Choose Vue version (*) Babel (*) TypeScript ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex >(*) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing
次に、Vue.jsのバージョンを選択しますが、こちらでは2.xを選択します。
Vuetifyは、現時点(2020/12/22)ではVue3系をサポートしていないためです。
ロードマップは以下です。
vuetifyjs.com
Vue CLI v4.5.9 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with (Use arrow keys) > 2.x 3.x (Preview)
次に、vue-class-componentの使用の是非が問われますが、Yesにしておきます。
? Use class-style component syntax? (Y/n)
他の各オプションは以下のように設定していますが、お好みで問題ないと思います。
Vue CLI v4.5.9 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter ? Choose a version of Vue.js that you want to start the project with 2.x ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass) ? Pick a linter / formatter config: TSLint ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json ? Save this as a preset for future projects? (y/N)
プロジェクトが作成され、インストールが完了したら一度起動してみます。
cd my-project
npm run serve
無事に画面があがりました。
Vuetifyをプロジェクトに追加する
次に、作成したプロジェクトに、Vueitfyをインストールします。
途中でプリセットの選択がありますが、こちらはDefaultを選択します。
vue add vuetify
インストールが終わりましたら、ひとまず起動してみます。
npm run serve
そうするとエラーが出ますが、ビルドは成功できます。
以上でVuetifyがインストールできました。
エラーの解消
次に、エラーが出ている部分を一つずつ解消していきます。
src/components/HelloWorld.vue
95:22 Missing semicolon 93 | 94 | <script lang="ts"> > 95 | import Vue from 'vue' | ^ 96 | 97 | export default Vue.extend({ 98 | name: 'HelloWorld',
152:3 Missing semicolon 150 | ], 151 | }), > 152 | }) | ^ 153 | </script> 154 |
こちらは、セミコロンがないと怒られているだけなので、つけるだけです。
src/main.ts
13:24 Missing trailing comma 11 | store, 12 | vuetify, > 13 | render: (h) => h(App) | ^ 14 | }).$mount('#app'); 15 |
こちらは、コンマがないと怒られているだけなので、つけるだけです。
src/plugins/vuetify.ts
2:21 Could not find a declaration file for module 'vuetify/lib/framework'. 'XXXX/my-project/node_modules/vuetify/lib/framework.js' implicitly has an 'any' type. Try `npm install @types/vuetify` if it exists or add a new declaration (.d.ts) file containing `declare module 'vuetify/lib/framework';` 1 | import Vue from 'vue'; > 2 | import Vuetify from 'vuetify/lib/framework'; | ^ 3 | 4 | Vue.use(Vuetify); 5 |
こちらは、vuetify/lib/frameworkという型がわからないと怒られています。
他サイトでは、vuetify/libが使われていますが、今の環境ではこちらになっているようです。
調べてみると、vuetify/lib/frameworkは、コンパイル時間を短くするために使用するようです。
探してみましたが、stackoverflowではvuetify/libに変更する修正案が出てきました。
stackoverflow.com
私は以下の方法で解決しました。
型定義ファイル(d.ts)では、import文を先に書くと途端にdeclareされたモジュールが読み込みできなくなるみたいです。
なので、shims-vuetify.d.tsを以下のように修正しました。
修正前
import 'vuetify/types' declare module 'vuetify/lib/framework' { import Vuetify from 'vuetify' export default Vuetify }
修正後
declare module 'vuetify/lib/framework' { import 'vuetify/types' import Vuetify from 'vuetify' export default Vuetify }
再度、ビルドを行い、エラーが発生していない事を確認します。
以上で環境構築が完了しました。
機会があれば、TypeScriptとVuex, vue-routerを用いた開発方法について書きたいと思います。
