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'
}