赶周网,堆积情感简谱,黎国辉
网站成果样式
项目书写步骤
github地址:https://github.com/xuhuihui/datacom
官网:
参考文章:
前言:我先git clone官方github,运行查看完整效果。 再根据官网介绍和参考文章,结合完整的代码,自己一步步配置内容。最后,参考element的设计样式,修改并增加代码,形成一个平台组件库的网站。
(1)在已有项目中安装
# 安装为本地依赖项 npm install -d vuepress # 创建一个 docs 目录 mkdir docs # 创建一个 markdown 文件 echo '# hello vuepress' > docs/readme.md # 给package.json 添加一些 scripts 脚本:{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } }# 运行项目 yarn run docs:dev
出现显示文档乱码问题,如图所示:
解决方式:修改md文件编码为utf-8
改变md文件的内容如下:
--- home: true actiontext: 前往 → actionlink: /basecomponents/ features: - title: 布局类组件 details: 基本组件,为常用组件提供快速,可用的组件 - title: 可视化组件 details: 积累将数据可视化的业务组件 - title: 知识库 details: 积累前端相关的知识,涵盖 vue、react、koa2、nodejs 相关的知识点 ---
(2)配置文件
配置(参考链接:) vuepress 站点的基本文件是 .vuepress/config.js
,其中导出一个 javascript 对象:
module.exports = { title: 'data com', // 设置网站标题 description: 'just for fun', //描述 dest: './dist', // 设置输出目录 port: 2233, //端口 themeconfig: { //主题配置 // 添加导航栏 nav: [ { text: '主页', link: '/' }, // 导航条 { text: '组件文档', link: '/basecomponents/' }, { text: '知识库', link: '/knowledge/' }, { text: 'github', // 这里是下拉列表展现形式。 items: [ { text: 'focus-outside', link: 'https://github.com/taoxusheng/focus-outside' }, { text: 'stylus-converter', link: 'https://github.com/taoxusheng/stylus-converter' }, ] } ], // 为以下路由添加侧边栏 sidebar:{ '/basecomponents/': [ { title: '布局类组件', collapsable: true, children: [ 'base/test1', 'base/test2', 'base/test3', 'base/test4', ] }, { title: '可视化组件', collapsable: true, children: [ ] }, { title: '工具类组件', collapsable: true, children: [ ] }, { title: '方法类函数', collapsable: true, children: [ ] } ], '/knowledge/': [ { title: 'css知识库', collapsable: false, children: [ ] }, { title: 'js知识库', collapsable: false, children: [ ] }, { title: 'node知识库', collapsable: false, children: [ ] }, { title: 'vue知识库', collapsable: false, children: [ ] } ] } } }
主题配置部分:在.vuepress/override.styl修改样式:
$accentcolor = #3eb9c8 // 主题色 $textcolor = #2c3e50 // 文字颜色 $bordercolor = #eaecef // 边框颜色 $codebgcolor = #282c34 // 代码背景颜色 // 代码库重置 .content pre{ margin: 0!important;}
(3)增加其它扩展插件
插件npm安装:element-ui,vue-echarts,vue-highlight。。
在.vuepress/enhanceapp.js引入:
/** * 扩展 vuepress 应用 */ import vuehighlightjs from 'vue-highlight.js'; import 'highlight.js/styles/atom-one-dark.css'; import element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import vueecharts from 'vue-echarts' //注册图表 import './public/css/index.css' //组件css文件 export default ({ vue, // vuepress 正在使用的 vue 构造函数 options, // 附加到根实例的一些选项 router, // 当前应用的路由实例 sitedata // 站点元数据 }) => { // ...做一些其他的应用级别的优化 vue.use(vuehighlightjs) vue.use(element) vue.component('chart', vueecharts) }
(4)markdown 拓展
调用别人写好的轮子:
<highlight-code slot="codetext" lang="vue"> <template> <div class="demo-button"> <div> <dt-button>默认按钮</dt-button> <dt-button type="primary">主要按钮</dt-button> <dt-button type="success">成功按钮</dt-button> <dt-button type="info">信息按钮</dt-button> <dt-button type="warning">警告按钮</dt-button> <dt-button type="danger">危险按钮</dt-button> </div> </template> </highlight-code>
(5)在markdown 使用vue-----插入按钮样式
#先写一个按钮组件.\vuepress\docs\.vuepress\components\src\button.vue
<template> <button class="dt-button" @click="handleclick" :disabled="disabled" :autofocus="autofocus" :type="nativetype" :class="[ size ? 'dt-button--' + size : '', type ? '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: string, default: 'default' }, nativetype: { type: string, default: 'button' }, disabled: boolean, round: boolean, plain: boolean, autofocus: boolean, icon: { type: string, default: '' } }, methods: { handleclick (event) { this.$emit('click', event) } }, mounted () { this.$emit('click', event) } } </script>
#css样式,在.\vuepress\docs\.vuepress\public\css\button.css,写法参考饿了么。
#在.\study\vuepress\docs\.vuepress\public\css\index.css汇总
@import './iconfont.css'; @import './icon.css'; @import './card.css'; @import './button.css'; //按钮组件 @import './checkbox.css';
#在.\vuepress\docs\.vuepress\components\test\test1.vue文件夹下面调用button
<template> <div class="demo-button"> <div> <dt-button>默认按钮</dt-button> <dt-button type="primary">主要按钮</dt-button> <dt-button type="success">成功按钮</dt-button> <dt-button type="info">信息按钮</dt-button> <dt-button type="warning">警告按钮</dt-button> <dt-button type="danger">危险按钮</dt-button> </div> </div> </template> <script> import dtbutton from '../src/button' export default { name: 'buttonwrap', components: { dtbutton } } </script> <style lang="less" scoped> .demo-button{ width: 100%; text-align: center; div { margin: 10px 0; } } </style>
#vuepress会自动根据路径注册组件,我们只要映射文件路径,就可以调用组件。
在.\vuepress\docs\basecomponents\base\test1.md
# 测试案例1 --- <common-democode title="基本用法" description="基本按钮用法"> <test-test1></test-test1> <highlight-code slot="codetext" lang="vue"> <template> <div class="demo-button"> <div> <dt-button>默认按钮</dt-button> <dt-button type="primary">主要按钮</dt-button> <dt-button type="success">成功按钮</dt-button> <dt-button type="info">信息按钮</dt-button> <dt-button type="warning">警告按钮</dt-button> <dt-button type="danger">危险按钮</dt-button> </div> </div> </template> </highlight-code> </common-democode> | tables | are | cool | | ------------- |:-------------:| -----:| | col 3 is | right-aligned | $1600 | | col 2 is | centered | $12 | | zebra stripes | are neat | $1 |
#展示效果如图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论