Nuxt2.5.1とTypeScript3.4.1でプロジェクト作ってみるメモ
注意
ただのメモです。これが正解かどうかはまだわかってません。
環境
- node v10.12.0
- yarn 1.15.2
スタート
yarn global add typescript
yarn global add tslint
npx create-nuxt-app myproject
好きなものを選ぶ(buefy使いたいから選ぶ)cd myproject
yarn.lock
を削除node_modules
を削除- package.jsonでnuxtのバージョンを2.5.1に書き換えてみる
yarn add -D @nuxt/typescript vue-property-decorator
echo "{}" > tsconfig.json
ファイル作るyarn add -D @typescript-eslint/parser
yarn add -D sass-loader node-sass
assets/css/main.scss
を作って公式ドキュメントにある内容をペースト(https://buefy.org/documentation/customization)- nuxt.config.jsのcss:[]にassets/css/main.scssを追記。色を変えたりなどして確認
yarn nuxt dev -o
で起動するとなんかかっこいい。`- サンプルを参考に.vueファイルのscript部分を
lang="ts"
にしてTypescriptに書き換え - Propで警告がでるがts-config.jsonに
"strictPropertyInitialization": false,
を追加してvscode再起動して回避 - ipでアクセスできるようにnuxt.config.jsに追記
server: { port: 3014, // デフォルト: 3000 host: '0.0.0.0' // デフォルト: localhost, },
- IE11でも表示できるようにnuxt.config.jsのhead.metaに追記
{ hid: 'http-equiv', 'http-equiv': 'X-UA-Compatible', content: 'IE=edge' }