Skip to content

Latest commit

 

History

History
90 lines (67 loc) · 1.81 KB

README.zh-CN.md

File metadata and controls

90 lines (67 loc) · 1.81 KB
Raw

Vue-Demi + TS + Vite For SFC template

同时支持 Vue 2 & 2.7 & 3 的 Vue.js 单文件组件模板示例。

English | 简体中文

功能

  • 为 Vue2.6/2.7/3 提供库模式的开发环境
  • 为 Vue2/3 提供库模式的测试/构建环境
  • 提供 Vue2.7/3 库模式的 dts 解决方案（Vue 2.6 仅部分支持）
  • 在发布时用于适配 package.json 的脚本

使用模板

要直接使用此模板，请执行以下命令:

npx degit ChuHoMan/vue-demi-component-template my-component

并将 vue-demi-component-template 和 VueDemiComponentTemplate 全局替换为您的组件库名称。

安装

确保先安装依赖：

# pnpm
pnpm install

开发

启动开发服务：

# Vue 2.6.x
pnpm run dev:2
# Vue 2.7.x
pnpm run dev:2.7
# Vue 3
pnpm run dev:3

构建

构建库用于生产或发布：

# build all versions
pnpm run build

如何使用 dist 文件？

不使用构建工具或通过 CDN 引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>
    <!-- 确保你的当前目录有该产物 -->
    <script src="/dist/v3/index.umd.js"></script>
  </head>
  <body>
    <div id="app">
        <vue-demi-template-component></vue-demi-template-component>
    </div>
  </body>
  <script>
    const app = Vue.createApp({})
    app.use(VueDemiTemplateComponent)
    app.mount('#app')
  </script>
</html>

License

Made with 💙

Published under MIT License.