/vue_blog

使用vue编写的blog网站，使用node编写的后台。包括markdown文章解析上传，使用标签筛选文章等

Primary LanguageVue

dd

功能演示

dd

上传演示

dd

vue-cli 快速安装

vue init webpack 项目名

element-ui

  • 安装
npm i element-ui -S
  • 按需加载
npm install babel-plugin-component -D

.babelrc 修改为:

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

markdown 文件引入

文件引入需要 loader, 这里使用 markdown-loader 和 html-loader

npm i markdown-loader --save
npm i html-loader --save

在 build/utils 文件的styleLoaders函数末尾中添加一段代码

output.push({
    test: /\.md$/,
    use: [
      {
        loader: "html-loader"
      },
      {
        loader: "markdown-loader",
        options: {
          /* your options here */
        }
      }
    ]
)}

配置完成之后, 正常引入即可获取解析之后的 html

<template>
  <div>
    <div v-html="result" />
  </div>
</template>
<script>
  import result from '../../test.md';
  export default {
    data() {
      return {
        result
      };
    }
  };
</script>

解析 markdown 数据

将 #标题 解析成 <h1>标题</h1>, 需要引入一个新的包 marked

npm i marked --save
marked("#标题");

代码高亮

npm i highlight.js --save

highlight.js的.js不能少

  • 使用方法
<script>
import hljs from "highlight.js";
import "highlight.js/styles/googlecode.css";

const highlightCode = () => {
  const preEl = document.querySelectorAll("pre");
  preEl.forEach(el => {
    hljs.highlightBlock(el);
  });
};

export default {
  name:'test',
  data() {
    return {

    };
  },
  mounted() {
    highlightCode();
  },
  updated() {
    highlightCode();
  },
  components: {
    Upload
  }
};
</script>