vue-press实践

如果你是想搭建一个静态网页 （如 基hubPages），请继续往下看，
如果你已经了解了 Hexo，如果你还了解vue，那么vue-press 上手很简单。

👇👇

搭建一个vue-press环境

全局安装

npm install -g vuepress

创建目录

mkdir project
cd project
mkdir docs

然后 创建package.json文件，给 package.json 添加一些 scripts 脚本：

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

运行

npm run dev 然后就可以在docs下 创建一个 .md文件 直接写文档了

构建

npm run build 这样你就可以构建1下后 发布到你的网站 🐱

然而，说好的用vue写呢？ 请往下看 👇

vuepress 实践

如果你想用vue-press搭建一个 漂亮点的博客（...毕竟是一个看脸的世界 🐒...） 你还要配置下 config.js

建议目录如下：

  |-- docs
  |  |--.vuepress    // 存放资源主目录
  |  |  |--components   // 页面组件目录
  |  |    |--Home.vue
  |  |    |--Other.vue
  |  |  |--public     // 静态资源目录  -编译后你会发现被放到了根目录
  |  |    |--img
  |  |    |--xx
  |  |  |--styles   // 可以存放一些全局样式文件
  |  |  |--config.js  // vuepress 配置文件
  |  |--xxx   // 你还可以创建一些别的目录 如 博文目录
  |  |-- README.md   // 主页面 配置文件
  |--package.json
  |--build.sh

config.js 配置信息如下：

module.exports = {
  title: 'Blog',
  head: [
    ['link', { rel: 'icon', href: './logo.png' }]
  ],
  serviceWorker: true,
  themeConfig: {
    nav: [
      { text: "Home", link: "/" },
      { text: "Article", link:"/article/" },
      { text: "AboutMe", link:"/about/" },
      { text: "Github", link: "https://github.com/<your username>" }
    ],
    //  test sidebar
    sidebar: {
      "/article/": [
        {
          title: '文章',
          collapsable: true,
          children: [
            '/xxx',  // 默认路径位置是跟路径，一定注意
          ]
      }]
    }
  }
}

README.md文件信息：

layout: Home  //对应的components文件中的.vue文件 
head: xxx
name: xxx
describe: xxx
...
...

由于时间原因，在此不过多介绍，
感兴趣的请参考 CODE

如果对你有所帮助 请留个star 😜
限于能力及时间有限，如有不足欢迎指正。