皆さんこんにちは！底辺プログラマーのヤスです！
前回のvue.jsを最小構成で動かす！に引き続きvue.jsの記事を作成していこうと思います。
今回はvue-cliを使わずに.vueファイルを読み込むところまでやっていきます。
Contents
.vueを読込むために必要なパッケージを追加
.vueファイルを読込むためにvue-loaderをインストールします。
このパッケージを導入する際、依存関係のあるvue-template-compilerも一緒にインストールしていきましょう。
|
1 |
npm install --save-dev vue-loader vue-template-compiler |
package.jsonに『vue-loader』と『vue-template-compiler』が追記されていることを確認してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "name": "simple", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode development" }, "author": "", "license": "ISC", "dependencies": {}, "devDependencies": { "vue": "^2.6.10", "vue-loader": "^15.7.2", "vue-template-compiler": "^2.6.10", "webpack": "^4.41.2", "webpack-cli": "^3.3.10" } } |
webpack.config.jsを編集
下記のように編集を行って下さい。
↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
const path = require('path') const { VueLoaderPlugin } = require("vue-loader") module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', } }, module: { rules: [ { test: /\.vue?$/, loader: 'vue-loader' } ] }, plugins: [new VueLoaderPlugin()] } |
なぜかvue-loaderをビルドすると『vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.』というエラーが表示されてしまったのでVueLoaderPluginを追加しています。
バージョンのせいでしょうか？
仕事用のPCではこのエラーは出ませんでした。
index.jsでApp.vueを読込む
前回index.jsにて直接『Hello World!』と表示していましたが、
App.vueを読込むように編集を行います。
|
1 2 3 4 5 6 7 8 9 10 |
import Vue from 'vue' import App from './App' Vue.config.productionTip = false new Vue({ el: '#app', components: { App }, template: '<App/>' }) |
これでApp.vueファイルを読込むところまで作成できました。
まだApp.vueを作成していないので次で作成します。
App.vueを作成
App.vueが表示されることが目的なので中身は簡単に作ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<template> <div id="app"> {{msg}} </div> </template> <script> export default { name: 'App', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> |
msgをタグ内にバインドしておきます。
もっと簡単に書くならバインドせずに直接書いても大丈夫です。
ひとまず作成するファイルは以上となります。
ビルド
さっそくビルドしましょう。
|
1 |
npm run build |
dist/bundle.jsが更新されていることを確認してください。
エラーが出ている場合はエラー内容を確認して対処しましょう。
筆者の環境ではビルドは問題なく成功しています。。。
index.htmlをブラウザで表示する
前回同様にブラウザでindex.htmlを表示してください。
App.vueの内容が表示されていれば成功です。
筆者の環境では『Welcome to Your Vue.js App』が表示されています！
まとめ
今回はvue-cliを使わずに.vueを読込んで表示するところまで記事にしました。
とりあえず.vueファイルの読み込みが確認できれば後は好みで.vueファイルを作成していけば問題ないと思います。
次回はvue.jsにmxgraphを乗せるところまでできたらいいなと思っています。
最後まで読んで頂きありがとうございます。
