- Présentation
- CARACTÉRISTIQUES
- Construction d'environnement
- Développement en profondeur
- Paramètres du thème du modèle
- Autres plugins
- Un code source complet
Présentation
VuePress est un projet de création de blogs et de sites Web simples, un projet statique basé sur vuejs et hébergé par You Yuxi personnellement.
Basé sur un tel système, il peut être facilement utilisé pour publier de petits articles, tels que les centres d'aide et les blogs officiels, et prend en charge l'analyse des fichiers md.
VuePress se compose de deux parties: l'une est un générateur de site Web statique minimaliste qui prend en charge le développement de thèmes avec Vue, et l'autre est un thème par défaut optimisé pour la rédaction de documents techniques. Son intention initiale était de répondre aux besoins de documentation de Vue et de ses sous-projets.
Sa structure de projet centrée sur Markdown vous aide à vous concentrer sur l'écriture avec une configuration minimale; profitez de l'expérience de développement de Vue + webpack, vous pouvez utiliser les composants Vue dans Markdown, et vous pouvez utiliser Vue pour développer des thèmes personnalisés; ce sera pour chaque Le pré-rendu de page génère du HTML statique et, en même temps, lorsque chaque page est chargée, elle s'exécute en tant que SPA.
Site officiel de VuePress: [ https://vuepress.vuejs.org/zh/ ]
CARACTÉRISTIQUES
- Extension Markdown intégrée optimisée pour la documentation technique
- Possibilité d'utiliser les composants Vue dans les fichiers Markdown
- Système de thème personnalisé basé sur Vue
- Générer automatiquement un travailleur de service
- Intégration à Google Analytics
- "Dernière mise à jour" basée sur Git
- Support multilingue
- Paramètres de thème et de plugin gratuits
Le thème par défaut contient
- Disposition réactive
- Page d'accueil en option
- Recherche de titre concise hors de la boîte
- Recherche en Algérie
- Barre de navigation et barre latérale personnalisables
- Liens GitHub générés automatiquement et liens d'édition de page
Ce qui précède est le contenu fourni par le site officiel; voyons comment créer rapidement un document technique en cours de pratique. Bien sûr, après vous être familiarisé avec son fonctionnement *, c'est aussi un bon choix pour optimiser et devenir votre propre blog! Conformément au principe selon lequel les produits fabriqués par Youda doivent être des produits fins, je pense que VuePress se développera très bien à l'avenir!
* Le but de ce tutoriel est de construire rapidement un modèle de base de documentation technique. Pour une configuration et des instructions plus spécifiques, veuillez vous référer à la configuration officielle du site Web
* https://vuepress.vuejs.org/zh/config/
https://vuepress.vuejs.org/zh/default-theme-config/
Construction d'environnement
Afficher la version de nodejs
Remarque: version de Node.js> = 8
node -v
Installation globale
npm install -g vuepress
Créer un répertoire de projet
mkdir vuepress-demo
cd vuepress-demo
Initialisez le projet, générez et éditez package.json
npm init -y
Entrez package.json et modifiez le contenu du script
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
Créer un répertoire de base
vuepress-demo
├─package.json
├─docs
| ├─README.md
| ├─.vuepress
| | ├─config.js
| | ├─public
| | | └favicon.ico
Modifiez le fichier de configuration-config.js
module.exports = {
title: 'Hello VuePress',
description: 'Hello, my friend!',
head: [
['link', {
rel: 'icon',
href: `/favicon.ico`
}]
],
dest: './docs/.vuepress/dist',
ga: '',
evergreen: true,
}
Modifier README.md
VuePress fournit une prise en charge prête à l'emploi pour la matière YAML , nous pouvons imiter la page d'accueil de vuepress pour optimiser comme suit:
---
home: true
heroImage: /favicon.ico
actionText: 快速上手 →
actionLink: /guide/
features:
- title: 简洁至上
details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present xxxxxx
---
Exécutez le projet
vuepress dev docs
Exécutez le code ci-dessus et, enfin, vous demanderez l'URL de prévisualisation http: // localhost: 8080 / (le numéro de port peut être modifié en fonction de la configuration https://vuepress.vuejs.org/zh/config/#port )
Ouvrez l'URL, nous pouvons voir Vers l'écran suivant:
Le contenu de README.md a été parfaitement présenté!
Développement en profondeur
Navigation dans la configuration
Créez d'abord un fichier dans le répertoire docs
Le fichier README.md sous chaque dossier est le contenu du répertoire actuel;
configurons la navigation correspondante dans le fichier config.js
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{
text: 'Languages',
items: [
{ text: 'Chinese', link: '/language/chinese' },
{ text: 'English', link: '/language/english' }
]
},
{ text: 'External', link: 'https://www.baidu.com' },
]
}
Ajoutez du contenu pour README.md sous le fichier guide:
## This is guide
content...
### title3
content...
### title3-01
## small title
content...
À ce stade, nous utilisons la commande complète pour exécuter le projet:
# 开发调试状态
npm run docs:dev
# 项目发布
npm run docs:build
Exécutez le projet et cliquez sur Guide de navigation, ou cliquez sur "Démarrage rapide" sur la page d'accueil pour voir l'écran suivant:
À ce stade, nous pouvons voir que le contenu du guide a été affiché avec succès, cliquez sur Lanuages pour voir le menu déroulant et cliquez sur Externe pour passer à Baidu.
Configurer la barre latérale
Ajoutez-le toujours sous l'attribut themeConfig sous le fichier config.js:
sidebarDepth: 2,
sidebar: [
{
title: 'Guide',
collapsable: false,
children: ['/guide/']
}
]
Remarque: Utilisez themeConfig.sidebarDepth pour modifier son comportement. La profondeur par défaut est 1, ce qui extraira l'en-tête vers h2. Si vous le définissez sur 0, les liens d'en-tête seront désactivés. En même temps, la profondeur maximale est 2, il extraira les en-têtes h2 et h3.
Après la configuration, exécutez le projet
Résumé
Grâce aux opérations ci-dessus, ce projet a achevé avec succès le modèle de base des documents techniques, tels qu'une configuration plus personnalisée pouvant être optimisée en fonction de la demande via le site officiel.
Paramètres du thème du modèle
VuePress prend en charge la définition de thème gratuite et fournit une série de plugins de thème sur le site officiel, URL associée:
https://github.com/vuepressjs/awesome-vuepress
Autres plugins
# 自动边栏插件
vuepress-plugin-auto-sidebar
Plugin de commentaires:
https://valine.js.org/quickstart.html
Excellent cas:
www.z01.com/cli
http://wp.z01.com
https://vuepress-theme-reco.recoluan.com/
Un code source complet
https://github.com/zoomla/waipo
[Fin du texte intégral]