开始一个vue项目

main.js

  1. const app = Vue.createApp({
  2.   data() {    // short form of => data: function() {}
  3.     return {
  4.       products: 'socks'
  5.     }
  6.   }
  7. })

index.html

  • 引入vue的cdn
  • 把main.js导入

  • 获取DOM并将其挂载到vueApp上

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <title>Vue Mastery</title>
    6.   <!-- Import Styles -->
    7.   <link rel="stylesheet" href="./assets/styles.css" />
    8.   <!-- Import Vue.js -->
    9.   <script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
    10. </head>
    11. <body>
    12.   <div id="app">
    13.     <h1>Mart</h1>
    14.     <p>{{ products }}</p>
    15.   </div>
    17.   <!-- Import Js -->
    18.   <script src="./main.js"></script>
    20.   <!-- Mount dom to vueApp -->
    21.   <script>
    22.     const mountedApp = app.mount('#app')
    23.   </script>
    25. </body>
    26. </html>