fengyuanchen / markdown-to-vue-loader Goto Github PK
View Code? Open in Web Editor NEWMarkdown to Vue component loader for Webpack.
Home Page: https://fengyuanchen.github.io/markdown-to-vue-loader
License: MIT License
Markdown to Vue component loader for Webpack.
Home Page: https://fengyuanchen.github.io/markdown-to-vue-loader
License: MIT License
this.getOptions is not a function
期望适配sass等预编译语言
看了下,好像无法动态演示。是不是只是将HTML渲染出来而已,比如说双向流数据变化等无法体现出来。而且用的是template,不是render。感觉只完成了一部分。作者是否考虑过动态演示?
I get an Error compiling template when I try to run this example. I am using Webpack 4.
The full stack trace:
ERROR in ./src/markdown.md?vue&type=template&id=fe0ebb70 (../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../node_modules/vue-loader/lib!../node_modules/markdown-to-vue-loader/dist!./src/markdown.md?vue&type=template&id=fe0ebb70)
(Emitted value instead of an instance of Error)
Error compiling template:
<div class="markdown"><h1>Hello</h1>
<p><code><span>{{sss}}</span></code></p>
<blockquote>
<p>This is test.</p>
</blockquote>
<ul>
<li>How are you?</li>
<li>Fine, Thank you, and you?</li>
<li>I’m fine, too. Thank you.</li>
<li>🌚</li>
</ul>
<pre v-pre=""><code class="language-javascript">import Vue from 'vue'
Vue.config.debug = true
</code></pre>
<div class="test">
{{ model }} test
</div>
<p><compo>{{ model }}</compo></p>
<div class="abc" @click="show = false">
啊哈哈哈
</div>
<blockquote>
<p>All script or style tags in html mark will be extracted.Script will be excuted, and style will be added to document head.
Notice if there is a string instance which contains special word “</script>”, it will fetch a SyntaxError.
Due to the complexity to solve it, just don’t do that.</p>
</blockquote>
<component-markdown-1></component-markdown-1><pre v-pre=""><code class="language-html"><style scoped>
.test {
background-color: green;
}
</style>
<style scoped>
.abc {
background-color: yellow;
}
</style>
<script>
let a=1<2;
let b="<-forget it-/script>";
console.log("***This script tag is successfully extracted and excuted.***")
module.exports = {
components: {
compo: {
render(h) {
return h('div', {
style: {
background: 'red'
}
}, this.$slots.default);
}
}
},
data () {
return {
model: 'abc'
}
}
}
</script>
jjjjjjjjjjjjjjjjjjjjjj
<template>
<div></div>
</template>
</code></pre>
<div>
</div>
<p>sadfsfs</p>
<p>大家哦哦好啊谁都发生地方上的冯绍峰s</p>
<blockquote>
<p>sahhhh</p>
</blockquote>
<p><compo>{{ model }}</compo></p>
<component-markdown-2></component-markdown-2><pre v-pre=""><code class="language-html"><compo>{{model }}{{model }}{{model }}{{model }}{{ model }}</compo>
</code></pre>
<style src="./custom.css"></style>
<h2>引入 style 文件</h2>
<div class="custom">
原谅色
</div>
</div>
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.
@ ./src/markdown.md?vue&type=template&id=fe0ebb70 1:0-240 1:0-240
@ ./src/markdown.md
@ ../node_modules/babel-loader/lib??ref--5-0!../node_modules/vue-loader/lib??vue-loader-options!./src/app.vue?vue&type=script&lang=js
@ ./src/app.vue?vue&type=script&lang=js
@ ./src/app.vue
@ ./src/entry.js
@ multi ../node_modules/webpack-dev-server/client?http://localhost:8888 webpack/hot/dev-server ./src/entry.js
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.