1.0.0 • Published 1 year ago

vue2-sfc-template v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Vue2 + JS + Webpack For SFC template

Vue2SfcTemplate

支持 Vue 2 的 Vue.js 单文件组件模板示例。

功能

  • 为 Vue2 提供库模式的开发环境
  • 在发布时用于适配 package.json 的脚本

使用模板

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

npx degit tudan110/vue2-sfc-template my-component

并将 vue2-sfc-template 和 Vue2SfcTemplate 全局替换为您的组件库名称。

安装

确保先安装依赖：

# sh
npm install

开发

启动开发服务：

npm run dev

构建

构建库用于生产或发布：

npm run lib

构建示例项目用于生产或发布：

npm run build

检查并修复文件

npm run lint

发布包到 npm

登录 npm 库

npm login

发布

npm publish --access public

如何使用 lib 文件？

npm 安装

npm i vue2-sfc-template

全局导入

在 main.js 中导入并注册组件

import Vue from 'vue'
import Vue2SfcTemplate from 'vue2-sfc-template'

Vue.use(Vue2SfcTemplate)

手动导入

import Vue2SfcTemplate from 'vue2-sfc-template'

export default {
    components: {
        Vue2SfcTemplate
    }
}

不使用构建工具或通过 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://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 确保你的当前目录有该产物 -->
    <script src="/lib/vue2-sfc-template.umd.js"></script>
    <style>
        #app {
            font-family: Avenir, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-align: center;
            color: #2c3e50;
            margin-top: 60px;
        }
    </style>
</head>
<body>
<div id="app">
    <vue2-sfc-template></vue2-sfc-template>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app'
    })
</script>
</html>

License

Made with ❤️

Published under MIT License.

vue2-sfc-template
core-jsvue
1.0.0

1 year ago