浅谈vuepress 踩坑记

vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器，实际上就是一个vue的spa应用，内置webpack，可以用来写文档。恰好最近需要为一些组件写文档，就动手撸了一波，毕竟刚发布，遇到不少坑，最终还是磕磕碰碰的运行起来了，为了避免大家踩同样的坑，特意将搭建的过程记录下来，分享一波。

以下是几个已知的问题

因为util.promisify是在node 8.0之后引入的，所以如果你不想像我一样浪费三个小时的时间，请查看并且更新node版本

建议不要使用webpack-simple的模板进行试验，否则会各种运行不起来╮(╯▽╰)╭

使用cli的模板如果报错TypeError: Cannot read property 'vue' of undefined 是因为vuepress内置的webpack的vueloader使用的版本和你本地的不一样，请将本地的版本更新到稳定最新版本

当出现安装官方文档部署之后一直跳转到404的情况时，请使用路由的哈希模式来访问

如遇到端口冲突等问题，在docs目录下新建.vuepress文件夹，然后新建config配置文件对prot端口项进行配置即可，具体可参照官方文档

开始使用

使用cli新建一个webpack模板项目

//进入项目首先安装依赖
  npm install

  //将vue-loader进行版本替换，使其和vuepress内置的webpack里的vue-loader保持一致，否则会报错（不过尤大大已经在解决版本冲突的问题了，版本待发）
  npm update vue-loader@15.0.0-rc.2 --save-dev

  //接下来安装vuepress
 npm install -D vuepress

 mkdir docs

 echo "# Hello VuePress!" > docs/README.md

 //最后一步启动vuepress ，进入docs目录，使用vuepress dev命令即可

 cd docs

 vuepress dev

 //使用vuepress build即可完成对项目的打包

 //接下来就是按照官方的文档，对你的网站进行各种创造啦

项目部署的话我使用的是github，具体操作请参照官方文档

示例网站

github地址

剩下的主题配置参照官方文档的配置详解就OK了，这里就不在赘述

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 基于vue-ssr的静态网站生成器VuePress 初体验
  • 基于VuePress 轻量级静态网站生成器的实现方法
赞 (0)

相关推荐

  • 基于VuePress 轻量级静态网站生成器的实现方法

    什么是VuePress VuePress由两部分组成:一个基于Vue的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题. 它是为了满足Vue自己的子项目文档的需求而创建的. VuePress为每一个由它生成的页面提供预加载的html,不仅加载速度极佳,同时对seo非常友好.一旦页面被加载之后,Vue就全面接管所有的静态内容,使其变成一个完全的SPA应用,其他的页面也会在用户使用导航进入的时候来按需加载. VuePress是怎样运作的 一个VuePress应用实际上就是基于Vue.VueR

  • 基于vue-ssr的静态网站生成器VuePress 初体验

    什么是VuePress VuePress由两部分组成:一个基于Vue的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题. 它是为了满足Vue自己的子项目文档的需求而创建的. VuePress为每一个由它生成的页面提供预加载的html,不仅加载速度极佳,同时对seo非常友好.一旦页面被加载之后,Vue就全面接管所有的静态内容,使其变成一个完全的SPA应用,其他的页面也会在用户使用导航进入的时候来按需加载. 参考官方文档可知该项目有一下特点: 内置markdown(基础功能) 支持PWA 集

  • 浅谈vuepress 踩坑记

    vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档.恰好最近需要为一些组件写文档,就动手撸了一波,毕竟刚发布,遇到不少坑,最终还是磕磕碰碰的运行起来了,为了避免大家踩同样的坑,特意将搭建的过程记录下来,分享一波. 以下是几个已知的问题 因为util.promisify是在node 8.0之后引入的,所以如果你不想像我一样浪费三个小时的时间,请查看并且更新node版本 建议不要使用webpack-sim

  • Vue.js 踩坑记之双向绑定

    这篇体验一下VUE的双向绑定 <html> <head> <meta charset="utf-8"> </head> <body> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <div id="app"> <input type="text" v

  • vue踩坑记-在项目中安装依赖模块npm install报错

    在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modules\abbrev npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall access npm ERR! enoent ENOENT: no such file or directory, access 'D:\ShopApp\nod

  • vmware导入ova文件踩坑记小结

    问题来源 众所周知,所有的网络行为都会产生相应的网络流量,那么所有的网络攻击行为也有其对应的流量特点,那么是否能根据流量特点进而分析出其对应的是什么攻击行为呢? 我在虚拟机上使用vulnhub的靶场环境进行模拟攻击,然乎使用wireshark进行抓包分析流量. 问题出现 因为vulnhub的环境是ova文件的虚拟机,是需要使用virtualbox打开的,但是我没有用过vbox,想着把他导入vmware中进行测试,很快遇到了第一个问题:当我把ova文件导入vmware时报错了,错误如下: 我尝试放

  • vue踩坑记之npm install报错问题解决总结

    vue踩坑记之npm install报错问题解决总结

    目录 前言 常见的有以下多种情况 总结 前言 很多时候安装npm install 的时候并不能直接将当前的node_modules直接一键安装到本地. 总是会出现各种各样的报错 常见的有以下多种情况 tip1:本地node 跟npm 版本不匹配,项目创建者当时的版本为14 ,而新开发者本地node默认为最新需要重新降低版本,使用cmd打开查看本地node和npm版本,询问一下同事的版本,直接去node官网重新 下载安装新的node安装包即可,或者如果本地有多个新老项目为了方便的管理各个node的

  • js 下拉菜单点击旁边收起实现(踩坑记)

    js 下拉菜单点击旁边收起实现(踩坑记)

    背景: 最近在搞一个需求:搜索框,输入时显示联想词下拉列表,当点击联想词跳转到搜索页,如果点击其他部分收起联想的下拉列表.接到需求后第一反应用失焦(blur)去做收起操作避免body的监控,随后就踩坑里了,下面情景再现,一步一步来看这个问题的解决(里面的demo等会用vue实现) 带有bug的版本演示图 备注:最后的搜索跳转我直接用console代替掉了,但是并没有执行 问题抛出 当我点击上面的联想词的时候它的onSearch并不能执行 demo代码展示 <template lang="h

  • 详解nginx basic auth配置踩坑记

    nginx的basic auth配置由ngx_http_auth_basic_module模块提供,对HTTP Basic Authentication协议进行了支持,用户可通过该配置设置用户名和密码对web站点进行简单的访问控制. basic auth配置示例: location / { auth_basic "closed site"; auth_basic_user_file conf/htpasswd; } 说明: auth_basic可设置为off或其它字符串,为off时表示

  • 关于springboot配置druid数据源不生效问题(踩坑记)

    关于springboot配置druid数据源不生效问题(踩坑记)

    pom文件 如果你的springboot项目要用到druid,那么这三个依赖必不可少: <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.1.10</version> </dependency> <!--Druid--> <depen

  • vue使用Element el-upload 组件踩坑记

    vue使用Element el-upload 组件踩坑记

    目录 一.基本使用 二.图片数量控制 三.图片格式限制/可以选中多张图片 补充:在vue项目中使用element-ui的Upload上传组件 一.基本使用 最近研究了一下 el-upload组件 踩了一些小坑  写起来大家学习一下 很经常的一件事情 经常会去直接拷贝 element的的组件去使用 但是用到上传组件时 就会遇到坑了 如果你直接去使用upload 你肯定会遇见这个错误 而且 上传的图片 可能会突然消失  这时候如果你没有接口  你是完全不知道为什么移除的  所以 无接口时 只能去猜测

  • 浅谈mint-ui 填坑之路

    浅谈mint-ui 填坑之路

    近期上手vue的移动端项目,舍弃了之前自己相对熟悉的mui框架,改为用饿了么团队为了vue量身定做的mint-ui框架. 之前开发的时候觉得mui的文档就足够坑爹了,但当我开始阅读mint-ui这个文档后才发现自己真是太年轻了... 针对一些自己遇到的问题,特此记录成文档,方便日后使用. swipe组件 因为项目加载eslint的缘故也就没有像之前的项目一样引用swiper框架. 这个轮播图的组件文档实在是不敢恭维(尽管其他的文档也好不到哪里去),官方给出的参数真是少的可怜,一些方法也并没有提到

随机推荐