美文网首页
vitePress练习及总结

vitePress练习及总结

作者: 焚心123 | 来源:发表于2023-08-10 09:40 被阅读0次
  • 文中介绍的都是我使用的一些功能,你也可以多百度下,查找更多的案例,不过看英文文档会更好一点,可点击链接查看
  • 话不多说,先直接下载,当然你也可以直接在你现有的项目中进行下载(要是新项目,要先npm init -y)
npm install -D vitepress

1、在当前的项目根目录新建文件docs(其他名称也行,在packag.json中用到)
2、在当前文件夹下新建一个index.md文件(相当于入口),可先随便写点东西
3、在package.json文件中加入运行,打包,预览等指令(我是在现有的项目中创建的)

"scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "docs:dev": "vitepress dev docs",
        "docs:build": "vitepress build docs",
        "docs:serve": "vitepress serve docs"
    },

4、此时运行npm run docs:dev可查看项目效果
5、接下来我们开始正式的学习吧

  • 在index.md文件中
    • 要想有个入口页面,首页进行一些介绍啥的,看我下面的说明
    • 要是不想有入口页面,就把index.md当成首页直接进行文档的说明也行(不用看下面这一步)
  • 首页入口说明的配置
  • 图片上传不了,简书有bug,直接复制在你本地看效果吧
---
layout: home
title: 文档说明  //----浏览器上的标题
titleTemplate: 一个Vue3二次封装antd组件库    //----浏览器上的说明
hero:
  name: My-antd
  text: Vue3 & vite & antd
  tagline: 二次封装组件库...
  image:
    src: ./public/logo.png
    alt: logo
  actions:
    - theme: brand
      text: 查看文档
      link: /button/
    # - theme: alt
    #   text: View on Gitee
    #   link: https://gitee.com/penk666/penk-ui

features:
  - icon: ⚡️
    title: 说明
    details: 在antd的基础上进行的二次开发组件,进行说明具体的参数及用法,注意当前版本是3.x的,4.x的版本组件中的参数有改动,需要进行替换,3.x中要是报组件v-model:show="show"错误,那是vue语法校验严格,props是单向数据流,不能进行修改,将v-model进行删除,在js中进行监听我们传递的show,然后在重新赋值就可
  - icon: 🖖
    title: 核心
    details: 使用vite工具创建vue3进行项目的开发,有时候会有问题,不知道是版本的问题还是代码中哪里的写法不对,在子组件中使用v-model:show前端会提示错误
  - icon: 🛠️
    title: 介绍
    details: 此文档使用是vitepress进行开发,进行组件的介绍,这里是用的antd3.x的版本,后续升级的话,记得进行更新组件中的文档,这里的参数应该是不会变得。
---
  • 上述代码中有个查看文档的link,这个button是在index.md同级创建的文件夹,相当于是路由,默认跳转到button/index.md,将button修改为你创建的文件就可
  • 顶部展示搜索,右上角展示文档说明或者GitHub链接都需要在config.js中进行配置
  • 在docs目录下新建一个.vitepress文件夹,在当前文件夹下新建一个config.js文件进行配置
  • 在下面代码中我没用到nav,顶部导航,你也可以查看官方文档进行配置
module.exports = {
    title: '组件文档说明',
    description: '使用antd二次封装组件的文档说明',
    themeConfig: {
        docFooter: { prev: '上一篇', next: '下一篇' },
        // 添加搜索框
        // 下面的三个参数直接赋值即可,都是官方基于的固定值
        search: { provider: 'local' }, //顶部展示搜索框的
        footer: {//首页底部说明设置
            message: '当前版权解释权归本人所有',
            copyright: '来源版本为云食堂后台管理组件',
        },
        sidebar: [//左侧菜单栏设置
            {
                text: 'Button',

                items: [
                    {
                        text: '介绍',
                        link: '/button/#介绍',
                    },
                    {
                        text: 'button按钮组件',
                        link: '/button/#button-按钮组件',
                    },
                    {
                        text: 'buttonBar按钮组合组件',
                        link: '/button/#buttonbar-多个按钮组合加分割线',
                    },
                ],
                collapsed: true,
            },
            
        ],
    },
    lastUpdatedText: '最近更新时间',//没啥用
    smoothScroll: true,
};

  • 在说下你项目中如果用到了ui组件库,那就需要在进行注册下,才可以在vitepress中直接使用
  • 在.vitepress文件夹下新建一个theme文件夹,在新建index.js文件,也可以在当前文件夹下新建一个css文件在index.js中进行引入,这个是全局的css文件
  • theme-->index.js(如果你项目中用到了vuex或者pinia也需要进行注册下)
import DefaultTheme from 'vitepress/theme';
import './custom.css';
import Antd from 'ant-design-vue';
import { createPinia } from 'pinia';
const pinia = createPinia();
// 全局antd的css样式
import 'ant-design-vue/dist/antd.css';
export default {
    ...DefaultTheme,
    enhanceApp({ app }) {
        app.use(Antd);
        app.use(pinia);
    },
};
  • 接下来我们就可以直接使用我们项目中的组件啦(页面的写法同vue,不过一个页面只能有一个script标签)
  • 以table组件为例吧,跟index.md同级,当然你可以在新建一个components文件也行,注意config.js的link别写错就行
//这是自定义每个页面底部下一页跳转的路径
---
next:
  text: 'FromLayoutg介绍'
  link: '/fromlayout/#/'

prev:
  text: 'Table介绍'
  link: '/table/#/'
---
<script setup>
    //引入项目中用到的组件及方法
    import MyDatePrick from '../../src/components/input-components/datePrick.vue'
    import { DateUtil } from '../../src/utils/getTime.js';
    import {ref} from 'vue'
    const val = ref('')
   //当前页面用到的事件
   const timeBtn = e=>{
       e.val.forEach((item) => {
           val1.value.push(DateUtil.formatDate(item.$d));
    });
   }
  
</script>
## date `时间、日期、年月选择器`

//html的标签可以这样直接写
<a-space>
<p>单个日期选择</p>
<MyDatePrick :value="val" />
<p class="m-r-20 ">带时间的单个日期选择</p>
<MyDatePrick showTime :value="val" @timeChange="timeBtn"/>

</a-space>
  • 页面右侧会默认给当前页面使用##声明的标题注册一个导航(一般文档的右侧都有,简书图片上传不上去,就不给你们看效果了)

  • 如果对你有帮助,请动动你的小手,点个赞再走吧!

相关文章

  • VitePress新一代建站工具

    VitePress是在Vite上构建的静态网站生成器VitePress is VuePress little br...

  • VitePress : VuePress 下一代框架

    VitePress 是 VuePress 的下一代框架 VuePress应该有人用过,而 VitePress 是 ...

  • 超轻量级静态网站生成器:LightuePress

    LightuePress是一款类似WordPress/VuePress/VitePress/Docsify的静态网...

  • Javascript 编程入门练习

    a.Javascript 基础练习-git项目地址b.Javascrpt 集合练习-git项目地址 总结及学到的知...

  • 总结-MySQL基础篇

    总结:第一周学习mysql的视频学习及课后练习题,重查询,练习不足 select书写顺序: select→dist...

  • 天真的练习

    天真的练习就是只待在自己的舒适区中,只是为了练习而练习,简单重复的做,不去总结、反思及寻求有效指导。不提升自己所练...

  • 2018-11-30

    1、不要担心练习思维变化及模式总结很累,因为人就是得把主要的精力放在改变思维模式这种“刻意练习”上,这才是解决问题...

  • Vitepress编写组件文档

    快速开始 安装依赖 pkg#scripts 目录结构 文档首页 运行npm run docs:dev,效果如下: ...

  • 第28天 20160814 谭丽

    1、今日学习:走路1小时 ,完成了1小时的英语听力;背诵单词70; 2、练习及总结: 2.1字头歌诀法练习: 1)...

  • Linux基础练习及总结2

    1、描述Linux发行版的系统目录名称命名规则以及用途。 /bin 存放所有的用户使用的基本命令,该目录不能独立...

网友评论

      本文标题:vitePress练习及总结

      本文链接:https://www.haomeiwen.com/subject/pdfapdtx.html