如何用VuePress构建类型元素ui文档

网站成就风格

项目编写步骤

Github地址：https://github.com/xuhuihui/dataCom

官方网站：http://caibaojian.com/vuepress/guide/getting-started.html

参考文章：https://www.jb51.net/article/156259.htm

前言：我先从git clone官方github开始，运行一下看看完整的效果。然后根据官网的介绍和参考文章，结合完整的代码，一步步配置内容。最后，参考元素的设计风格，修改并添加代码，形成平台构件库网站。

(1)安装在现有项目中

# install for local dependency NPM install-D vupress #创建一个docs目录mkdir docs#创建一个markdown文件echo ' # hello vue press ' docs/readme . MD #添加一些脚本到package . JSON:{ ' scripts ' : { ' docs 3360 dev ' 3360 ' vue press dev docs '，' docs 3360 build ' 3360 ' vue press build docs ' } #运行项目纱线运行docs:dev，显示文档乱码，如图

解决方案：将md文件编码修改为UTF-8

按如下方式更改md文件的内容：

-home: trueactiontext:转到action link :/base components/features :-title :布局类组件详细信息：基本组件，提供对常见组件的快速便捷访问。可用组件-标题：可视化组件详细信息：积累可视化数据的业务组件-标题：知识库详细信息：积累前端相关知识，涵盖与vue、react、koa2和nodejs-(2)配置文件相关的知识点

配置(参考链接：http://caibaojian.com/vuepress/config/)vue press站点的基本文件是vuepress/config.js，其中导出了一个JavaScript对象：

模块。exports={title :' datacom '，//设置网站标题description: '只是为了好玩'，//描述dest3360 '。/dist '，//设置输出目录端口： 2233，//端口主题配置： {//主题配置//添加导航栏nav: [{text: '主页'，link: '/' }，//导航栏{text3360 '组件文档'，link: '/baseComponents/'}，{text: '知识库'，link:'/knowledge/'}，{ text 3: ' gititems :[{ text: ' focus-outer '，link : ' https://github.com/Tao xushing/focus-outer ' }，{ text : '手写笔-converter '，link : ' https://github.com/Tao xushing/手写笔-converter'}，]}，//为添加侧边栏sidebar 3: { '/base components/' 3:[{ title 3: ' layout class components '可折叠3360 true，children: ['base/test1 '，' base/test2 '，' base/test3 '，' base/test4 '，]}，{title : '可视化组件'，可折叠3360 true，Children: [] }，{title: '工具类组件'，可折叠3360 true，children3360 []}，{ title 3: '方法类函数'，可折叠3360 true，children :[]]]vu press/override . styl:

$ accept color=# 3eb 9 c 8//主题颜色$textColor=#2c3e50 //文本颜色$ border color=# EAE ef//边框颜色$codeBgColor=#282c34 //代码背景颜色//代码基础重置。contentpre {margin33600！重要；}(3)添加其他扩展名

插件npm安装：元素-ui，vue-echart，vue-highlight。

介绍进来。vu press/Enhanceapp . js:

/** * 扩展VuePress应用*/从vue-highlight.js '导入VueHighlightJS进口'highlight.js/styles/atom-one-dark.css'；从元素-ui '导入元素元素-用户界面/库/主题-粉笔/index.css '从“vue-echart ”/导入VueECharts注册图表"进口"。/public/css/index.css' //组件钢性铸铁文件导出默认值({ Vue，//VuePress正在使用的某视频剪辑软件构造函数选项，//附加到根实例的一些选项路由器，//当前应用的路由实例siteData //站点元数据})={ //.做一些其他的应用级别的优化vue。使用(VueHighlightJS)vue。使用(元素)vue。组件('图表'，VueECharts)}(4)降价拓展

调用别人写好的轮子：https://www .npmjs。com/package/vue-高亮显示。射流研究…

高亮-代码槽='codeText' lang='vue '模板div class='演示按钮' div dt-button默认按钮/dt-button类型='primary '主要按钮/dt-button类型="成功"成功按钮/dt-button类型="信息"信息按钮/dt-button类型="警告"警告按钮/dt-button类型="危险"危险按钮/dt-按钮/div/模板/高亮显示-代码(5)在减价使用Vue -插入按钮样式

#先写一个按钮组件vuepress \ docs .vu按下\组件\ src \按钮。某视频剪辑软件

模板按钮class=' dt-button ' @ click=' handleClick ' : disabled=' disabled ' : autofocus=' autofocus ' : type=' native type ' : class='[size？dt-button——”尺寸：",类型？" dt-button - ' type : ' '，{ 'is-disabled': disabled，' is-round': round，' is-plain ' : plain }]' I : class=' icon ' v-if=' icon '/I span v-if=' $ slots。default ' slot/slot/span/button/template script export default { name : ' DtButton }，props: { size: String，type : { type : $ emit(' click '，event) }，mounted () { this .$emit('click '，event) }}/script#css样式，在vuepress \ docs .vuepress \ public \ css \ button.css，写法参考饿了么。

#在。\研究\ vuepress \ docs \ .vuepress \ public \ css \ index.css汇总

@import ./图标字体。CSS '；@import ./icon。CSS '；@import ./卡片。CSS '；@import ./button。CSS '；//按钮组件@import ./复选框。CSS '；#在vuepress \ docs .vu按下\组件\测试\测试1。某视频剪辑软件文件夹下面调用按钮

模板' div class='演示按钮div dt按钮默认按钮/dt-button类型='primary '主要按钮/dt-button类型="成功"成功按钮/dt-button类型="信息"信息按钮/dt-button类型="警告"警告按钮/dt-button类型="危险"危险按钮/dt-button/div/div/templatescriptimport DTButton from './src/button ' export default { name : ' button wrap '，components 3360 { DTButton } }/script style lang=' less '作用域。演示按钮{宽度： 100%；文本对齐：中心；div { margin : 10px 0；} }/style # vu press会自动根据路径注册组件，我们只要映射文件路径，就可以调用组件。

在. vu按下\ docs \ base components \ base \ test 1。医学博士

# 测试案例1 -通用-演示代码标题='基本用法描述='基本按钮用法测试-测试1/测试-测试1高亮-代码槽=' CodeText ' lang=' vue ' template div class=' demo-button ' div dt-button默认按钮/dt-button类型='primary '主要按钮/dt-button类型="成功"成功按钮/dt-button类型="信息"信息按钮/dt-button类型="警告"警告按钮/dt-button类型="危险"危险按钮/dt-button/div/div/template/highlight-code/Common-Democode | Tables | Are | Cool |-| :-: |-: | | col 3是|右对齐的| $1600 ||第2栏是|居中的| $12 ||斑马纹|是整齐的| $1 |#展示效果如图：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。