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

这里是我写的一个demo，如果没有耐心看下面的文字，可以直接拿去改改就用：

使用vuePress制作的一个文档demo

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

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

---

1.md文件内容

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>

```

2.enhanceApp.js 代码

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);

}