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

你越宠我,我就越可爱

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

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

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

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

 

#环境

node.js 12+

#新建目录

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

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

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

mkdir vuepress-starter
cd vuepress-starter

 

#初始化

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

npm init

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

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

 

#安装为本地依赖

执行代码

npm install -D vuepress@next

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

我们在打开文件夹后就会看到以下目录,在 package.json 中添加一些 scripts

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

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

 

#建立文章

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

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

 

#运行

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

#图片放置

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

.vuepress

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

#首页文件

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

---
home: true
heroImage: /images/logo.svg
heroText: 独具一色
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
---

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

#菜单栏

顶部菜单,侧边菜单,网站名字,关键字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'
          }  
        ],
​
    },
}

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

#建立文

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

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

 

(3)
上一篇 07/14/2021
下一篇 07/26/2021

相关推荐

发表回复

您的电子邮箱地址不会被公开。