VuePress1.xの利用と個人ブログ構築

記事ディレクトリ

導入
クイックスタート

導入

VuePress は 2 つの部分で構成されています。Vue を利用したテーマシステムを利用した最小限の静的 Web サイト生成ツールと、技術ドキュメントの作成に最適化されたデフォルトのテーマです。これは、Vue サブプロジェクトのドキュメントのニーズをサポートするために作成されました。

クイックスタート

インストール

まず、Node.js をインストールし、Node.js のバージョンが 8 以上であることを確認する必要があります。
チェックコマンドnode -v
cmd ウィンドウを開いてコマンドを実行します

npm install -g vuepress

以下のページが表示され、インストールが完了しました。
VuePress プロジェクトをセットアップする最も速い方法は、create-vuepress-site ジェネレーター (新しいウィンドウで開きます) を使用することです。これは、基本的な VuePress サイト構造のセットアップに役立ちます。
目的のディレクトリでターミナルを開き、次のコマンドのいずれかを実行してください。

# npm
npx create-vuepress-site 目录名称
# yarn
yarn create vuepress-site 目录名称

このコマンドは、VuePress サイトのメタデータの構成に関する詳細を対話的に尋ねます。次に例を示します。

プロジェクト名
説明
メンテナの電子メール
メンテナ名
リポジトリ URL

以下に示すように
これが完了すると、\blog\docs目录
実際の動作を確認するには、新しいスキャフォールディングに移動し目录docs、次のコマンドセットのいずれかを実行します。

# npm
cd docs
npm install
npm run dev
# yarn
cd docs
yarn install
yarn dev

ブラウザアクセス: http://localhost:8171/

.
├── docs
│   ├── .vuepress (用于存储全局配置、组件、静态资源等。)
│   │   ├── components (此目录中的 Vue 组件将自动注册为全局组件。)
│   │   ├── theme (用于存储本地主题)
│   │   │   └── Layout.vue
│   │   ├── public (静态资源目录)
│   │   ├── styles (存储样式相关文件)
│   │   │   ├── index.styl (在 CSS 文件末尾生成的自动应用的全局样式文件的优先级高于默认样式)
│   │   │   └── palette.styl (调色板用于覆盖默认颜色常量和设置手写笔的颜色常量)
│   │   ├── templates (存储 HTML 模板文件)
│   │   │   ├── dev.html (用于开发环境的 HTML 模板文件)
│   │   │   └── ssr.html (构建时基于 Vue SSR 的 HTML 模板)
│   │   ├── config.js (配置的入口文件，也可以是或。ymltoml) 
│   │   └── enhanceApp.js (应用级别增强)
│   │ 
│   ├── config (页面1)
│   │   └── README.md (内容页)
│   ├── guide (页面2)
│   │   ├── README.md (内容页)
│   │   └── using-vue.md (内容页)
│   └── index.md (首页) 
│ 
└── package.json (全局配置文件)

ページ

ホームページ設定index.md

---
home: true
heroImage: https://v1.vuepress.vuejs.org/hero.png
tagline: 项目描述：技术博客分享！！！
actionText: Quick Start →
actionLink: /guide/
features:
- title: Feature 1 Title
  details: Feature 1 Description
- title: Feature 2 Title
  details: Feature 2 Description
- title: Feature 3 Title
  details: Feature 3 Description
footer: Made by 蜜桃先生 with ❤️
---

構成

ホームページ設定 package.json

{
    
    
  "name": "我的博客",
  "version": "0.0.1",
  "description": "项目描述：技术博客分享！！！",
  "main": "index.js",
  "authors": {
    
    
    "name": "蜜桃先生",
    "email": "[email protected]"
  },
  "repository": "www.baidu.com/我的博客",
  "scripts": {
    
    
    "dev": "vuepress dev src",
    "build": "vuepress build src"
  },
  "license": "MIT",
  "devDependencies": {
    
    
    "vuepress": "^1.5.3"
  }
}

ページ構成 config.js

const {
    
     description } = require('../../package')

module.exports = {
    
    
  /**
   * Ref：https://v1.vuepress.vuejs.org/config/#title
   */
  title: 'Vuepress Docs Boilerplate',
  /**
   * Ref：https://v1.vuepress.vuejs.org/config/#description
   */
  description: description,

  /**
   * Extra tags to be injected to the page HTML `<head>`
   *
   * ref：https://v1.vuepress.vuejs.org/config/#head
   */
  head: [
    ['meta', {
    
     name: 'theme-color', content: '#3eaf7c' }],
    ['meta', {
    
     name: 'apple-mobile-web-app-capable', content: 'yes' }],
    ['meta', {
    
     name: 'apple-mobile-web-app-status-bar-style', content: 'black' }]
  ],

  /**
   * Theme configuration, here is the default theme configuration for VuePress.
   *
   * ref：https://v1.vuepress.vuejs.org/theme/default-theme-config.html
   */
  themeConfig: {
    
    
    repo: '',
    editLinks: false,
    docsDir: '',
    editLinkText: '',
    lastUpdated: false,
    nav: [
      {
    
    
        text: 'Guide',
        link: '/guide/',
      },
      {
    
    
        text: 'Config',
        link: '/config/'
      },
      {
    
    
        text: 'VuePress',
        link: 'https://v1.vuepress.vuejs.org'
      }
    ],
    sidebar: {
    
    
      '/guide/': [
        {
    
    
          title: 'Guide',
          collapsable: false,
          children: [
            '',
            'using-vue',
          ]
        }
      ],
    }
  },

  /**
   * Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/
   */
  plugins: [
    '@vuepress/plugin-back-to-top',
    '@vuepress/plugin-medium-zoom',
  ]
}

VuePress1.xの利用と個人ブログ構築

記事ディレクトリ

導入

クイックスタート

インストール

目次

ページ

構成

おすすめ