這篇文章將為大家詳細(xì)講解有關(guān)怎么將.md文件導(dǎo)入到vue項(xiàng)目中，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)是一家專業(yè)提供翼城企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作、html5、小程序制作等業(yè)務(wù)。10年已為翼城眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

解決方案

一、vue需要有markdown這樣良好的展示效果，什么樣的插件是好的？

貨比三家，我推薦以下方式

//安裝
npm install --save html-loader;
npm install -- save markdown-loader;

//webpack
 {
   test: /\.md$/,
   loader: "html-loader",
 },
 {
   test: /\.md$/,
   loader: "markdown-loader"
 }

大坑預(yù)警：我不知道在哪里抄的配置，一定不要配置option（配置了的話表格 代碼 都不能好好轉(zhuǎn)化）

以上真的就完成了轉(zhuǎn)化了。是不是so easy ！??！ 再來(lái)?yè)Q個(gè)皮膚（穿上衣服）

二、一定要引用CSS，找了很多樣式真的都特別的丑（當(dāng)然可以自己寫，但是費(fèi)時(shí)間?。?/h4>

強(qiáng)烈推薦

npm install github-markdown-css
import 'github-markdown-css'; //哪里用markdown 就在哪里引用 可以放在min.js

//自己也可以再調(diào)整調(diào)整 (貢獻(xiàn)一版 我們調(diào)整的一版樣式)
.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;
 }
}

三、頁(yè)面運(yùn)用（實(shí)踐檢驗(yàn)真理）

頁(yè)面

四、最終效果 （表格，代碼（縮進(jìn)完全沒(méi)有問(wèn)題）我懶的去寫一個(gè)實(shí)例了）打碼勿怪

關(guān)于怎么將.md文件導(dǎo)入到vue項(xiàng)目中就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享題目：怎么將.md文件導(dǎo)入到vue項(xiàng)目中-創(chuàng)新互聯(lián)
新聞來(lái)源：http://weahome.cn/article/doggeh.html