Ali Camp Notes1:VuePress

最新推荐文章于 2024-10-16 22:25:37 发布

小南方

最新推荐文章于 2024-10-16 22:25:37 发布

阅读量189

点赞数

分类专栏：训练营文章标签： linux npm nodejs vue

本文链接：https://blog.csdn.net/weixin_44523919/article/details/106910579

版权

训练营专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Day1 VuePress博客的搭建

前言
安装 Node.js
安装 VuePress 程序
配置 VuePress
配置首页

前言

阿里云第二期进阶班第一天，任务是搭建一个利用VuePress搭建自己专属的静态网站与云笔记 ，因为是静态网站实现起来非常的轻松。整个就是不断的装软件装软件装软件没有什么难度
系统版本CentOS7.7
VuePress是为了支持 vue 及其子项目的文档需求而写的一个项目，VuePress界面十分简洁，并且非常容易上手，如果有一定基础不到半小时就可以将项目架构搭好。现在已经有很多这种类型的文档，如果你有写技术文档的项目的话，VuePress绝对可以成为你的备选项之一。
VuePress官网就是vuepress的应用效果可以参考。

安装 Node.js

在安装VuePress前我们还需要安装Node.js 阿里镜像源

wget https://npm.taobao.org/mirrors/node/v13.9.0/node-v13.9.0-linux-x64.tar.xz

且需要请确保你的 Node.js 版本 >= 8
由于是压缩包我们需要创建一个文件夹

sudo mkdir -p /usr/local/lib/nodejs

解压

sudo tar -xJvf node-v13.9.0-linux-x64.tar.xz -C /usr/local/lib/nodejs

进入文件bin使⽤./node -v查看node.js版本号命令验证是否解压成功

cd /usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin
./node -v

在这里插入图片描述

修改环境变量，使得能在任意⽬录下执⾏node命令

vim ~/.bash_profile

找到 PATH=$PATH:$HOME/bin，在PATH=$PATH:$HOME/bin后⾯添加路
径:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin结果为：
PATH=$PATH:$HOME/bin:/usr/local/lib/nodejs/node-v13.9.0-linux-x64/bin
保存修改，然后重载⼀下：source ~/.bash_profile

安装 VuePress 程序

前面安装了Node.js现在我们可以使用npm安装VuePress

npm config set registry https://registry.npm.taobao.org
npm install -g vuepress

创建⼀个⽂件夹作为⽬录

mkdir try_blogs
cd try_blogs

项⽬初始化

npm init -y

配置 VuePress

设置package.json的脚本配置

vim package.json
修改scripts中的内容如下：
 "scripts": {
 "docs:dev": "vuepress dev docs",
 "docs:build": "vuepress build docs"
 },

在当前⽬录中创建⼀个⽂档⽬录cd docs
创建.vuepress⽬录 cd docs mkdir .vuepress
新建⼀个md⽂件 echo '# Hello VuePress - first blog!' >README.md
创建config.js配置⽂件 cd .vuepress echo >config.js
创建public⽬录 mkdir public

完成后的⼯作⽬录如下：

try_blogs
├─ docs //以后要在这⾥⾯写⽂章，直接在此⽂件夹下新建⽂件夹，然后再建
md⽂档就⾏，链接会⾃动⽣成
│ ├─ README.md // 这个将会是我们以后的⾸页
│ └─ .vuepress // 这个⾥⾯会存放⼀些配置和组件
│ └─ public // 静态⽂件存放地
│ └─ config.js //配置⽂件，以后的所有配置基本都在这⾥写
└─ package.json

回到try_blogs⽬录，执⾏命令 vuepress dev docs
本地测试在浏览器中运⾏：127.0.0.1:8080或者localhost:8080
服务器测试：服务器公网ip:8080
服务器测试记得开启端口，默认端口为8080如果端口占用也可以修改端口号后，开启/访问对应端口即可。

配置首页

随便配置一个首页进行测试

vi README.md

---
home: true
heroText: Vue技术博客初试
tagline: 项⽬结构，关注讨论，每⽇分享
actionText: 每⽇更新 →→
actionLink: /testlink/
features:
- title: 项⽬结构
 details: 以 Markdown 为中⼼的项⽬结构，以最少的配置帮助你专注于写作。
- title: 关注讨论
 details: 享受 Vue + webpack 的开发体验，在 Markdown 中使⽤ Vue 组件，同时可以使⽤ Vue 来开发⾃定义主题。
- title: 每⽇分享
 details: VuePress 为每个⻚⾯预渲染⽣成静态的 HTML，同时在⻚⾯被加载的时候，将作为 SPA 运⾏。
footer: LearnVueonECS Licensed | Copyright © 2020-present
---