前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >三分钟教你安装Vuepress,学不会。。。。。。。那我也没有办法

三分钟教你安装Vuepress,学不会。。。。。。。那我也没有办法

原创
作者头像
洛眰恦
修改2022-02-11 02:33:03
2.5K0
修改2022-02-11 02:33:03
举报
文章被收录于专栏:晊恦的学习旅程

I.起因

大约两个月前,我有一个朋友,他想让我帮他安装一下Vuepress,但是过程也不是太顺利,于是想写篇文章总结一下哪块容易出问题。(这篇文章其实应该早就写好的,只不过 咕了)

II.关于Vuepress

首先介绍一下VuepressVuePress 是尤雨溪发布的一个基于 vue 的静态网站生成器,个人感觉如果用它搭建博客的话他比Hexo还简洁,如果能适应的话,加上一些主题还蛮好康的。

以Evan Xu大佬的博客为例(Evan's blog (xugaoyi.com)

Vuepress分为v0.x v1.x v2.x版本 ,本文以v1x版本作为例子,其余版本安装可能会与本教程略有差距

III. 开始

VuePress 需要Node.js>= 8.6版本才行

1.咱们首先在你想安装的地方创建目录并进入

代码语言:javascript
复制
mkdir vuepress-starter && cd vuepress-starter

2.使用你觉得好的包管理器进行初始化

这里有yarn和npm两种方案,但是文档中有说明 如果你的现有项目依赖了 webpack 3.x,我们推荐使用 Yarn而不是 npm 来安装 VuePress。因为在这种情形下,npm 会生成错误的依赖树。 所以我们先以yarn为例

代码语言:javascript
复制
yarn init

3.将 VuePress 安装为本地依赖

代码语言:javascript
复制
yarn add -D vuepress

4.创建一个文档

代码语言:javascript
复制
mkdir docs && echo '# Hello VuePress' > docs/README.md

5.在 package.json 中添加一些scripts

官方给的建议是添加。我的建议也是添加,不过具体还是得看您填不填加了

代码语言:javascript
复制
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

注意逗号,有时候少了逗号会报错
注意逗号,有时候少了逗号会报错
官方文档
官方文档

6.在本地启动服务器

代码语言:javascript
复制
yarn docs:dev

VuePress 会在http://localhost:8080(opens new window)启动一个热重载的开发服务器。

现在,你应该已经有了一个简单可用的 VuePress 文档。接下来,了解一下推荐的 目录结构 和 VuePress 中的 基本配置

等你了解完上文介绍的基础概念,再去学习一下如何使用 静态资源Markdown 拓展在 Markdown 中使用 Vue 来丰富你的文档内容。

当你的文档逐渐成型的时候,不要忘记 VuePress 的 多语言支持 并了解一下如何将你的文档 部署 到任意静态文件服务器上。

IV.注意事项

npm版本为17,运行npm run docs:dev可能会报错
npm版本为17,运行npm run docs:dev可能会报错

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • I.起因
  • II.关于Vuepress
  • III. 开始
  • IV.注意事项
相关产品与服务
云服务器
云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档