对js的模块化开发要摆脱过去把js当作浏览器脚本的了解。将以前固有的印象彻底剥离。
现在前端不是做特效，js也在此消失。现在叫ES语言，如果能将其对应成python（以及PHP开发需要搭建服务器环境）就有更好的理解。

那么接上一章完成的代码进行修改，换成ES6+Vue的模块化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">

        <h1>{{ msg }}</h1>
        <p>{{ web.title }}</p>
        <p>{{ web.url }}</p>


    </div>


    <script type="module">

        import {createApp,reactive } from './vue.esm-browser.js'

        createApp({

            setup(){

                const web = reactive({
                    title: '第二堂课',
                    url: 'cn.vuejs.org'
                })

                return {
                    msg:'hello vue',
                    web
                }
            }


        }).mount('#app')


    </script>

</body>
</html>

运行以上的代码需要服务器环境。在vscode中安装"live Server"模块，然后右键"open with live server"
课程地址：https://www.bilibili.com/video/BV1nV411Q7RX

标签: none

评论已关闭