vue引入markdown文件

项目完整代码

github vue-markdown

1. 创建一个vue项目

vue create mdVue

因为我的示例在整个vue项目中，需要下载相应的依赖

yarn add vue-router

用到less编写样式

yarn add --dev less less-loader

用到iview的页面布局

yarn add iview

可以引入md文件

yarn add vue-markdown-loader

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import iView from 'iview'

import 'iview/dist/styles/iview.css'
// 基本样式
import './assets/css/base.less'

// markdown文档样式
import './assets/css/markdown.less'

// markdown代码块-高亮
import 'highlight.js/styles/github.css'

import router from './router'

Vue.config.productionTip = false

Vue.use(VueRouter)
Vue.use(iView)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

新建pages文件夹，里面新建一个Markdown.md文件

markdown.md
因为和博客markdown语法冲突，就截图了，，可以自己随便写点markdown的语法内容

在根目录下新建一个vue.config.js文件，配置我们md文件

odule.exports = {
  chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        raw: true
      })
  }
}

修改我们的app.vue

<template>
	<div id="app">
		<div class="layout">
			<Layout>
				<Sider breakpoint="md" collapsible :collapsed-width="78">
					<Menu active-name="1-1" theme="dark" width="auto">
						<MenuItem name="1-1" to="/markdown">
						<Icon type="ios-navigate"></Icon>
						<span>引用md文件</span>
						</MenuItem>
						<MenuItem name="1-2" to="/md-document">
						<Icon type="ios-search"></Icon>
						<span>组件文档</span>
						</MenuItem>
					</Menu>
					<div slot="trigger"></div>
				</Sider>
				<Layout>
					<Header class="layout-header-bar"></Header>
					<Content :style="{margin: '20px', background: '#fff', minHeight: '220px'}">
						<div class='markdown-contain'>
							<router-view />
						</div>
					</Content>
				</Layout>
			</Layout>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {

		}
	},
	computed: {

	}
}
</script>
<style lang="less">
.layout {
	border: 1px solid #d7dde4;
	background: #f5f7f9;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	height: 100%;
	.ivu-layout {
		height: 100%;
		.layout-header-bar {
			background: #fff;
			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
		}
	}
}

.menu-item span {
	display: inline-block;
	width: 100px;
	vertical-align: bottom;
	transition: width 0.2s ease 0.2s;
}
.menu-item i {
	transform: translateX(0px);
	transition: font-size 0.2s ease, transform 0.2s ease;
	vertical-align: middle;
	font-size: 16px;
}
.collapsed-menu span {
	width: 0px;
	transition: width 0.2s ease;
}
.collapsed-menu i {
	transform: translateX(5px);
	transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
	vertical-align: middle;
	font-size: 22px;
}
</style>

这是因为要引用iview的布局，看起来比较清晰

编写我们的markdown文档的样式，因为本身是没有样式的，我们可以写点简单的样式，，也可以去下载样式，这里就不多说了

assets文件里面新建css文件夹，添加markdown.less

.markdown-contain {
  height: calc(100vh - 110px);
  overflow-y: auto;
  margin: 0 10px 10px 10px;

  table {
    font-size: 12px;
    width: 100%;
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    font-family: Consolas, Menlo, Courier, monospace;

    th,
    td {
      border: 1px solid #e9e9e9;
      padding: 8px 16px;
      text-align: left;
    }

    th {
      background: #f7f7f7;
    }
  }

  h1 {
    padding: 10px 0;
  }

  h2 {
    padding: 10px 0;
    font-weight: 400;
    font-size: 20px;
  }

  h3 {
    font-weight: 400;
    font-size: 18px;
  }

  blockquote {
    display: block;
    padding: 16px;
    margin: 0 0 24px;
    border-left: 8px solid #dddfe4;
    background: #eef0f4;
    overflow: auto;
    word-break: break-word !important;

    p {
      font-size: 14px;
      line-height: 22px;
      color: #999;
      font-weight: 400;
      margin-bottom: 0;
    }
  }

  pre {
    background-color: #f8f8f8;
    border-radius: 5px;
    border: 1px solid #e9e9e9;
    padding: 20px;
    overflow-x: auto;
    margin: 10px 0;
  }
}

还要在路由中引入我们的md文件
新建router文件夹，新建index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Markdown from '../pages/Markdownit.md'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: 'markdown',
      component: Markdown
    }
  ]
})

这样项目都建完了，运行我们的项目

yarn serve

我们就能看到md文件可以在页面中展示，也可以作为组件