今回は、Vue.jsのCDN版を利用した方法を記します。
Vue.jsのCDN版を利用する。
CDN版のVue.jsを利用したサンプルソースです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script src="//cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<title>Vue</title>
</head>
<body>
<div id="app"></div>
<script>
var app = new Vue({
el: "#app",
mounted(){
alert("Success!");
},
});
</script>
</body>
</html>
実行結果は下の画像のようになります。
ロードされると同時にアラートが表示されました。
では、順にみていきましょう。
head内にCDN版のVue.jsを読み込む
下記の3つをhead内に記述します。
<script src="//cdn.jsdelivr.net/npm/vue@2.6.0"></script> <script src="//cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="//cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
vue.jsと同じようにaxiosのCDN版も記述してあります。
サーバサイドと接続する際axiosを使用すると便利だからです。
Vueを記述をする
<script>
var app = new Vue({
el: "#app",
mounted(){
alert("Success!");
},
});
</script>
このように記述をすることで、Vue.jsを使用することができます。
おわりに
CDN版のVue.jsを使用すると環境を簡単に作成できますね。
.vueが使用できないので小規模な開発や、趣味・学習等で使用したい方法ですね。
英語力をつけたいならライザップ
プログラミングをするにあたっても外資系企業などに就職するにも
英語力は欠かせないスキルです。
ライザップが運営する英語スクールRIZAP イングリッシュでは、
・レッスン満足度98%
・学習習慣化実感度94%
・専属トレーナー満足度98%
と非常に好評がある英語スクールです。
短期間で効率的に英語を学びたい方はぜひご利用してみてください。
最後まで読んでいただきありがとうございました。
コメント