VuePress 2.x 新手安装上手教程

你越宠我,我就越可爱

%title插图%num

星宿UI 一直在文档上会有缺失,视频无论如何录制都会缺少很多的细节;于是就有文档这一说,关于文档这块一直爱纠结使用什么样子的程序来写

为何最后选择了VuePress?虽然是vue框架的生产物,但是最后有渲染成html有利于SEO

每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载

#环境

node.js 12+

#新建目录

电脑为mac os为案例,枫瑞是在进入桌面后建立了一个新的文件夹,并且进入

%title插图%num

或者你可以使用官方的代码

mkdir vuepress-startercd vuepress-starter

#初始化

进入新建立的文件夹后初始化项目,执行代码

npm init

执行后一直回车,默认字段即可

%title插图%num

#安装为本地依赖

执行代码

npm install -D vuepress@next

%title插图%num

我们在打开文件夹后就会看到以下目录

%title插图%num

在 package.json 中添加一些 scripts

{  "scripts": {    "docs:dev": "vuepress dev docs",    "docs:build": "vuepress build docs"  }}

%title插图%num

#建立文章

执行以下代码后,多出一个docs目录

mkdir docsecho '# Hello VuePress' > docs/README.md

#运行

在终端直接,在终端中打开链接即可访问网站

npm run docs:dev

#图片放置

建立好后我们需要在docs文件夹建立一个名为

.vuepress

的文件夹,是的它的名字前面有一个点,mac下桌面返回看不到目录,于是枫瑞的logo等之类的图片就放下该目录下的images文件夹

%title插图%num

#首页文件

如上图 是不是会看到一个README.MD文件,打开后我们输入以下代码,就可以出现首页

---home: trueheroImage: /images/logo.svgheroText: 独具一色tagline: wordpress后台--开源资源下载小程序actionText: 快速上手 →actionLink: /file/features:- title: 情感插画  details: 以 Markdown 为中心的项目结构,以最少的配置帮助你专注于写作。- title: 独具一色  details: 享受 Vue + webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主题。- title: 高性能  details: VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候,将作为 SPA 运行。footer: MIT Licensed | Copyright © 2020-枫瑞博客网-yinfengrui---

%title插图%num

#菜单栏

顶部菜单,侧边菜单,网站名字,关键字key等都在config.js文件里面配置,当然在首页是看不到侧栏的,需要在其界面再会出现

module.exports = {    lang: 'zh-CN',    title: '星宿UI 多端小程序官方文档',    description: '星宿UI,wordpress开源小程序,资源小程序,枫瑞博客网',    head: [['link', { rel: 'icon', href: '/images/logo.png' }]],    themeConfig: {        search: true,        logo: '/images/logo.svg',        // 顶部导航        navbar: [            {                text: '文档',                link: '/sidebar/ambient/ambient.html'            },            {                text: '博客网',                link: 'https://www.frbkw.com'            },{                text: '更新说明',                link: '/explain/explain.html'            },{                text: '其他问题',                link: '/problem/problem.html'            },{                text: '视频教程',                link: 'https://space.bilibili.com/51228279'            },{                text: '赞助Bug',                link: '/sponsor/sponsor.html'            }        ],        // 我是侧边栏        sidebar: [          {            text: '环境准备',            link: '/sidebar/ambient/ambient.html',
},{ text: '源码下载', link: '/sidebar/download/download.html' } ],
},}

%title插图%num

#建立文

建立新的文章有一个条件
目录需要在docs下
文件是.md结尾,也就是md文件(如:problem.md)
菜单的链接地址需要以html结尾
{    text: '其他问题',    link: '/problem/problem.html'}

© 版权声明
评论 抢沙发
的头像-IT趣味分享

昵称

取消
昵称表情代码图片