美文网首页
【VuePress01】开始使用VuePress啦

【VuePress01】开始使用VuePress啦

作者: 八宝君 | 来源:发表于2019-04-02 11:38 被阅读0次

    写在前面的话

    啊啊啊啊,忍不住又开了一个坑,之前的都还没继续写完,开这个是有原因的,现在公司用的是hugo,基于bootstrap+jq,没错,都9102年了,我们还在bootstrap+jq

    也商讨过,主要是公司的业务,很多都是展示型的页面,官网上信息展示居多。如果上框架,一是学习成本,基于SEO的原因,肯定不得不上SSR,再一个框架基本上多是对于数据的处理,但是我们官网要求的是快速生成静态站。所以感觉上Vue遥遥无期了,但也不是没有一点点希望。因为我看到VuePress,对SEO友好,然后语法也能接受。所以想着自己有事没事来踩踩坑,以后给公司提出要换也会有方向和经验,而不是一股脑的说要换这个,然后一群人都不知道这条路到底能不能走到头,最后又宣告失败。

    安装

    官网在这,里面一些特性我就不多说,不然看起来就像是直接copy官网来着。首先说说安装吧,安装还是遇到了一些小问题。我按照官网写的,

    官网上的步骤

    就是上图这样,但是在启动的时候会报res.getHeader is not a function。后来去github上查issue,发现很多人都出现了这个问题,有看到说不能用npm,要用yarn,但是我自己尝试过还是不行,最后是自己在package.json中添加下面的代码,

    "scripts": {
      "docs:dev": "vuepress dev docs",
      "docs:build": "vuepress build docs"
    },
    "devDependencies": {
      "vuepress": "^0.14.10",
      "webpack-dev-middleware": "^3.6.0"
    },
    "resolutions": {
      "webpack-dev-middleware": "3.6.0"
    }
    

    然后先卸载vuepress,卸载命令npm uninstall vuepress,然后再npm install,最后npm run docs:dev就可以了,启动后是这个样子的:

    成功启动的页面
    默认端口是8080,会有一个Hello VuePress,这个是README.md里面的,然后右边有一个搜索框。
    说一下目录结构:
    我的目录结构
    myBlog  // 我的项目名,因为是打算用vuepress搭建自己的博客放在github.io上的
    ├─docs // VuePress实际项目
    │ ├─.vuepress // vuepress的配置输出目录等
    │ │ └─config.js // 配置文件
    │ └─README.md // 首页的md,也就是启动后出现Hello VuePress 的文件,一些文案也是修改这种.md文件
    ├─node_modules // 我的包安装
    ├─package.json // 记得修改这里面的代码,不然可能启动会报错哦
    │ ...
    └─README.md // 要提交到github上的README说明,不和VuePress实际项目有关
    

    相关文章

      网友评论

          本文标题:【VuePress01】开始使用VuePress啦

          本文链接:https://www.haomeiwen.com/subject/mspwbqtx.html