image.png

方式一：CDN引入

image.png
image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  13.     <div id="app">
  14.         <h2>Hello World</h2>
  15.     </div>
  16.     <!-- CDN引入 -->
  17.     <script src="https://unpkg.com/vue@next"></script>
  18.     <script>
  19.         // 1、定义要显示的HTML
  20.         const why = {
  21.             template: '<h2>Hello World</h2>'
  22.         }
  24.         // 2、创建Vue
  25.         const app = Vue.createApp(why);
  27.         // 3、创建的Vue替换掉ID为app的元素
  28.         app.mount("#app")
  29.     </script>
  31. </body>
  33. </html>

方式二：下载引入

手动下载，然后引入

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  11.   <div id="app"></div>
  12.   <!-- 下载文件引入，这里是相对路径， -->
  13.   <!-- ../表示当前html文件所在文件夹的上一个文件夹，然后找到js文件夹里面的vue.js文件 -->
  14.   <script src="../js/vue.js"></script>
  15.   <script>
  17.     Vue.createApp({ // 2、创建Vue
  18.       template: `<h2>你好啊, 李银河</h2>` // 1、定义要显示的HTML
  19.     }).mount("#app"); // 3、创建的Vue替换掉ID为app的元素
  21.     // 这里是链式写法，和上面的cdn引入一样的
  24.   </script>
  25. </body>
  26. </html>

方式三：npm安装

通过npm安装好Vue Cli后，默认就安装好了Vue ，并且新建项目时，默认给你引入Vue

Vue 3.0

  1. npm install vue@next