記事概要

簡易サンプルを作るときのお気に入りセット。
構築

➀ 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>