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>