※2020年10月16日 21時23分 (JST)の記事です
Chrome拡張機能をいれる
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja
gachimoto-vue-appで作成
git cloneする
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Chromeからアクセスしてみる
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
<h1> {{ product }} are in stock. </h1>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="main.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
main.js
const app = new Vue({
el: '#app',
data: {
product: 'Boots'
}
})
/**
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
*/
main.jsを変更したらサーバーを再起動
imageの貼り方
https://greko-engineer.hateblo.jp/entry/2020/03/05/231242
表の作り方など
https://www.sejuku.net/blog/83489
Azure Static Web Appsを作成
作ったVueを割り当てる
https://docs.microsoft.com/ja-jp/azure/static-web-apps/getting-started?tabs=vue
ページが見えたら完成
ナビゲーションを作成
https://kuroeveryday.blogspot.com/2016/10/vuejs-vue-router-navigationbar.html
npm install --save vue-router
CH9 VueRouter で SPA を構築
CodeSandbox の雛形があってわかりやすい！
Route53で作ったカスタムドメインの設定
