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…

目录
相关文章
|
11天前
|
设计模式 监控 JavaScript
TypeScript 在大型项目内网管理监控软件中的结构优化
本文探讨了 TypeScript 在大型项目内网管理监控软件中的结构优化,包括模块划分与组织、接口与抽象类的使用以及依赖注入与控制反转的设计模式,通过具体代码示例展示了这些技术的应用,提高了代码的可读性、可维护性和灵活性。
25 3
|
8天前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
16天前
|
JavaScript 前端开发 测试技术
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
23 1
|
4月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
3月前
|
JavaScript 前端开发 测试技术
TypeScript逆袭!大型项目为何对它情有独钟?揭秘背后的真相!
【8月更文挑战第27天】随着前端领域的快速发展,JavaScript已成为Web开发的核心语言。然而,在处理大型项目时,其弱类型特性导致的维护困难和易错性等问题日益突出。为解决这些问题,TypeScript应运而生,逐渐成为大型项目的首选方案。
36 3
|
4月前
|
JavaScript 前端开发 IDE
React 项目中有效地使用 TypeScript
React 项目中有效地使用 TypeScript
|
3月前
|
JavaScript 前端开发 安全
TypeScript在项目中应用
【8月更文挑战第4天】TypeScript在项目中应用
36 0
|
5月前
|
监控 JavaScript 前端开发
如何在现有的 JavaScript 项目中渐进式地采用 TypeScript
【6月更文挑战第13天】TypeScript,JavaScript的超集,引入静态类型和更多特性,提升代码安全性和可读性。在JavaScript项目中渐进式采用TypeScript可从新模块开始,逐步转换代码,编写.d.ts文件支持第三方库,配置编译选项,并编写测试用例。通过监控和评估,改善项目质量和效率。大型项目尤其受益于TypeScript的类型安全、社区支持和工具兼容性。
67 3
|
5月前
|
JavaScript 安全 IDE
对于大型项目,TypeScript的优势有哪些?
【6月更文挑战第1天】对于大型项目,TypeScript的优势有哪些?
43 6
|
5月前
|
JSON API 开发工具