vuePress总结

一.另一种静态网站编辑类似vuepress

smarty-press

二.vuepress静态网站编辑

先将vuepress版本调至v2.0

**提示**

1.使用 [pnpm在新窗口打开](https://pnpm.io/zh/) 时，
你可能需要安装 `vue` 和 `@vuepress/client` 
作为 peer-dependencies ，即 `pnpm add -D vue @vuepress/client@next` 。
2.使用 [yarn 2在新窗口打开](https://yarnpkg.com/) 时，你需要在 [`.yarnrc.yml`在新窗口打开]
(https://yarnpkg.com/configuration/yarnrc#nodeLinker) 文件中设置 `nodeLinker: 'node-modules'` 。

快速上手

• 步骤1：创建并进入一个新目录

mkdir vuepress-starter
cd vuepress-starter

• 步骤2：初始化包

git init
yarn init -y

• 步骤3：添加依赖

//官方 但最新版本好像暂有问题
yarn add -D vuepress@next
//使用这个版本来安装
yarn add -D vuepress@2.0.0-beta.27

• 步骤4：执行命令打开vscode

code .

• 步骤5：在 package.json添加启动和打包

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

• 步骤6：将默认得临时得目录和缓存目录添加到.gitignore中， 不提交到git

echo node_modules >> .gitignore
echo .temp >> .gitignore
echo .cache >> .gitignore

• 步骤7：创建你的第一篇文档

mkdir docs
echo '# Hello VuePress' > docs/README.md

• 步骤8: 启动服务

yarn docs:dev
或
npm run docs:dev

• 步骤9：如果出现README.md乱码得情况

配置 config.ts

注意：每次修改config.js都需要重新跑服务

import { defineUserConfig } from 'vuepress'
import path from "path"
export default defineUserConfig({
  lang: 'zh-CN',//站点语言
  title: '你好， VuePress ！',//站点标题
  description: '这是我的第一个 VuePress 站点',//站点描述  作用在header标签下meta标签下
  base: '/', //站点配置  默认 /  eg: '/shsncCom/'
  locales: {}, //提供多语言支持的语言配置
  theme: path.resolve(__dirname, '../../node_modules/@vuepress/theme-default'), //把主题写成绝对路径
  themeConfig:{//配置主题
    logo: '/favicon.ico', //在title前面添加图标logo
  },
  /*
  目录配置  括号里为默认值
  */
  dest:path.resolve(__dirname,"./dist"),//配置打包输出路径 默认值"./dist" eg:"../../file"打包后会在根目录有个file文件 
  temp:path.resolve(__dirname,"./.temp"),//配置零食文件目录的路径
  cache:path.resolve(__dirname,"./.cache"),//配置缓存目录的路径
  public:path.resolve(__dirname,"./public"),//指定public文件目录默认在 .vuepress目录下

  /*
  开发配置项
  */
 debug:false,//是否开启debug模式  默认false
 host:"localhost",//指定开发服务器的主机名
 port:8080,//指定开发服务器的端口号
 open:false,//每次重启服务或保存都会打开浏览器新窗口  默认false
 //匹配文件类型  把那些文件作为页面来识别  
 //默认['**/*.md', '!.vuepress', '!node_modules'] 表示只识别.md文件且不在.vuepress和node_modules文件下找 
 pagePatterns:['**/*.md', '!.vuepress', '!node_modules'],
 //templateDev可以使用我们重新定义的模板   不要轻易改
 //templateDev:path.resolve(__dirname,"../index.dev.html"),
 //配置打包后使用的定义模板
 //templateSSR:path.resolve(__dirname,"../index.ssr.html"),
 shouldPreload:true,//需要生成对应的 <link rel="preload"> 需不需要预加载  默认true
 shouldPrefetch:true,//一个函数，用来控制哪些文件是需要生成对应的 <link rel="prefetch"> 标签的 默认true
})

文件说明

1. .vuepress目录下的public文件

1.在public下的静态资源文件可全局使用 例如图片资源
2.修改public路径需在config.js里面修改 
public:path.resolve(__dirname,"./public"),

2. .vuepress目录下的 components文件

1.在components目录下的vue组件可全局使用

3.本地服务启动打包后的文件

//如果没有http-server请全局安装 npm i -g http-server
1.在打包后形成dist目录下  执行 http-server --port 3000
2.http://localhost:3000/ 访问打包后的页面

页面 （路由）

1. 注意：vuepress会把docs目录下所有的.md文件解析成页面
2. 假设这是你的 Markdown 文件所处的目录结构：

└─ docs
   ├─ guide
   │  ├─ getting-started.md
   │  └─ README.md
   ├─ contributing.md
   └─ README.md
   1.访问 docs目录下guide下的README.md  http://localhost:8080/guide/
   2.访问 docs目录下guide下的getting-started.md
   http://localhost:8080/guide/getting-started.html

3. Frontmatter 可以通过 Frontmatter 来覆盖当前页面的 lang, title, description 等属性 eg:在docs/README.md文件

---
lang: zh-CN
title: 页面的标题
description: 页面的描述
---

# Hello VuePress

全局引入js和css

1. 添加async-validator依赖

yarn add async-validator@1.11.5 -S

2. 在.vuepress目录下建 enhanceApp.js文件

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

export default async ({
    Vue
}) => {
    if (typeof process === 'undefined') {
        Vue.use(ElementUI)
    }
}

markDown 学习

markDown