はじめに
vue-cli を利用すれば簡単に設定できますが, 今回は学習用途にプロジェクトを起ち上げていきます.
開発環境・バージョン等
今回利用した環境は以下の通りです.
| name | version |
|---|---|
| Windows 10 Pro 64bit | 1903(18362.778) |
| Powershell Core | 7.1.0-preview.2 |
| node | v14.1.0 |
| npm | v6.14.4 |
プロジェクト構築
プロジェクトディレクトリの初期化
プロジェクトディレクトリの作成
適当な場所にプロジェクト用のディレクトリを作成します.
powershell
mkdir "D:/src/work/ts/Typescript-Vue-Sample"
cd "D:/src/work/ts/Typescript-Vue-Sample"
作成が完了したら, Visual Studio Code でディレクトリを開きます.
powershell
code "D:/src/work/ts/Typescript-Vue-Sample"
npm init で初期化
powershell
npm init -y
ここまで正常にできている場合, 以下のようになっていると思います.
Webpack の導入・設定
Webpack のインストール
次にアプリケーションをビルドするために Webpack をインストールします.
同時に webpack-cli と webpack-dev-server, copy-webpack-plugin もインストールしておきます.
powershell
npm i -D webpack webpack-cli webpack-dev-server copy-webpack-plugin
Webpack 設定ファイルの作成
Webpack を無事インストールできたら, 設定ファイルを作成・編集します.
powershell
new-item "webpack.config.js"
webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
// 出力先ディレクトリ
path: path.resolve(__dirname, './dst'),
// 出力ファイル名
filename: 'bundle.js'
},
devServer: {
// webpackの扱わないファイルを入れるディレクトリ
contentBase: path.resolve(__dirname, 'public')
}
}
起動コマンドを package.json に書き加えます.
package.json
{
"name": "Typescript-Vue-Sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot", // <-- ここを追加
"build": "webpack -p" // <-- ここを追加
},
"keywords": [],
"author": "",
"license": "ISC"
}
これで .js ファイルをコンパイルする準備ができました.
.js ファイルをコンパイルしてみる
試しに簡単な .js ファイルをコンパイルしてみます.
powershell
mkdir "src"
new-item "src/index.js"
mkdir "public"
new-item "public/index.html"
src/index.js
console.log('Hello, world!!')
public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue app</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
それでは実際に実行してみます.
powershell
npm start
http://localhost:8080 にアクセスして, 開発者ツールを開いて Console を見ると Hello, world!! が表示されていると思います.
確認が完了したら Ctrl + C でサーバを終了しておきます.
Vue.js の導入
Vue のインストール
それでは, Vue 本体と関連ローダーも導入しておきます.
まずは Vue と 基本ローダー をインストールします.
powershell
npm i -D vue vue-loader vue-template-compiler css-loader style-loader
次に Javascript関連ローダー をインストールします.
powershell
npm i -D babel-loader @babel/core @babel/preset-env
設定ファイルを修正する
各種インストールし終わったら, webpack.config.js と package.json を修正します.
webpack.config.js
const path = require('path')
// ここから追加 --->
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const CopyPlugin = require('copy-webpack-plugin')
// <--- ここまで追加
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dst'),
filename: 'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'public')
},
// ここから追加 --->
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
}
]
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new VueLoaderPlugin(),
new CopyPlugin([{ from: './public' }])
]
// <--- ここまで追加
}
package.json
{
"name": "Vue.js",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot",
"build": "webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^2.6.11",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"babel-loader": "^8.1.0",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.5.3",
"style-loader": "^1.2.1",
"ts-loader": "^7.0.2",
"typescript": "^3.8.3",
"vue-loader": "^15.9.2",
"vue-template-compiler": "^2.6.11"
},
// ここから追加 --->
"babel": {
"presets": [
"@babel/preset-env"
]
},
"browserslist": "last 2 versions, not dead, not ie > 0"
// <--- ここまで追加
}
Vue.js を簡単に使ってみる
それでは Vue を使って Hello, world!! を出力してみます.
powershell
mkdir "src/components"
new-item "src/components/App.vue"
src/components/App.vue
<template>
<div>
<p>Hello, world!!</p>
</div>
</template>
src/index.js
import Vue from 'vue'
import App from './components/App'
new Vue({
el: '#app',
components: { App },
template: '<app/>'
})
それでは実際に実行しましょう.
powershell
npm start
http://localhost:8080 にアクセスすると以下のように表示されると思います.
Typescript の導入・設定
Typescript のインストール
それでは Typescript本体 と ts-loader をインストールします.
powershell
npm i -D typescript ts-loader
設定ファイルを作成・修正する
Typescript用の設定ファイル(= tsconfig.json)を新規作成します.
powershell
new-item "tsconfig.json"
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"noImplicitAny": true
}
}
Typescriptの導入に伴って, webpack.config.js も修正します.
webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const CopyPlugin = require('copy-webpack-plugin')
module.exports = {
// ここから修正 ( .js to .ts ) --->
entry: './src/index.ts',
// <--- ここまで修正 ( .js to .ts )
output: {
path: path.resolve(__dirname, './dst'),
filename: 'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'public')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
// ここから追加 --->
{
test: /\.ts$/,
use: [{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
}]
},
// <--- ここまで修正
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
}
]
},
resolve: {
// ここから修正 ( .ts を追加 ) --->
extensions: ['.js', '.ts', '.vue', '.json'],
// <--- ここまで修正 ( .ts を追加 )
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new VueLoaderPlugin(),
new CopyPlugin([{ from: './public' }])
]
}
ソースコードを修正する
index.js を index.ts に名前変更する.
powershell
mv "src/index.js" "src/index.ts"
src/components/App.vue を修正します.
以下のコードを足さないと正しく認識されないので注意してください.
src/components/App.vue
<!-- ↓↓↓ ここから追加 ↓↓↓ --->
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
})
</script>
<!-- ↑↑↑ ここまで追加 ↑↑↑ --->
<template>
<div>
<p>Hello, world!!</p>
</div>
</template>
それでは実際に実行しましょう.
powershell
npm start
http://localhost:8080 にアクセスすると以下のように表示されると思います.
