Vue CDN 多页静态引入

使用场景

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

静态引入

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

项目目录

bash

├── images
│   ├── xxx.png
├── css
│   ├── common.css
│   ├── normalize.css
├── tools
│   ├── tool.js
├── vuebasic
│   ├── elementplus.js
│   ├── elementplusicon.js
│   ├── index.css
│   ├── vue.global.js
│   ├── zh-cn.js
│   ├── vueUseShare.js
│   ├── vueUseCore.js
├── js
│   ├── common
│   │      ├── components
│   │      │   ├── HeaderComponent
│   │      │   └── NavComponent.js
│   │      ├── module
│   │      │   ├── home.js
│   │      │   ├── list.js
│   │      │   ├── article.js
│   │      ├── pageAll.js
│   ├── article
│   │      ├── pageBind
│   │      │   ├── index.js
│   │      ├── pageAll
│   │      │   ├── components
│   │      │   │   ├── modules
│   │      │   │   │      └── article自己定义的页面组件.js
│   │      │   │   └── index.js
│   │      │   ├── page
│   │      │   │   └── index.js
│   │      │   ├── index.js
│   ├── home
│   │      ├── pageBind
│   │      │   ├── index.js
│   │      ├── pageAll
│   │      │   ├── components
│   │      │   │   ├── modules
│   │      │   │   │      └── home自己定义的页面组件.js
│   │      │   │   └── index.js
│   │      │   ├── page
│   │      │   │   └── index.js
│   │      │   ├── index.js
├── list.html
├── ....
└── index.html

images

存放的就是图片引入路径就是 images/xxx.png

css

就是 css 样式

vueBasic

不说了,和单页应用一样

tools 工具类

不说了,和单页应用一样

js (重点)

common

components 组件

这里就是引入的公共类组件比如 header,nav,footer 等

module 模块

我这里拿home举例 要是其他页面直接替换home换成article即可

// vue 公共引入
const vue3globalPath = `vuebasic/vue.global.js`;
const elementplusPath = `vuebasic/elementplus.js`;
const elementplusiconPath = `vuebasic/elementplusicon.js`;
const elementpluszhcn = `vuebasic/zh-cn.js`;
// vueuse
const vueUsePath = `vuebasic/vueUseShare.js`;
// vueusecore
const vueuseCorePath = `vuebasic/vueUseCore.js`;
// 公共头部组件
const publicHeaderPath = `js/common/components/HeaderComponent.js`;
// 公共尾部组件
const publicFooterPath = `js/common/components/FooterComponent.js`;
// 加载公共页面路径
const pageAllPath = `js/home/pageAll/index.js`;
// 绑定页面数据
const pageBindPath = `js/home/pageBind/index.js`;
// 页面数据
const PagePath = `js/home/pageAll/page/index.js`;
// 页面组件汇总
const PageComponentPath = `js/home/pageAll/components/index.js`;
// 页面自定义组件
const PageCustomComponent = [
  `js/home/pageAll/components/moduels/BodyComponent.js`,
];

pageAll.js

async function init() {
  try {
    // 加载初始vue和elementplus和国际化
    await loadScript(vue3globalPath);
    await loadScript(elementplusPath);
    await loadScript(elementplusiconPath);
    await loadScript(elementpluszhcn);
    // 加载vueUse
    await loadScript(vueUsePath);
    await loadScript(vueuseCorePath);
    //加载页面数据和页面组件文件
    await loadScript(pageAllPath);
    // 绑定 实例化
    await loadScript(pageBindPath);
  } catch (error) {
    console.error("脚本加载过程中发生错误:", error);
  }
}
init();

home

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);
  });
  // 加入图标
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
  }
  // 挂载
  app.use(ElementPlus, { locale: ElementPlusLocaleZhCn });
  app.mount("#app");
};

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

pageAll/index.js

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

pageAll/components/index.js

async function Componentinit() {
  try {
    // 加载公共头部
    await loadScript(publicHeaderPath);
    // 加载自定义
    PageCustomComponent.forEach(async (item) => {
      await loadScript(item);
    });
    // 加载公共尾部
    await loadScript(publicFooterPath);
  } catch (error) {
    console.error("脚本加载过程中发生错误:", error);
  }
}
Componentinit();

pageAll/components/modules/BodyComponent.js

你自己定义的组件

const BodyComponent = 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>`,
});

pageAll/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,
    };
  },
};

home.html

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页模板</title>
    <!--初始化-->
    <link rel="stylesheet" href="css/normalize.css" />
    <!--elementuipluscss-->
    <link rel="stylesheet" href="vuebasic/index.css" />
    <link rel="stylesheet" href="css/theme.css" />
    <!--头部和尾部css-->
    <link rel="stylesheet" href="css/common.css" />
    <!--页面级别css-->
    <link rel="stylesheet" href="css/index.css" />
    <script src="tools/tools.js"></script>
    <script src="js/common/module/home.js"></script>
    <script src="js/common/pageAll.js"></script>
  </head>
  <body>
    <div id="app">
      <headercomponent></headercomponent>
      <bodycomponent title="haha"></bodycomponent>
      <footercomponent></footercomponent>
    </div>
  </body>
</html>

总结

其他模块同 home 模块
common 就是公共

里面三级公共组件 ,模块名常量,pageAll.js 加载全部 js

js 里面就分成各个模块,对应各自的数据

Vue CDN 多页静态引入 ​

使用场景 ​

静态引入 ​

项目目录 ​

images ​

css ​

vueBasic ​

tools 工具类 ​

js (重点) ​

common ​

home ​

home.html ​

总结 ​