02 使用CDN开发Vue3项目

概述

使用CDN引入Vue的方式已经越来越少有人用,只需要了解即可。

目前新开发的项目基本上都是前后端分离的项目,CDN引入的方式适用于前后端不分离的项目。

基本用法

第一步:新建index.html

第二步:CDN引入vue.js的脚本

<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js">script>

第三步:在body中声明一个id为app的div容器

<div id="vue-app">{{text}}div>

第四步:创建Vue的实例对象,声明变量,并挂载到id为app的容器

<script>
  const app = Vue.createApp({
    data() {
      return {
        text: "今天就开始使用 Vue.js!",
      };
    },
  });
  app.mount("#vue-app");
script>

完整代码

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3快速入门title>
  head>
  <body>
    <div id="vue-app">{{text}}div>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js">script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            text: "今天就开始使用 Vue.js!",
          };
        },
      });
      app.mount("#vue-app");
    script>
  body>
html>

你可能感兴趣的:(vue.js,javascript,前端)