概要
あんまりイケてないのだが、Laravel-Mixで
Vue + Vuetify + TypeScriptをやってみたので備忘録がてらに。
環境
- Laravel 6.x
- Node.js 12
- macOS
Vueのセットアップ
$ php artisan preset vue
Vuetifyのインストール
$ npm install -D vuetify
Vuetifyの設定
app.js
import Vue from "vue";
import Vuetify from "vuetify";
import App from "./components/ExampleComponent";
Vue.use(Vuetify);
new Vue({
el: "#app",
components: App,
vuetify: new Vuetify()
});
$ npm run dev
で一旦コンパイルが通るか確認。
TypeScriptのセットアップ
$ npm install -D ts-loader typescript vue-property-decorator
$ touch tsconfig.json
tsconfig.json
{
"compilerOptions": {
"outDir": "./public/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"noImplicitAny": true,
"module": "es2015",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"moduleResolution": "node",
"target": "es5",
"lib": [
"es2016",
"dom"
]
},
"include": [
"./resources/ts/**/*"
]
}
app.jsをapp.tsに
app.ts
import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
import App from "./components/ExampleComponent.vue";
Vue.use(Vuetify);
new Vue({
el: "#app",
render: h => h(App),
vuetify: new Vuetify()
});
resources/ts/types/index.d.tsの作成
index.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
webpack.mix.jsの編集
webpack.mix.js
mix.ts("resources/ts/app.ts", "public/js");
mix.webpackConfig({
resolve: {
extensions: [".js", ".jsx", ".vue", ".ts", ".tsx"],
alias: {
vue$: "vue/dist/vue.esm.js"
}
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
options: { appendTsSuffixTo: [/\.vue$/] },
exclude: /node_modules/
}
]
}
});
TypeScriptのコンパイル
$ npm run dev
でコンパイルが通れば完了。