xinlei3166 / vuepress-plugin-demoblock-plus

一个基于 Vuepress 2.x 的插件,它可以帮助你在编写文档的时候增加 Vue 示例。
https://xinlei3166.github.io/vuepress-demo/
MIT License
29 stars 12 forks source link

大佬请教一下,setup下使用import引入的时候报错,是否还需要配置什么? #2

Closed wraptor closed 3 years ago

wraptor commented 3 years ago

markdown内容如下

:::demo
```vue
<template>
    <el-button>按钮</el-button>
</template>
<script setup>
import {ElMessage} from "element-plus"

</script>

其中按钮能够渲染出来,但是加了import引入后,就报错了,错误内容如下 image

[plugin:vite:vue] Transform failed with 1 error:
/Users/wraptor/workspace/private/climb/docs/.vuepress/.temp/pages/form/rule.html.vue:19:11: error: Unexpected "{"
/Users/wraptor/workspace/private/climb/docs/.vuepress/.temp/pages/form/rule.html.vue:19:11
Unexpected "{"
17 |  }
18 |    
19 |      import {ElMessage} from "element-plus"
   |             ^
20 |  
21 |
    at failureErrorWithLog (/Users/wraptor/workspace/private/climb/node_modules/esbuild/lib/main.js:1493:15)
    at /Users/wraptor/workspace/private/climb/node_modules/esbuild/lib/main.js:1282:29
    at /Users/wraptor/workspace/private/climb/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/Users/wraptor/workspace/private/climb/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/Users/wraptor/workspace/private/climb/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (events.js:400:28)
    at addChunk (internal/streams/readable.js:290:12)
    at readableAddChunk (internal/streams/readable.js:265:9)
    at Socket.Readable.push (internal/streams/readable.js:204:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:188:23
xinlei3166 commented 3 years ago

@wraptor

这个插件主要是针对自己的组件库来使用的,第三方的组件库直接导入使用即可。

在 .vuepress/clientAppEnhance.js 文件中加入以下代码:

import { defineClientAppEnhance } from '@vuepress/client'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

export default defineClientAppEnhance(({
  app,
  router,
  siteData,
}) => {
  app.use(ElementPlus)
})

使用的时候,不用导入element组件,直接使用即可:

<template>
  <div class="card-wrap">
    <div class="card">{{ title }}</div>
    <el-button type="primary">提交亚</el-button>
  </div>
</template>

<script>
export default defineComponent({})
</script>
wraptor commented 3 years ago

使用组件上没问题,但是使用 Githubissues.

  • Githubissues is a development platform for aggregating issues.