Closed DavidRouyer closed 6 years ago
看来要大神来解决下了
看来这个包已经放弃维护了
放弃维护了么
希望能给出解决方案, 想用vue-cli 3.0的版本创建项目
使用 vue-md-loader 吧
vue-loader 15 的逻辑重构了,不过用下面的用法兼容
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: './index.js',
output: {
filename: 'out.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
// 👇
{
test: /\.md$/,
loaders: ['vue-loader', 'vue-markdown-loader/lib/markdown-compiler.js']
}
// 👆
]
},
plugins: [
new VueLoaderPlugin()
]
}
调整下,应该是下面这样
{
test: /\.md$/,
use: [
{
loader: 'vue-loader'
},
{
loader: 'vue-markdown-loader/lib/markdown-compiler',
options: {
raw: true
}
}
]
}
可是这样的话。vue-markdown-loader 的 options 怎么设置
可是这样的话。vue-markdown-loader 的 options 怎么设置
{
test: /\.md$/,
use: [
{
loader: 'vue-loader'
},
{
loader: 'vue-markdown-loader/lib/markdown-compiler',
options: {
raw: true,
preventExtract: true,
use: [
[
require('markdown-it-container'),
'demo',
{
validate: function(params) {
return params.trim().match(/^demo\s+(.*)$/)
},
render: function(tokens, idx) {
if (tokens[idx].nesting === 1) {
// 1.获取第一行的内容使用markdown渲染html作为组件的描述
let demoInfo = tokens[idx].info
.trim()
.match(/^demo\s+(.*)$/)
let description =
demoInfo && demoInfo.length > 1 ? demoInfo[1] : ''
let descriptionHTML = description
? markdownRender.render(description)
: ''
// 2.获取代码块内的html和js代码
let content = tokens[idx + 1].content
// 3.使用自定义开发组件【DemoBlock】来包裹内容并且渲染成案例和代码示例
return `<demo-block>
<div class="source" slot="source">${content}</div>
${descriptionHTML}
<div class="highlight" slot="highlight">`
} else {
return '</div></demo-block>\n'
}
}
}
]
]
}
}
]
}
Upgrade the dependencies of your package.json like this:
and import the Vue Loader plugin (it's required now) in your webpack.config.js:
You'll get an error like that: Component template requires a root element, rather than just text