单HTML中Vue3的使用首先创建HTML文件引入Vue3.JS <script src="https://unpkg

首先创建HTML文件
引入Vue3.JS <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
创建应用

const { createApp, ref, computed, watch, defineComponent } = Vue;
const message = ref("Hello World");

 const app = createApp({
      setup() {
        return {
          RootProps,
        };
      },
    });

    app.mount("#overview");//挂载到id为overview的元素

响应式数据的使用可以直接在全局声明,也可以在setup中声明.只要保证在setup方法返回就行;
组件的使用使用Vue3的API defineComponent 示例如下:

    <template id="MyComponent">
     你好,我是一个简单组件
    </template>

   <script>
   //这里的接收的变量就是 在HTML中使用的标签名
   const MyComponent = defineComponent({
      template: "#MyComponent",
      components: {
        // ChildrensName,
      },
      props: {
        //父级传入的值
        mes: String,
      },
      // setup 函数的第一个参数是组件的 props
      //`setup` 函数的第二个参数是一个上下文对象
      setup(props, context) {
        console.log(props);
      },
    });
   </script>

6: 组件父子传值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
  </head>
  <body>
    <div id="overview">
      {{RootProps}}
      <Parent :mes="RootProps" />
    </div>

    <template id="Parent">
      {{mes}}
      <Children :sub="mes+'阿斯顿撒'" />
    </template>

    <template id="Children">{{sub}}</template>
  </body>
  <script>
    const { createApp, ref, computed, watch, defineComponent } = Vue;

    const Children = defineComponent({
      template: "#Children",
      name: "Children",
      props: {
        sub: String,
      },
      setup(props, context) {
        console.log("我是子组件",props);
      },
    });

    const Parent = defineComponent({
      template: "#Parent",
      components: {
        Children,
      },
      props: {
        mes: String,
      },
      setup(props, context) {
        console.log("我是父组件",props);
      },
    });

    const RootProps = ref("RootProps string");

    const app = createApp({
      components: { Parent },
      setup() {
        return {
          RootProps,
        };
      },
    });

    app.mount("#overview");
  </script>
</html>

内容繁杂,为什么不使拥setup语法题。不能直接这样来吗？
<script setup></script>

答案： <script setup> 是 Vue3 loader 提供的语法糖，实际运行的是编译后的代码，不能直接放到 html 里使用。

引入第三方组件库，如ElementPlus

 <!-- Import style -->
 <link
    rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
  />
  
  <!-- Import component library -->
  <script src="//cdn.jsdelivr.net/npm/element-plus"></script>

创建简单表格


<div id="overview">
      <div class="common-layout">
        <el-container>
          <el-header>Header</el-header>
          <el-main>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="Date"></el-table-column>
              <el-table-column prop="name" label="Name"></el-table-column>
              <el-table-column prop="address" label="Address"></el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </div>
    </div>

注意在浏览器直接引入ElementPlus时,使用组件不能使用单标签; ElementPlus issues #15955 9. 引入Vue-router开启 VueRouter

完整代码如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./elemet.css" />

    <script src=/vue.global.js"></script>
    <script src="/vue-router.js"></script>
    <script src="/element.js"></script>
  </head>
  <body style="height: 100vh; width: 100vw; overflow: hidden">
    <div id="overview">
      <h1>{{WelcomeMessage}}</h1>
      <router-link to="/Home">Go to Home&nbsp;&nbsp;&nbsp;</router-link>
      <router-link to="/TablePage">Go to TablePage</router-link>
      <router-view></router-view>
    </div>
    <template id="TablePage">
      <div class="common-layout">
        <el-container>
          <el-main>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="Date"></el-table-column>
              <el-table-column prop="name" label="Name"></el-table-column>
              <el-table-column prop="address" label="Address"></el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </div>
    </template>
    <template id="HomePage">
      <p style="color: red">我是HomePage</p>
    </template>
  </body>
  <script>
    const { createApp, ref, computed, watch, defineComponent } = Vue;
    const { createRouter, createWebHistory } = VueRouter;
    const WelcomeMessage = ref("Hello Vue App!");

    const tableData = ref([
      {
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
    ]);

    const TablePage = defineComponent({
      template: "#TablePage",
      name: "TablePage",

      setup(props, context) {
        console.log("我是TablePage组件", props);
        return {
          tableData,
        };
      },
    });

    const HomePage = defineComponent({
      template: "#HomePage",
      name: "HomePage",
      setup(props, context) {
        console.log("我是TablePage组件", props);
      },
    });

    const routes = [
      { path: "/Home", component: HomePage },
      { path: "/TablePage", component: TablePage },
    ];
    const router = new createRouter({
      history: createWebHistory(),
      routes,
    });

    const app = createApp({
      setup() {
        return {
          tableData,
          WelcomeMessage,
        };
      },
    });
    app.use(router);
    app.use(ElementPlus);
    app.mount("#overview");
  </script>
</html>

[jcode](https://code.juejin.cn/pen/7345065263701688331)