vitePress练习及总结
2023-08-10 本文已影响0人
焚心123
- 文中介绍的都是我使用的一些功能，你也可以多百度下，查找更多的案例，不过看英文文档会更好一点,可点击链接查看
- 话不多说，先直接下载，当然你也可以直接在你现有的项目中进行下载（要是新项目，要先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>
-
页面右侧会默认给当前页面使用##声明的标题注册一个导航（一般文档的右侧都有，简书图片上传不上去，就不给你们看效果了）
-
如果对你有帮助，请动动你的小手，点个赞再走吧！
