単独のHTMLのテンプレートです。Vue.js版とかも下に書いてますが、CDN利用なのでNode.jsで使う場合とは異なるのでご注意を。
時々バージョンアップしたり追加したりします。
ソースコード
汎用版
特にフレームワークを使用しないパターン。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>...</title>
<link rel="stylesheet" href="./style/basic.css">
</head>
<body>
<script src="./script/basic.js"></script>
</body>
</html>
basic.css
html, body {
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}
basic.js
"use strict"
Vue.js（CDN）版
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>...</title>
<link rel="stylesheet" href="./style/basic.css">
</head>
<body>
<div id='app' style="display:none">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="./script/basic.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: () => ({
}),
methods: {
},
mounted() {
document.getElementById('app').style.display = "block";
},
});
</script>
</body>
</html>
Vue.js ＋ ElementUI（CDN）版
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>...</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="./style/basic.css">
</head>
<body>
<div id='app' style="display:none">
<el-container>
<el-header>
</el-header>
<el-main>
</el-main>
<el-footer>
</el-footer>
</el-container>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<script src="https://unpkg.com/element-ui@2.13.2/lib/umd/locale/ja.js"></script>
<script src="./script/basic.js"></script>
<script>
ELEMENT.locale(ELEMENT.lang.ja);
const vm = new Vue({
el: '#app',
data: () => ({
}),
methods: {
},
mounted() {
document.getElementById('app').style.display = "block";
},
});
</script>
</body>
</html>
チラシの裏（読まなくてもいい余談）
仕事でもプライベートでもモックや検証用なんかにHTMLファイルを仕立てるんですが、毎回ウェブで拾ってくるか、既存のソースから関係ないところを削除して使っていたので、備忘録も兼ねて初投稿です。
今後も、なにかパーツに使えそうなものとかを備忘録として残していこうかと思います。