This repository has been archived by the owner on Jul 10, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 10
nuxt to nuxt tsでやったこと(その後nuxtにマージされました)
Yoshiyuki Hisamatsu edited this page Apr 8, 2019
·
1 revision
$ npx create-nuxt-app <project-name>
以下は選択した内容
-
サーバーサイドのフレームワークを選択します:
- Express
-
好きな UI フレームワークを選択します:
- None(後からでも追加できます)
-
Nuxt のモードを選択します。
- Universal
-
HTTP リクエストを簡単に行うために axios module を追加します。
-
EsLint to Lint your code on save.
-
保存時にコードをチェックするために Prettier を追加します。
$ yarn remove nuxt
$ yarn add nuxt-ts vue-property-decorator
vue-property-decorator を入れると、vue コンポーネントの定義を @Component などのデコレータを使って定義できるようになります。
$ ncu -u
$ yarn
$ typesync
$ yarn
jeffijoe/typesync: Install missing TypeScript typings for dependencies in your package.json.
$ npm run dev
エラーがそこそこ出ました。
ERROR in C:\Users\yhisamatsu\_\js-code\typescript-nuxtjs\tsconfig.json friendly-errors 05:55:40
friendly-errors 05:55:40
TS18003: No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude' paths were '[]'.
ERROR in ./components/HelloWorld.vue?vue&type=script&lang=ts& friendly-errors 05:55:40
Module build failed (from ./node_modules/ts-loader/index.js): friendly-errors 05:55:40
Error: error while parsing tsconfig.json
vue-property-decorator
を使ってデコレーターを使っているのでそのあたりを許可します。
tsconfig.json に以下を追記します。
"experimentalDecorators": true,
"allowJs": true,
ecmaFeatures: {
legacyDecorators: true
}
Please use export @dec class
instead · Issue #662 · babel/babel-eslint
package.json に以下の script を追加します。
"lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
"scripts": {
"dev": "cross-env NODE_ENV=development nuxt-ts",
"build": "nuxt-ts build",
"start": "cross-env NODE_ENV=production nuxt-ts start",
"generate": "nuxt-ts generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint",
"test": "jest"
},