Vue 中使用 markdown 和加载.md 文件

首先安装 marked 插件

要能够从外部导入.md 文件，我们还需要给项目安装两个 loader。

还需要做一步，在项目的根路径下创建 vue.config.js (假如没有的话)。

然后在 vue.config.js 文件中加入下面的配置

最后就能正常在组件中导入 helloMarked.md 文件

点击 使用vuePress制作文档-创建项目 具体步骤

我们做了一个ui框架，为了让其他人能更好的看明白这个框架的用法，所以我们才开始制作一个文档。为了更好的描述组件的用法，我们肯定对组件进行更好的展示和描述。

demo中，我创建了两个组件：meng-input 和 meng-nav 

1.可以把md文件当做普通的html去书写，直接写标签即可

2.要将<script></script>标签放到页面顶部，# 标题的下面

3.script中的写法和普通vue的写法一致

# 导航 meng-nav

<script>

    export default {

        data(){

            return{

                iconList:[

                    'icon-xiazai45',

                    'icon-pingjia',

                    'icon-zhuxiao1',

                    'icon-u502',

                    'icon-u51'

                ],

                 navs:['首页','新闻','娱乐','时尚','社会'],

            }

        },

    }

</script>

 <ul class="icon">

        <li v-for="icon in iconList" :key="icon">

            <i class="iconfont" :class="icon"></i>

            <span>{{icon}}</span>

        </li>

 </ul>

<meng-nav :datalist="navs"></meng-nav>

```js

data(){

    return{

            navs:['首页','新闻','娱乐','时尚','社会'],

    }

},

```

```html

<meng-nav  :datalist="navs"></meng-nav>

```

import Vue from 'vue'

//引入element-ui组件，如果没有使用element-ui 可以不用写哦

import Element from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

//引入我自定义组件通用的css样式

import './assets/zzcommon.less'

//引入我自定义组件需要使用的通用方法，并且挂载到vue上

import mengFunc from './utils/mengFunc'

Vue.prototype.mengFunc = mengFunc

//引入自定义组件

import mengInput from './components/mengInput'

import mengNav from './components/mengNav'

const components =[

    mengInput,

    mengNav,

]

//对自定义组件进行统一注册，省的以后每次使用都要注册

components.install = function(Vue, opts = {}) {

    components.forEach((element) => {

      Vue.component(element.name, element)

    })

}

if (typeof window !== "undefined" && Vue) {

    Vue.use(components)

  }

export default ({

    Vue,

}) => {

    Vue.use(Element)

}

---