github-markdown-css樣式文件-一般用作文章正文的樣式美化

1.下載到項目中

cnpm i github-markdown-css

2.將樣式放到模塊化vue目錄下,然后在 style中導入

<style scoped lang="less"> @import './github-markdown.css'; </style>

3.在vue腳手架中的 .postcssrc.js文件中加入 exclude: 'github-markdown'   //css樣式文件

 
           
           module.exports = { 
           
           
             // 配置要使用的 PostCSS 插件 
           
           
             plugins: { 
           
           
               // 配置使用 autoprefixer 插件 
           
           
               // 作用：生成瀏覽器 CSS 樣式規則前綴 
           
           
               // VueCLI 內部已經配置了 autoprefixer 插件 
           
           
               // 所以又配置了一次，所以產生沖突了 
           
           
               // 'autoprefixer': { // autoprefixer 插件的配置 
           
           
               //   // 配置要兼容到的環境信息 
           
           
               //   browsers: ['Android >= 4.0', 'iOS >= 8'] 
           
           
               // }, 
           
          
 
           
               // 配置使用 postcss-pxtorem 插件 
           
           
               // 作用：把 px 轉為 rem 
           
           
               'postcss-pxtorem': { 
           
           
                 rootValue ({ file }) { 
           
           
                   return file.indexOf('vant') !== -1 ? 37.5 : 75 
           
           
                 }, 
           
           
            // 配置要轉換的 CSS 屬性
 // * 表示所有 
           
           
                 propList: ['*'], 
           
           
                 exclude: 'github-markdown'   //css樣式文件 
           
           
               } 
           
           
             } 
           
         

4.在需要美化的正文部分加入github-markdown-css樣式文件的  主樣式類名 

markdown-body 生效!!!

  <!-- 文章內容 -->
        <div class="article-content markdown-body"
             v-html='article.content'
             ref="article-content"></div>
        <van-divider>the end</van-divider>
      </div>