使用vuePress制作文档2-md中使用vue

Posted 2023-04-23

参考技术A 点击 使用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);

vuepress中的IMG没有显示

【中文标题】vuepress中的IMG没有显示

【英文标题】：IMG in vuepress is not showing

【发布时间】：2019-06-12 21:58:34

【问题描述】：

我尝试学习 Vuepress，我需要知道如何将图像添加到文档中。

我尝试了 vuepress ![An image](images/image.png) 文档中的代码，但什么也看不到

我尝试在 frontend.md 中使用的代码非常简单

# Title

![An image](images/image.jpg)

这是该代码的结果

【参考方案1】：

建议您reference any asset using relative URLs。您可以将图像移动到内容文件夹中：

content
  frontend.md
  assets
    images
      image.jpg

然后在frontend.md中使用相对URL引用：

![An image](./assets/images/image.jpg)