因个人需求,部分业务开发需要使用 CDN 形式引入 Vue
进行开发。但是业务逻辑一多,放到一个文件中就很不好维护,所以本项目诞生了。
本项目收集了 Vue
各版本直接引用 .vue
文件作为组件使用的方法。以及提供了一些个人觉得好用的 package config.
🔴 本项目并不能做为一个起手模板直接使用,可以参考自己业务进入对应版本,copy page 进行自定义开发
因业务开发不涉及 SPA 页面跳转,此 Demo 内未包含 Vue Router ,如需要可参考 Vue Router 入门示例
-
http-vue-loader- 仓库现已不维护,但 Vue 3 之前版本依旧可用。(ps: 相对情况下推荐,无需配置。) -
vue3-sfc-loader - http-vue-loader 升级版,支持 Vue 2 and Vue 3
-
UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎
-
vue-demi - 允许同时为 Vue 2 与 Vue 3 编写通用库
-
@vue/composition-api - 用于提供
Composition API
的 Vue 2 插件vue
>= v2.7,将不再需要主动引入此插件,已内置了Composition API
-
VueUse - 实用的
Composition API
工具合集从 v6.0 开始,VueUse 要求
vue
>= v3.2 或@vue/composition-api
>= v1.1 -
Pinia - 符合直觉的 Vue.js 状态管理库
-
iconify - 通用 iconify Web 组件
CDN 模式暂未找到
@unocss/preset-icons
解决方案,暂未接入UnoCSS
环境
-
http-vue-loader
加载的.vue
文件内不支持ESM
的import/export default
等写法,可以使用CJS
导出。(vue3-sfc-loader
据说是可以,但是我并没有尝试过) -
加载组件时不要使用大写字母,否则组件不会注册成功。 推荐使用脊柱命名法
the-name
来注册组件。
<script>
module.exports = {
components: {
'the-name': httpVueLoader('https://www.xxx.xxx/TheName.vue')
}
}
</script>
<template>
<div>
<the-name></the-name>
</div>
</template>
此 Demo 因需兼容多版本 Vue
,需加载自不同 Runtime package
,所以 Demo
中在 utils
文件中自定义了一个 getVueFile
加载方法。
正常开发按对应版本,使用对应加载方法即 ok.