Vuep을 사용하면 Vuejs의 Live Editor를 간단하게 이동할 수 있습니다

vuep을 사용하면 Vuejs의 Live Editor를 간단하게 만들 수 있습니다. 제가 했던 일을 투고하도록 하세요.
잘못이 있으면 말씀해 주세요.

Vuep

github

https://github.com/QingWei-Li/vuep

공식

Vuep - A component for rendering Vue components with live editor and preview.

이런 느낌으로 움직였어요.

와, 대단해!
제가 실제로 시험해 본 샘플이 여기 있어요.

Installation

yarn add vuep codemirror웹팩으로 이동하니까 설치할 때 이런 느낌이에요

yarn add vue vuep codemirror
yarn add -D webpack webpack-cli webpack-dev-server vue vue-loader vue-template-compiler vue-style-loader css-loader babel-loader @babel/core @babel/preset-env

webpack.config.js

const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
    mode: "development",
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader",
            },
            {
                test: /\.js$/,
                loader: "babel-loader",
            },
            {
                test: /\.css$/,
                use: [
                    "vue-style-loader",
                    "css-loader",
                ],
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ],
    resolve: {
        extensions: [".vue", ".js"],
        alias: {
            "vue$": "vue/dist/vue.esm.js",
            "@": `${__dirname}/src`
        }
    },
    devServer: {
        port: 9000,
        contentBase: __dirname,
        publicPath: "/dist/",
        open: true
    }
}

.babelrc

{ "presets": ["@babel/preset-env"] }

index.html

<!DOCTYPE html>
<meta charset=utf-8>
<title>sample</title>
<script src=dist/main.js defer></script>
<div id=app></div>

시험해 보다

공식을 참고하여 이런 느낌으로 제작index.js과App.vuesrc/index.js

import Vue from "vue"
import Vuep from "vuep"
import "vuep/dist/vuep.css"

import App from "@/App"

Vue.use(Vuep);

new Vue({
    render: h => h(App)
}).$mount("#app");

src/App.vue

<template>
    <vuep :template="code" />
</template>

<script>
export default {
    created() {
    this.code = `
<template>
    <div>Hello, {{ name }}!</div>
</template>

<script>
    module.exports = {
        data: function () {
        return { name: 'Vue' }
        }
    }
<\/script>
    `
  }
}
</script>

yarn webpack-dev-server #http://localhost:9000 で開く

이렇게 하면 움직일 수 있어요.

아니면, index.\"\"에서 템플릿 준비
index.html

<!DOCTYPE html>
<meta charset=utf-8>
<title>sample</title>
<script src=dist/main.js defer></script>
<div id=app></div>

<script v-pre type="text/x-template" id="example">
    <template>
        <div>Hello, {{ name }}!</div>
    </template>

    <script>
        module.exports = {
            data: function () {
                return { name: 'Vue' }
            }
        }
    </script>
</script>

App.vue에서도 이렇게 똑같이 일했다
src/App.vue

<template>
    <vuep template="#example"></vuep>
</template>

어셈블리가 포함된 경우

기본적으로 공식적이지만 이Feature.vue가 라이브 에디터에서 실행될 수 있도록 scope에 포함되면 순조롭게 진행될 것 같습니다.
src/components/Features.vue

<template>
  <div class="features">
    <h3>Features</h3>
    <ul>
      <li v-for="(feature, i) in features" :key="i">
        {{ feature }}
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    props: {
        features: Array
    },
}
</script>

src/App.vue

<template>
    <vuep :value="value" :scope="scope" />
</template>

<script>
import Vue from 'vue'
import Features from "@/components/Features"

export default {
    data() {
        return {
            scope: { Features },
            value: `
<template>
  <div>
    <features :features="features"></features>
  </div>
</template>

<script>
  module.exports = {
    components: {
      Features
    },
    data () {
      return {
        features: [
          'Single File Component',
          'Babel for ES6/JSX/UMD/CommonJS',
          'Scoped style',
          'Customizable JavaScript scope'
        ]
      }
    }
  }<\/script>`
        }
    }
}
</script>

주제 변경

이 주제는 다 쓸 수 있을 것 같아요.

https://codemirror.net/demo/theme.html

src/App.vue

<template>
    <vuep :template="code" :options="{ theme: 'neo' }" />
</template>

<script>
export default {
    created() {
    this.code = `
<template>
    <div>Hello, {{ name }}!</div>
</template>

<script>
    module.exports = {
        data: function () {
        return { name: 'Vue' }
        }
    }
<\/script>
    `
  }
}
</script>

<style>
@import "~codemirror/theme/neo.css";
</style>

<style>에서 사용하고 싶은 테마 import, :options="{ theme: 'neo' }"에서 테마를 변경할 수 있습니다

끝까지 읽어주셔서 감사합니다.m(_ _)m

Reference

이 문제에 관하여(Vuep을 사용하면 Vuejs의 Live Editor를 간단하게 이동할 수 있습니다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/okumurakengo/items/dd755f909295152a8eef

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다