根据之前的搭建的项目，编写一个在线文档，方便使用，目前只写了部分组件，有时间会继续写。 预览地址：wangjiaqi123456.gitee.io/destiny-ui-…
初始化项目
1.创建目录 destiny--ui-blog
2.初始化项目
npm init
3.安装vuepress
npm install -D vuepress //安装vuepress
4.根目录创建dos文件夹，dos文件夹下创建README.md文件
5.在package.json配置scripts
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "vuepress dev docs",
"build": "vuepress build docs",
},
6.启动项目
npm run dev
此时你就得到了一个基础的文档模型
基础配置
基础配置
在dos文件夹下创建.vuepress文件夹，在.vuepress文件夹下创建config.js配置文件
module.exports = {
title: '文档标题',
description: '文档描述'
}
导航栏
修改config.js
module.exports = {
title: '文档标题',
description: '文档描述',
themeConfig: {
// 顶部导航
nav: [
{ text: '首页', link: '/',icon:'reco-home' },
{
text: 'destinys-ui 文档',
items: [
{ text: '掘金', link: 'https://juejin.cn/user/896842287549703' }
]
}
],
}
}
侧边栏
在dos文件夹下新建guide文件夹，在guide文件夹新建installation.md文件
### 通过 npm 进行安装
```
npm i destinys-ui -S
```
通过sidebar配置侧边栏
module.exports = {
title: '文档标题',
description: '文档描述',
themeConfig: {
// 顶部导航
nav: [
{ text: '首页', link: '/',icon:'reco-home' },
{
text: 'destinys-ui 文档',
items: [
{ text: '掘金', link: 'https://juejin.cn/user/896842287549703' }
]
}
],
}
// 侧边栏
sidebar: [
{
title: '文档说明',
path: '/',
collapsable: false, // 不折叠
children: [
{ title: "介绍", path: "/" }
]
},
{
title: '使用指南',
path: '/guide/installation',
collapsable: false, // 不折叠
children: [
{ title: "安装", path: "/guide/installation" },
]
},
],
}
使用主题
这里使用的是reco主题
npm install vuepress-theme-reco --save-dev
config.js中使用
module.exports = {
theme: 'reco'
}
添加文章信息
在md文件中添加
---
title: 标题
---
设置语言
module.exports = {
locales: {
'/': {
lang: 'zh-CN'
}
},
}
开始目录结构
module.exports = {
themeConfig: {
subSidebar: 'auto'
}
}
配置主题颜色
.vuepress/styles/palette.styl
$accentColor = #3eaf7c // 主题颜色
$textColor = #2c3e50 // 文本颜色
$borderColor = #eaecef // 边框线颜色
$codeBgColor = #282c34 // 代码块背景色
$backgroundColor = #ffffff // 悬浮块背景色
$nprogressColor = green //进度条颜色
自定义修改样式
.vuepress/styles/index.sty
具体的标签样式可以打开控制台查看（相当于设置全局样式）
//设置table th宽度
table th {
width:20%
}
.de_message{
z-index:9999;
}
高级配置
文档示例代码块
1.安装
npm i vuepress-plugin-demo-container --save-dev
2.配置 .vuepress/config.js
module.exports = {
plugins: ['demo-container']
}
3.使用
::: demo
```html
<template>
<div>
我是示例内容
</div>
</template>
<script>
export default {
data() {
return {
};
},
};
</script>
```
:::
使用UI库
1.安装
npm run destiniys-ui
2.配置 .vuepress/enhanceApp.js
import DestinydUi from 'destinys-ui';
import 'destinys-ui/dist/destinys-ui.css';
export default ({ Vue, options, router }) => {
Vue.use(DestinydUi);
};
到这里基本的页面都搭建完了，后续工作就是编写组件了
部署
这里我就部署到gitee为例
1.gitee新建仓库，仓库名destiny-ui-blog
2.配置 config.js
module.exports = {
base: '/destiny-ui-blog/',
}
3.为了发布方便，新建一个脚本文件 根目录下 deploy.sh
提示：只需要把git@gitee.com:wangjiaqi123456/destiny-ui-blog.git替换为你的git项目地址即可
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run build
# 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@gitee.com:wangjiaqi123456/destiny-ui-blog.git master:gh-pages
cd -
4.执行命令
npm run deploy
5.将gitee上的项目发布到pages页就可以了 （不会的自行百度）
\
