はじめに
普段はアルバイトでReactを使ったWebアプリを開発しています。
今回はVueの勉強がてらにnode.js(express)とWebpackを使って、Hello,Worldを表示してみました。
Vueの実装は単一ファイルコンポーネント、ローカルサーバやwebpackはvue-cliを使わず自前で設定していきます。
主な環境
高度なことはやらないので、気にしなくていいと思いますが一応書いておきます。
macOS Mojave
node v10.16.0
express v4.17.1
webpack v4.36.1
webpack-cli v3.3.6
ディレクトリ構造
public
├ dist
│ └ index.bundle.js
└ index.html
static
└ src
├ components
│ └ Test.vue
└ index.js
web
└ server.js
node_modules
package.js
package-lock.js
webpack.config.js
1.nodeのインストール
nodeのインストール方法については他の記事を参考にしてください。
macならnvm、windowsならnvm-windowsがおすすめです。
2.nodeのパッケージインストール
npmを初期化。
npm init -y
expressをインストールします。
$ npm i express -S
3.expressのローカルサーバを作る
const express = require('express');
const app = express();
const path = require('path');
app.use(express.static(path.join(__dirname, '../public')));
app.listen(8080, () => console.log('vue_test 8080'));
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>vue_test</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src='./dist/index.bundle.js'></script>
</body>
</html>
サーバを立てる
$ node web/server.js
ブラウザでlocalhost:8080にアクセスしてタブが「vue_test」になっているか確認。
4.webpackの設定
webpackとそのローダなどをインストール。
$ npm i -D webpack webpack-cli vue-loader vue-template-compiler css-loader style-loader babel-loader @babel/core @babel/preset-env
configを設定
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: "development",
entry: './static/src/index.js',
output: {
path: path.resolve(__dirname, './public/dist'),
filename: 'index.bundle.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: [
"@babel/preset-env"
]
}
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
},
]
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
vue$: 'vue/dist/vue.esm.js',
},
},
plugins: [new VueLoaderPlugin()],
}
package.jsonにbabelを追加、scriptを編集
{
"name": "vue_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"server": "node web/server.js",
"build": "webpack"
},
"babel": {
"presets": [
"@babel/preset-env"
]
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"babel-loader": "^8.0.6",
"css-loader": "^3.0.0",
"style-loader": "^0.23.1",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.36.1",
"webpack-cli": "^3.3.6"
},
"dependencies": {
"express": "^4.17.1",
"vue": "^2.6.10"
}
}
5.vueを書いていく
vueをインストール
$ npm i vue -S
後々、vue-routerも使いたいためindex.jsをエントリーポイントとしてコンポーネントをぶら下げるようにします(今回のコンポーネントは1つですが...)。
import Vue from 'vue';
import Test from './components/Test';
const app = new Vue(
Test
);
app.$mount('#root');
コンポーネントを記述
<template>
<div id="root">
<p>{{ greeting }} World!</p>
<p>hello</p>
</div>
</template>
<script>
module.exports = {
data: function () {
return {
greeting: 'Hello'
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
webpack実行
$ npm run build
もう一度localhost:8080にアクセスして「Hello World！」と表示されたら成功。
最後に
今回はvueを使ってhello worldを表示してみました。
主にvueの公式ページを参考にしていたのですが、どれもhtmlとjsファイルを対にして実装していてReactをやっている身としては困惑しました。
やっと見つけた単一ファイルコンポーネントのページも説明が少なく分かりづらい印象でした。
最初はvue-cliを使っていたのですが、あまりにも遅く無駄な機能が多かったので、webpackやサーバ部分も自前で実装しました。
最近のwebライブラリはvue-cli的な公式の開発環境が用意されていることには好感が持てますが、もう少しライトで使いやすければなーと思います。
次はrootingやflaxあたりをやってみたいと思います。