記事概要
簡易サンプルを作るときのお気に入りセット。
構築
➀ Webサーバはlive-serverを使って、ホットリロード環境を構築。
➁ JSフレームワークはvue。cssフレームワークはvuetifyをCDNで読み込む。
template.html
良く使っているテンプレート。
<!DOCTYPE html>
<html lang="ja" style="overflow:hidden;">
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css" rel="stylesheet">
<!-- reset -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />
<!-- moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/ja.js"></script>
<!-- vue&vuetify -->
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.3.12/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.12/dist/vuetify.js"></script>
<!-- xlsx-populate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx-populate/1.21.0/xlsx-populate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- echarts -->
<script src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sample</title>
</head>
<body>
<v-app id="app">
<!-- sample -->
<div style="margin:10px;">
{{ date | yyyy }}
</div>
</v-app>
</body>
</html>
<!-- <script scr=".echarts_option"></script> -->
<script type="module">
var app = new Vue({
el: '#app',
mixins: [],
vuetify: new Vuetify(),
components: {},
filters: {
yyyy(value) {
return moment(value).format('YYYY')
},
mm(value) {
return moment(value).format('MM')
},
dd(value) {
return moment(value).format('DD')
}
},
data: () => ({
date: new Date()
}),
computed: {
},
watch: {
},
beforeCreate() {
// console.log('1.beforeCreate')
},
created() {
// console.log('2.created')
},
beforeMount() {
// console.log('3.beforeMount')
},
mounted() {
console.log('4.mounted')
this.init()
},
beforeUpdate() {
// console.log('5.beforeUpdate')
},
updated() {
// console.log('6.updated')
},
beforeDestroy() {
// console.log('7.beforeDestroy')
},
destroyed() {
// console.log('8.destroyed')
},
methods: {
init() {
console.log('init')
}
}
})
</script>
<style scoped>
#app {
overflow: auto;
height: 100vh;
width: 100vw;
padding: 0px;
}
</style>