VueCli3+TypeScript3项目显示Markdown内容

简介: VueCli3+TypeScript3项目显示Markdown内容

版本记录

vue: v2.6.10@vue/cli-plugin-babel: v3.12.0typescript: v3.4.3showdown: v1.9.1

安装 showdown

npm install showdown -D
npm install @types/showdown -D

基础使用

在显示 Markdown 内容的 Component 中引入 showdown

import showdown from 'showdown'
<template>
  <div>
    <div v-html="html" class="center"></div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import showdown from 'showdown'
@Component({
  components: {}
})
export default class Showdown extends Vue {
  private html: string = ''
  private mounted() {
    const converter = new showdown.Converter()
    const markdownContent: string = '# Markdown Title `showdown.js`'
    this.html = converter.makeHtml(markdownContent)
  }
}
</script>

到这一步应该就能看到 Markdown 基本内容显示了,如下图效果

image.png

引入项目中的 md 文件并显示

这里引入项目根目录下的 README.md 文件并显示,使用 import 引入 README.md

import * as readmeContent from '../../../README.md'

控制台报错,提示 Cannot find module '../../../README.md' or its corresponding type declarations

image.png

文件路径路径是正确的,缺少类型声明导致,添加类型声明即可。在 src 目录下的 types.d.ts 文件中添加 declare module "*.md", 如下图效果

image.png

这时候 md 文件引入就没问题了,使用 console.info(readmeContent) 输出看下内容如何,这时候提示模块解析失败

image.png

这个情况需要使用 loader 来处理,分别安装配置 html-loadermarkdown-loader

npm install html-loader markdown-loader -D 

在 vue.config.js 中配置这两个 loader

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ?
    '/vue-vuetify-admin/' : '/',
  outputDir: 'docs',
  // configureWebpack: {
  //   devtool: 'source-map'
  // },
  chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()
  }
}

配置完以后,需要重新执行 npm run dev 运行服务,操作都OK的话这时候页面的控制台就输出了 README.md 的内容,如下图效果

image.png

image.png

在页面中显示 README.md 文件中的内容,调整 makeHTML() 的参数为文件内容参数即可

image.png

注意:<sytle> 标签中没有 scoped 属性, 添加 scoped 属性后页面样式设置会无效

项目链接

github.com/gywgithub/v…

相关文章
|
1月前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
45 0
|
3月前
|
前端开发 JavaScript 测试技术
Vue3+Vite+TypeScript常用项目模块详解(下)
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
|
3月前
|
JavaScript 前端开发 API
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
Vue3+Vite+TypeScript常用项目模块详解
|
3月前
|
JavaScript
Vega-Embed 在 Vue Typescript 项目中引入报错
Vega-Embed 在 Vue Typescript 项目中引入报错
|
4月前
|
JavaScript
Vue TypeScript 项目引导页功能实现
Vue TypeScript 项目引导页功能实现
|
5月前
|
JavaScript
GitHub上的7个热门TypeScript项目
GitHub上的7个热门TypeScript项目
50 0
|
5月前
|
JavaScript 开发者
TypeScript 对大型项目的管理和维护非常有利。具体应用案例解析
TypeScript 对大型项目的管理和维护非常有利。具体应用案例解析
|
6月前
|
移动开发 资源调度
TypeScript+Vite4+Vue3+Pinia+Vant+Axios H5项目环境搭建
TypeScript+Vite4+Vue3+Pinia+Vant+Axios H5项目环境搭建
49 0
|
8月前
|
JavaScript 前端开发
TypeScript深度剖析:Vue项目中应用TypeScript?
TypeScript深度剖析:Vue项目中应用TypeScript?
52 0
|
8月前
|
JavaScript 前端开发 编译器
TypeScript深度剖析:React 项目中应用 TypeScript?
TypeScript深度剖析:React 项目中应用 TypeScript?
72 0