Vue CDN 静态引入

使用场景

前后端不分离的.
不用 Nuxt.js

静态引入

不能打包,使用不了 Vue CLI,Vite 等工具
VueX,Pinia, 路由都使用不了,没有公共的全局变量

项目目录

bash

├── tools
│   ├── tool.js
├── vuebasic
│   ├── elementplus.js
│   ├── index.css
│   ├── vue.global.js
│   ├── zh-cn.js
├── js
│   ├── pageBind
│   │      ├── index.js
│   ├── indexAll
│   │      ├── components
│   │      │   ├── modules
│   │      │   │   ├── HeaderComponent.js
│   │      │   │   └── NavComponent.js
│   │      │   └── index.js
│   │      ├── page
│   │      │   ├── index.js
│   │      ├── index.js
│   └──indexAll.js
└── index.html

index.html

入口文件

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试vue3静态引入和组件共享</title>
    <!--引入elementuiplus-->
    <link rel="stylesheet" href="vuebasic/index.css" />
    <script src="tools/tools.js"></script>
    <script src="js/indexAll.js"></script>
  </head>
  <body>
    <div id="app">
      <el-button type="primary" @click="handleclick"
        >{{message.value}}</el-button
      >
      <headercomponent></headercomponent>
      <navcomponent
        :title="currentUser.name"
        @changetitle="updataname"
      ></navcomponent>
    </div>
  </body>
</html>

tools

这个文件夹下面就是一些工具函数

tools.js

/**
 *
 * @param {string} url - 脚本的 URL
 * @returns {Promise} - 返回一个 Promise，脚本加载成功时 resolve，失败时 reject
 */
function loadScript(url) {
  return new Promise((resolve, reject) => {
    // 1. 创建一个 <script> 元素
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;

    // 2. 设置成功和失败的回调
    script.onload = () => {
      console.log(`${url} 加载成功`);
      resolve(script); // 加载成功，调用 resolve
    };

    script.onerror = () => {
      console.error(`${url} 加载失败`);
      reject(new Error(`Failed to load script at ${url}`)); // 加载失败，调用 reject
    };

    // 3. 将 <script> 元素添加到 <head> 中，浏览器开始下载
    document.head.appendChild(script);
  });
}

vuebasic

这个文件夹下面就是基础的 vue3 ElementPlus 的静态引入文件

vue.global.js

就是引入 vue4

elementplus.js

就是引入 elementplus

index.css

就是引入 elementplus 的样式

zh-cn.js

就是引入 elementplus 的中文语言包

js 文件夹 (最关键)

indexAll.js

三部分加载
1. 加载最基础的 vue3,elementplus,中文语言包
1. 加载页面数据(页面数据和组件数据)
1. 绑定实例

async function init() {
  try {
    // 加载初始vue和elementplus和国际化
    await loadScript(`vuebasic/vue.global.js`);
    await loadScript(`vuebasic/elementplus.js`);
    await loadScript(`vuebasic/zh-cn.js`);
    //加载页面数据和页面组件文件
    await loadScript(`js/indexAll/index.js`);
    // 绑定 实例化
    await loadScript(`js/pageBind/index.js`);
  } catch (error) {
    console.error("脚本加载过程中发生错误:", error);
  }
}
init();

pageBind

绑定页面数据和组件

index.js

/**
 * 初始化Vue应用并挂载到DOM
 * @param {Object} DataAll - 包含Vue应用数据和组件配置的对象
 * @param {Function} [cb=null] - 可选的回调函数
 */
const setVue = (DataAll) => {
  const { createApp } = window.Vue;
  const app = createApp(DataAll.Data);
  // 加入组件
  DataAll.components.forEach((item) => {
    app.component(item.name, item.component);
  });
  // 挂载
  app.use(ElementPlus, { locale: ElementPlusLocaleZhCn }).mount("#app");
};

window.onload = () => {
  const DataAll = {
    // 页面的数据
    Data: PageData,
    // 首页所有的组件汇总  经过本人测试名字绝对不能大写。HTML中组件名称也不能大写 或者大写驼峰法 否则出不来。
    components: [
      {
        name: "headercomponent",
        component: IndexComponent,
      },
      {
        name: "navcomponent",
        component: NavComponent,
      },
    ],
  };
  // 传入数据
  setVue(DataAll);
};

indexAll

页面数据和组件数据

index.js 加载页面数据和组件数据

// 我在这里导出文件需要的所有参数 这样无论是页面 还是components 都不必2次调用
const { ref, defineComponent, computed, watch } = Vue;
async function Pageinit() {
  try {
    // 加载首页数据
    await loadScript(`js/indexAll/page/index.js`);
    // 加载组件
    await loadScript(`js/indexAll/components/index.js`);
  } catch (error) {
    console.error("脚本加载过程中发生错误:", error);
  }
}
Pageinit();

page/index.js

// 首页数据
const PageData = {
  setup() {
    const currentUser = ref({
      name: "点击我改变子元素内容",
    });
    const message = ref({
      value: "点击我",
    });
    const handleclick = () => {
      message.value = {
        value: "这就是新的",
      };
    };
    const updataname = (content) => {
      currentUser.value = {
        name: content,
      };
    };
    return {
      currentUser,
      message,
      handleclick,
      updataname,
    };
  },
};

components/index.js

加载全部组件

async function Componentinit() {
  try {
    await loadScript(`js/indexAll/components/moduels/HeaderComponent.js`);
    await loadScript(`js/indexAll/components/moduels/NavComponent.js`);
  } catch (error) {
    console.error("脚本加载过程中发生错误:", error);
  }
}
Componentinit();

components/moduels/HeaderComponent.js 你自己的组件

const IndexComponent = defineComponent({
  setup() {
    const greet = ref("Hello");
    return {
      greet,
    };
  },
  template: `<div>{{ greet }}</div>`,
});

components/moduels/NavComponent.js 你自己的组件

const NavComponent = defineComponent({
  props: {
    title: {
      type: String,
      default: "", // 设置默认值
    },
  },
  setup(props, { emit }) {
    const greet = computed(() => {
      return props.title;
    });
    // 改变
    const handleClick = () => {
      emit("changetitle", "我改变了");
    };
    return {
      greet,
      handleClick,
    };
  },
  template: `<div @click="handleClick">{{ greet }}</div>`,
});

Vue CDN 静态引入 ​

使用场景 ​

静态引入 ​

项目目录 ​

index.html ​

tools ​

tools.js ​

vuebasic ​

vue.global.js ​

elementplus.js ​

index.css ​

zh-cn.js ​

js 文件夹 (最关键) ​

indexAll.js ​

pageBind ​

indexAll ​

Vue CDN 静态引入

使用场景

静态引入

项目目录

index.html

tools

tools.js

vuebasic

vue.global.js

elementplus.js

index.css

zh-cn.js

js 文件夹 (最关键)

indexAll.js

pageBind

indexAll