Vuep 开源项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00316/article/details/141154137

Vuep 开源项目教程

vuep🎡 A component for rendering Vue components with live editor and preview.项目地址:https://gitcode.com/gh_mirrors/vu/vuep

项目介绍

Vuep 是一个用于渲染 Vue 组件的组件，它提供了一个实时的编辑器和预览功能。用户可以在编辑器中编写 Vue 组件代码，并立即看到预览效果。Vuep 支持在浏览器中直接编辑和预览 Vue 组件，非常适合用于演示和教学场景。

项目快速启动

安装

首先，克隆项目仓库并安装依赖：

git clone https://github.com/QingWei-Li/vuep.git
cd vuep
npm install

运行

启动开发服务器：

npm run dev

使用示例

在 HTML 文件中引入 Vuep 并使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vuep Example</title>
  <link rel="stylesheet" href="//unpkg.com/vuep/dist/vuep.css">
</head>
<body>
  <div id="app">
    <vuep :template="code"></vuep>
  </div>

  <script src="//unpkg.com/vue"></script>
  <script src="//unpkg.com/vuep"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        code: `
          <template>
            <div>Hello {{ name }}</div>
          </template>
          <script>
            module.exports = {
              data: function () {
                return {
                  name: 'Vue'
                }
              }
            }
          </script>
        `
      }
    })
  </script>
</body>
</html>