Vue.jsの単一ファイルコンポーネント用の環境構築をしてみた(Pug+Sass+Typescript導入編)
今回は前回の記事↓の続きとして、pug、sass、typescriptを導入しようと思います。
それでは早速必要なパッケージをインストールします。
pugをインストール
npm i -D pug
sass関連のパッケージをインストール
npm i -D node-sass sass-loader
typescript関連のパッケージをインストール
npm i -D typescript ts-loader vue-ts-loader
必要なパッケージはインストールできたので、設定ファイルを編集・追加していきます。
tsconfig.jsの作成
まずプロジェクトフォルダ直下にtsconfig.js
を作成し、以下のようにします。
{ "compilerOptions": { "outDir": "./dist/", "sourceMap": true, "strict": true, "noImplicitReturns": true, "module": "es2015", "moduleResolution": "node", "allowSyntheticDefaultImports": true, "noImplicitThis": true, "target": "es5", "experimentalDecorators": true }, "include": [ "./src/**/*" ] }
webpack.config.jsの作成
webpack.config.js
を編集していきます。
const path = require('path'); const webpack = require('webpack'); module.exports = { entry: './src/index.ts', output: { path: path.resolve(__dirname, 'dist'), publicPath: '/dist/', filename: 'bundle.js', }, module: { rules: [ { test: /\.vue$/, exclude: /node_modules/, loader: 'vue-loader', options: { esModule: true } }, { test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/, options: { transpileOnly: true, appendTsSuffixTo: [/\.vue$/] } }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, ] }, resolve: { extensions: ['*', '.ts', '.vue', '.json', 'scss', '.js'], alias: { 'vue$': 'vue/dist/vue.esm.js' } }, devServer: { contentBase: './', port: 3000, host: 'localhost', historyApiFallback: true, } };
vue-loader
の部分なのですが、よく他の記事では、オプションでesModule: true
と記載するのですが、ver14以降.vue ファイルは常に ES モジュールをエクスポートするので記述は不要になります。
以下のページを一度読んでみてください。
d.tsファイルの作成
次にsrc
フォルダ直下にsfc.d.ts
ファイルを作成します。
declare module "*.vue" { import Vue from "vue"; export default Vue; }
d.ts
より前の名前は任意で大丈夫です。
このファイルを配置する場所は、tsconfig.json
で指定されているパスの中でしたらどこでも大丈夫です。
コンポーネントファイルの作成
今度はHello.vue
ファイルを編集します。
<template lang="pug"> .list p.list_item Hello {{name}} </template> <style lang="scss" scoped> .list { color: #323232; font-weight: 700; &_item { display: flex; } } </style> <script lang="ts"> import Vue from "vue"; export default Vue.extend({ data() { return { name: 'Vue.js!!!!' } } }) </script>
styleタグにscopedを設定すると以下のようにローカルスコープができます。便利ですね。
htmlファイルを作成
前回の記事ではdist
フォルダの中にhtnlファイルを配置していましたが、便宜上プロジェクトフォルダ直下に配置します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Vue Component Tutorial</title> </head> <body> <div id="app"></div> <script src="./dist/bundle.js"></script> </body> </html>
これでnpm start
とコマンドを実行してブラウザにHello Vue.js!!!!
と表示されればOKです!
躓いた箇所
vue-laoderの部分で結構悩まされました。 ローカルサーバーを起動した時に以下のようなエラーがでました。
ERROR in ./src/components/Hello.vue?vue&type=script&lang=ts vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
結論を言うと自分は今回のプロジェジェクトではvue-loaderのver15を使用していました。ver15は最近リリースされたばかりでver14と変更点が多く、新たにVueLoaderPlugin
などを追加しなければいけないみたいです。自分はvue-loaderのバージョンを14に下げてこのエラーを回避しました。次vue-loaderを使う機会がある時はver15で試してみたいと思います。
以下参考記事になります。
次回はtodoアプリを作成するなどして、理解を深めていきたいと思います。
今回のコードもgithubにあげたので参考にしてみてください。