概要
Vue.jsをwebpack+typescriptな環境で動かしたかったのですが情報が少なかったので記事にしてみました。
Vue.jsの初心者向けガイドにある最初の一歩「宣言的レンダリング」を確認するところまでをまとめています。
フロントエンド周りは初心者なのでいくつか余分なものが含まれるかもしれませんがご了承ください。
やったこと
1.nodeプロジェクトの作成と必要なパッケージの取得
npm init -y
# webpack
npm install -D webpack webpack-cli
# typescript
npm install -D typescript ts-loader
# vue
npm install vue
npm install -D vue-loader vue-template-compiler
2. tsconfig.jsonの作成
npm exec -- tsc --init
3. webpack.config.jsの作成
プロジェクトのルートディレクトリに下記内容でwebpack.config.jsという名前のファイルを作成
// Vue-Loaderを使うために必要
const { VueLoaderPlugin } = require("vue-loader")
module.exports = {
entry: "./src/index.ts", // エントリポイント
output: { // 出力先の設定
path: `${__dirname}/dist`,
filename: "main.js"
},
module: {
rules: [ // 各種入門ドキュメントに書いてあったのをとりあえず羅列してます
{
test: /\.ts$/,
use: "ts-loader",
},
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.css$/,
use: [
"vue-stype-loader",
"css-loader",
],
},
],
},
resolve: {
extensions: [".ts"],
alias: {
"vue$": "vue/dist/vue.esm.js",
},
},
target: ["web", "es2016"],
plugins: [
new VueLoaderPlugin(), // VueLoaderPluginを設定
]
}
これでようやく設定周りが完了です。
4. typescriptのコードを作成
続いてコードの作成です。
エントリポイントにsrc/index.tsを指定しているのでsrcディレクトリの中にindex.tsを下記内容で作成します。
import Vue from "vue"
let app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
5. ビルド
下記コマンドでビルドします。
npm exec -- webpack --mode=development
6. 表示用HTMLを作成
webpack.config.jsのoutputに指定したところにjavascriptファイルができていると思うのでこれを読み込んで表示するためのHTMLを作成します。
ここではdistディレクトリの中にindex.htmlというファイルを作成しています。
<!doctype html>
<html>
<head>
<title>test page</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="./main.js"></script>
</body>
</html>
7. 動作確認
dist/index.htmlをブラウザで開いて確認します。
無事表示されました！
あとがき
プログラミング歴はそこそこになってきましたが、フロントエンドは初心者なので結構ここまで苦労してしまいました...
内容全てを理解するには時間がかかりそうですが、これでVue.jsのガイドを読み進める準備はできたので色々試してみたいと思います。