小米商城实战vue项目 05 父组件About.vue和其子组件开发

在对应的文件夹下，创建空文件

接着来写About.vue

<template>
  <div class="about" id="about" name="about">
    <div class="about-header">
      <div class="about-title">
        <i class="el-icon-tickets" style="color: #ff6700;"></i>
        关于我们
      </div>
    </div>
    <div class="about-content">
      <MyMarkdown></MyMarkdown>
    </div>
  </div>
</template>
<script> 
import MyMarkdown from "../components/MyMarkdown";
export default { 
  components: {
    MyMarkdown
  }
};
</script>
<style scoped>
.about {
  background-color: #f5f5f5;
}
.about .about-header {
  height: 64px;
  background-color: #fff;
  border-bottom: 2px solid #ff6700;
}
.about .about-header .about-title {
  width: 1225px;
  margin: 0 auto;
  height: 64px;
  line-height: 64px;
  font-size: 28px;
}
.about .content {
  padding: 20px 0;
  width: 1225px;
  margin: 0 auto;
}
.about .content .goods-list {
  margin-left: -13.7px;
  overflow: hidden;
}
.about .about-content {
  width: 1225px;
  margin: 0 auto;
  background-color: #fff;
}
</style>

解释：

对于其中的样式，可以根据自己来修改，我就不多讲；

接着我们可以着手MyMarkdown.vue子组件的开发：

在这个子组件中，我们涉及到vue-markdown；

vue-marodown是一款使用marked和highlight.js开发的一款markdown编辑器，主要包括三个部分

1. 简单版编辑器，左侧文本输入框使用textarea实现；
2. 专业版编辑器，左侧输入框使用codemirror实现；
3. markdown预览组件，可单独使用。

上面只是文档说明，

我建议注意导入：

NPM

$ npm install --save vue-markdown

Yarm

$ yarn add vue-markdown --save

选择NPM安装后，

我们项目的package.json就存在了这个包，我们应用它；

MyMarkdown.vue

<template>
  <div id="my-markdown" class="markdown-body">
    <vue-markdown :source="md"></vue-markdown>
  </div>
</template>

<script>
import VueMarkdown from "vue-markdown";
export default {
  name: "MyMarkdown",
  components: {
    VueMarkdown
  },
  data() {
    return {
      md: ""
    };
  },
  created() {
    // 从后端请求README.md
    this.$axios
      .get("/api/public/docs/README.md", {})
      .then(res => {
        this.md = res.data;
      })
      .catch(err => {
        return Promise.reject(err);
      });
  }
};
</script>
<style>
@import "../assets/css/github-markdown.css";
.markdown-body {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 40px;
}
</style>

因为项目比较赶，所以参考一下别人的轮子，加快开发，不懂可以私信我！！