怎么将.md文件导入到vue项目中-创新互联
这篇文章将为大家详细讲解有关怎么将.md文件导入到vue项目中,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联是一家专业提供翼城企业网站建设,专注与网站设计制作、成都网站制作、html5、小程序制作等业务。10年已为翼城众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。解决方案
一、vue需要有markdown这样良好的展示效果,什么样的插件是好的?
货比三家,我推荐以下方式
//安装 npm install --save html-loader; npm install -- save markdown-loader; //webpack { test: /\.md$/, loader: "html-loader", }, { test: /\.md$/, loader: "markdown-loader" }
大坑预警:我不知道在哪里抄的配置,一定不要配置option(配置了的话表格 代码 都不能好好转化)
以上真的就完成了转化了。是不是so easy !!! 再来换个皮肤(穿上衣服)
二、一定要引用CSS,找了很多样式真的都特别的丑(当然可以自己写,但是费时间啊)
强烈推荐
npm install github-markdown-css import 'github-markdown-css'; //哪里用markdown 就在哪里引用 可以放在min.js //自己也可以再调整调整 (贡献一版 我们调整的一版样式) .markdown-body { padding: 20px; min-width: 200px; max-width: 900px; font-size: 12px; h3 { font-size: 18px; margin: 1em 0 15px; padding-top: 0.8em; padding-bottom: 0.8em; } h4 { font-size: 14px; margin: 22px 0 16px; } h5 { font-size: 13px; margin: 20px 0 16px; } h6 { font-size: 12px; margin: 16px 0 16px; font-weight: 700; } p { font-size: 12px; line-height: 24px; color: #666666; margin-top: 0px; margin: 8px 0; margin: 14px 0 14px; } pre { background-color: #eee; margin-bottom: 8px; margin-top: 8px; margin: 12px 0 12px; } blockquote { margin-bottom: 8px; margin-top: 8px; margin: 14px 0 14px; background-color: #eee; padding: 16px 16px; } tr { background-color: #f5f5f5; } code { background-color: #eee; } ul, ol, li { list-style: unset; font-size: 12px; line-height: 20px; color: #666666; margin-top: 0px; margin: 8px 0; } blockquote { border-color: #48b6e2; } table { display: table; width: 100%; max-width: 100%; margin-bottom: 20px; } }
三、页面运用(实践检验真理)
页面 //markdown-body 一定要写这个class名
四、最终效果 (表格,代码(缩进完全没有问题)我懒的去写一个实例了)打码勿怪
关于怎么将.md文件导入到vue项目中就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
当前名称:怎么将.md文件导入到vue项目中-创新互联
标题链接:http://scyanting.com/article/doggeh.html