提示

使用vuepress快速搭建博客，采用vuepress-reco主题，并进行自定义开发

• 1、安装使用vuepress
• 2、安装reco主题
• 3、安装vdoing主题
• 3、安装插件并配置
• 4、将配置进行模块化
• 5、整合element-ui、echart等框架
  • 安装element-ui
  • enhanceApp.js

1、安装使用vuepress

按照vuepress官网 (opens new window)上的说明，进行安装 . 依赖环境

• Node.js v16.19.0+ (opens new window)

• Yarn v1 classic (opens new window)

• 使用 pnpm (opens new window) 时，你可能需要安装 vue 和 @vuepress/client 作为 peer-dependencies ，即 pnpm add -D vue @vuepress/client@next 。

• 使用yarn 2 时，你需要在 .yarnrc.yml在新窗口打开 (opens new window) 文件中设置 nodeLinker: 'node-modules'

  # 查看当前node版本
  $ node -v
   
  # 清除npm缓存
  $ npm cache clean -f
   
  # 全局安装n
  $ npm install -g n
   
  # 升级到最新稳定版
  $ n stable
   
  # 升级到最新版
  $ n latest
   
  # 升级到定制版
  $ n v14.6.0
   
  # 切换使用版本
  $ n 13.10.0 (ENTER)
   
  # 删除制定版本
  $ n rm 13.10.0
   
  # 用制定的版本执行脚本
  $ n use 13.10.0 some.js
   
  # 升级完成查看 node版本
  $ node -v
  

# 安装
yarn global add vuepress # 或者：npm install -g vuepress

# 新建一个 markdown 文件
echo '# Hello VuePress!' > README.md

# 开始写作
vuepress dev .

# 构建静态文件
vuepress build .

#1、创建目录并初始化项目
cd vue-zxpnet
git init
pnpm init
pnpm add -g pnpm

#将 VuePress 安装为本地依赖
pnpm add -D vuepress@next @vuepress/client@next vue
yarn add -D vuepress@next

添加git过滤

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

#运行
pnpm docs:dev

2、安装reco主题

vuepress-theme-reco主题官网 (opens new window) https://www.npmjs.com/

#安装
yarn global add @vuepress-reco/theme-cli
theme-cli init

# 初始化
npm install @vuepress-reco/theme-cli -g
theme-cli init

// .vuepress/config.js
module.exports = {
  theme: 'reco',
  themeConfig: {    
    blogConfig: {
      category: {
        location: 2,     // 在导航栏菜单中所占的位置，默认2
        text: 'Category' // 默认文案 “分类”
      },
      tag: {
        location: 3,     // 在导航栏菜单中所占的位置，默认3
        text: 'Tag'      // 默认文案 “标签”
      }
    }
  }
}  

3、安装vdoing主题

Vdoing是VuePress v1.x (opens new window)的一个主题，是在默认主题 (opens new window)基础上做的修改和扩展，很多配置仍然沿用官方配置 (opens new window) (opens new window)。使用本主题可以很方便的搭建一个结构化的知识库或博客。

https://vuepress.vuejs.org/zh/guide/getting-started.html

yarn init

3、安装插件并配置

插件主要让博客更美观、大气，属锦上添花，常用的可见vuepress插件市场 (opens new window) vuepress-reco插件市场 (opens new window), 也可以通过npm仓库 (opens new window)搜索

yarn add -D @vuepress/plugin-pwa @vuepress/plugin-nprogress \
	@vuepress/plugin-google-analytics @vuepress/plugin-register-components \
    @vuepress-reco/vuepress-plugin-kan-ban-niang @vuepress-reco/vuepress-plugin-bgm-player \
    @vuepress-reco/vuepress-plugin-bulletin-popover \
    @vuepress-reco/vuepress-plugin-extract-code @vuepress-reco/vuepress-plugin-comments \
    @vuepress-reco/vuepress-plugin-loading-page @vuepress-reco/vuepress-plugin-screenfull \
    vuepress-plugin-boxx  vuepress-plugin-sitemap vuepress-plugin-cursor-effects \
    vuepress-plugin-ribbon vuepress-plugin-flowchart vuepress-plugin-sponsor \
    @vuepress-reco/vuepress-plugin-rss vuepress-plugin-alias vuepress-plugin-nuggets-style-copy         

4、将配置进行模块化

/docs/.vuepress/config.js为配置的入口文件，需要配置很多内容，造成文件臃肿，可以采用require()进行按需加载。

const plugins = require('./config/plugins');
module.exports = {
    theme: 'reco', // 使用主题 vuepress-theme-reco
    port:9111, // 端口，默认为8080
    markdown: {
        lineNumbers: true
    },
    locales: {
        '/': {
            lang: 'zh-CN' // 多语言： 'en-US'
        }
    },
    title: 'ZXP博客',
    description: '平哥的博客日记,记录工作、生活点滴知识点',
    dest: './dist',
    head: require('./config/head'),
    plugins,
    themeConfig: require('./config/theme/index')
}

也可以将一些常量配置到setting.js当中，以解耦代码

5、整合element-ui、echart等框架

vuepress里面的图标较少，需要扩展一些图标，这里采用整合主流的框架element-ui (opens new window)

安装element-ui

yarn add -S element-ui async-validator@1.11.5 echarts vue-echarts

避坑：element-ui (opens new window)依赖core-js的2.x版本，而web项目依赖core-js的3.x版本，因此需要安装async-validator@1.11.5

enhanceApp.js

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueECharts from 'vue-echarts'

export default ({ Vue, options, router,siteData }) => {
    Vue.use(Element)
  	Vue.component('echart', VueECharts)
};