VuePress (0. X version)

This blog is supported by a simple configuration case based on VuePress. This configuration case contains most of the configuration cases of this blog. For more details, please visit here VuePress configuration case

preface

Q: What is the article about? A: This list lists common configurations of blog sites and provides detailed configuration steps and configuration screenshots

Q: Who is this article for? A: Want to blog but don’t know how to do it and know VuePress but don’t know how to configure it

Q: What do you think of the contents of this article? A: After viewing basic configurations, you can get familiar with VuePress. After viewing advanced configurations, you can get familiar with VuePress

The installation

The main version of VuePress of this blog is 0.x, and the latest 1.x is also compatible with relevant configurations. Please feel free to use it. Also make sure your Node.js >= 8

Global Installation (recommended)

Generally speaking, it is very easy to install VuePress globally. You can run the following command to install VuePress globally

$ npm install -g vuepress
Copy the code

The local installation

Unlike a global install, a local install installs the NPM package on the project, generating a directory called node_modules, which can be installed locally (vuepress and webpack-dev-middleware are both installed)

$ npm install vuepress webpack-dev-middleware --save-dev
Copy the code

The basic configuration

The content in the basic configuration applies to the VuePress default theme. The configuration may be different for custom themes

The script command

We need at least two script commands, one for local development and one for package launch. The script command needs to be configured in the docs/package.json file, which is configured as follows

{"scripts": {vuepress dev": "vuepress dev docs", "docs:build": "vuepress build docs"}}Copy the code

To develop locally, use the following command, which enables a small server locally that you can access in your browser using localhost:8080(the default)

$ npm run docs:dev
Copy the code

To pack commands, use the following command, which generates a dist folder in the. Vuepress directory

$ npm run docs:build
Copy the code

Project directory

As a static web site generator, VuePress has certain restrictions on the project directory, and a basic project structure is shown below

|-- docs // Specific directory
    |-- README.md / / home page
    |-- .vuepress // Specific directory
        |-- config.js // Specific configuration file
|-- package.json // Script command
Copy the code

Home page

The default theme provides a HomePage, which is the contents of the readme. md file in the directory structure above. The HomePage is optional. For the HomePage of the default theme in VuePress, you can configure the following

---
home: true
lang: zh-CN
heroText: A  Personal Blog
heroImage: /logo.jpg
actionText: start -
actionLink: /interview/
features:
- title: A Blog
  details: Focus on writing front-end blogs to record daily income.
- title: For Me
  details: So nine thousand miles, then the wind is in the next, and then is today to train the wind; With nothing save the clear sky upon its back, and no obstacles in the way, it sets sail toward the south.
- title: For Interview
  details: Guangzhou, already in pit ღ( ´ ᴗ · ) than the heart
footer: Copyright © 2019-present Wangtunan
---
Copy the code

The above configuration is the homepage effect of this blog

Home Page Configuration

In the YAML format configuration section on the home page, we fill in some configurations, and we will describe each configuration in detail below

  • home:true: marks whether this page is the home page
  • lang:zh-CN: Indicates that the page language is zh-CN(simplified Chinese).
  • heroText: Title content of the home page
  • heroImage: Title image of the home page, where the full path isdocs/.vuepress/public/logo.jpgThe default topublicFind static resources in the directory
  • actionText: Indicates the content of the jump button on the home page
  • actionLink: Home jump button challenge path, where the full path isdocs/interview/readme.md, the defaultreadmeThe named file can omit the following content of the link, which is omitted as shown above
  • features: Indicates the features of the home page. The fixed format istitle + details, presented in a three-column streaming layout
  • footer: for the bottom content, as with ordinary web pages, we canfooterIt contains copyright information

The navigation bar

You need to configure the navigation bar in the. Vuepress /config.js file

Under the default theme, the nav of the navigation bar needs to be configured on the themeConfig property. The two important properties of the navigation bar are text and link, where text indicates the text content of the navigation, and link indicates the link of the navigation.

Basic navigation bar

A basic navigation bar link can be configured as follows

module.exports = {
  // Other configurations
  themeConfig: {
    nav: [{text: 'home'.link: '/' },
      { text: 'HTML'.link: '/html/' },
      { text: 'CSS'.link: '/CSS/' },
      { text: 'JavaScript'.link: '/JavaScript/'}}}]Copy the code

Basic navigation bar configuration result

Navigation drop-down list

The drop-down list needs to be configured with the Items attribute, which is an array. The object in the array is still a normal navigation object, that is, it has the text and link attributes. A navigation drop-down list can be configured as follows

module.exports = {
  // Other configurations
  themeConfig: {
    nav: [{text: 'home'.link: '/' },
      { text: 'The Front Three Musketeers'.items: [{text: 'HTML'.link: '/html/' },
        { text: 'CSS'.link: '/CSS/' },
        { text: 'JavaScript'.link: '/JavaScript/'}]}, {text: 'Vue.jss'.link: '/vue/'}}},]Copy the code

Navigation drop-down list results

Disable navigation

Disable the navigation bar is divided into two cases, the first disabled all of the navigation bar, the second in a page to disable the navigation bar, in the presence of the two different, related configuration is different, as shown below First: disable all navigation, by configuring navbar attribute to false, this way after disabled, will not exist any navigation bar

module.exports = {
  // Other configurations
  themeConfig: {
    navbar: false}}Copy the code

Set the navbar property to False at the top of each page (.md file). After this mode is disabled, the corresponding navigation bar still exists, but you cannot click to jump to it.

---
navbar: false
---
Copy the code

The built-in search

In the process of configuring the navigation bar above, besides the navigation we configured, a search box will also appear, which is the built-in search of VuePress. The built-in search can only search the index composed of h2 and H3 titles of the page. We can still configure the built-in search as follows:

  • search: By configuring the property asfalseTo disable built-in search
  • searchMaxSuggestions: Limits the maximum number of results for built-in searches by configuring this property to a number
module.exports = {
  // Other configurations
  themeConfig: {
    search: false.searchMaxSuggestions: 10}}Copy the code

The sidebar

Sidebar grouping

Sidebar grouping means grouping links into groups, one for each page

Sidebar groups can be configured as follows, where the collapsable property is set to false, meaning that the group is expanded, and true, meaning that the group is collapsed.

module.exports = {
  themeConfig: {
    // Other configurations
    sidebar: [
      {
        title: 'The Front Three Musketeers'.collapsable: false.children: [
          '/CSS/'.'/HTML/'.'/JavaScript/'] {},title: 'Vue.js'.collapsable: false.children: [
          '/Vue/'.'/Vue/Vuex.md'.'/Vue/Vue-Router.md',]}]}}Copy the code

To achieve this grouping result, the directory structure could look like this

|-- docs
|   |-- CSS
|   |   |-- README.md
|   |-- HTML
|   |   |-- README.md
|   |-- JavaScript
|   |   |-- README.md
|   |-- Vue
|       |-- README.md
|       |-- Vue-Router.md
|       |-- Vuex.md
|   |-- README.md
Copy the code

The result of the sidebar grouping

Generate the sidebar automatically

The sidebar: Auto property can be set if we simply want to automatically generate sidebars based on the headings in.md

If we want to turn on the auto-build sidebar for all.md’s, we need to do the following configuration

module.exports = {
  themeConfig: {
    // Enable the autogenerate sidebar for all pages
    sidebar: 'auto',}}Copy the code

If we turn on the auto-build sidebar for only one. Md file, we need to set the YAML properties at the top of the. Md file, as shown below

---
sidebar: auto
---
# Vue.js
This is the content section of the vue.js file
Copy the code

Disable the sidebar

As with the sidebar of a separate profile mentioned above, we can also disable the sidebar of a separate profile.

---
sidebar: false
---
# Vue.js
This is the content section of the vue.js file
Copy the code

Last Updated

The last update time is not enabled by default. It is based on the git commit timestamp, so our static site needs to be managed through the git init repository, and it is calculated by git commit time.

The last update time can be configured by configuring lastUpdated, which defaults to false and accepts strings and Booleins.

module.exports = {
  themeConfig: {
    // 1. Accepts a string that sets the label to the last updated time, for example: last updated: May 3, 2019 21:51:53
    lastUpdated: 'Last Updated'.// 2. Set true to enable the last update time
    lastUpdated: true.// 3. Set false to disable last update time (default)
    lastUpdated: false
}
Copy the code

Previous post/next post

If we don’t have the previous one or the next one, just set the corresponding YAML property to false

The previous/next article configuration can be displayed by configuring YAML prev and next, linking addresses to the same writing rules as navigational addresses, and a.md file configured for the previous/next article can be shown as follows

---
prev: /HTML/
next: /JavaScript/
---
# HTML5

This is the content section of HTML5
Copy the code

The following figure shows the configuration results of the previous and next articles

Git repository and edit links

When exporting our static site, we may need a navigation link to our GitHub repository, which can be addressed by the following configuration

Repo represents the address of our link and repoLabel represents the name of the link, which automatically appears at the end of our NAV navigation when configured

module.exports = {
  themeConfig: {
    // Other configurations
    repo: 'https://github.com/wangtunan/blog'.repoLabel: 'Github'.nav: [{text: 'home'.link: '/' },
      { text: 'The Front Three Musketeers'.items: [{text: 'HTML'.link: '/html/' },
        { text: 'CSS'.link: '/CSS/' },
        { text: 'JavaScript'.link: '/JavaScript/'}]}, {text: 'Vue.js'.link: '/vue/'}}},]Copy the code

Editing is not enabled by default, so you can configure editLinks to make editing links appear. EditLinkText specifies the text content for editing

A configuration with edit links enabled could look like this

module.exports = {
  themeConfig: {
    // Other configurations
    repo: 'https://github.com/wangtunan/blog'.repoLabel: 'Github'.editLinks: true.editLinkText: 'Edit this page'.nav: [{text: 'home'.link: '/' },
      { text: 'The Front Three Musketeers'.items: [{text: 'HTML'.link: '/html/' },
        { text: 'CSS'.link: '/CSS/' },
        { text: 'JavaScript'.link: '/JavaScript/'}]}, {text: 'Vue.jss'.link: '/vue/'}}},]Copy the code

After configuring the edit link, the result might look like the figure below

You can also set YAML to disable edit links for a.md file

---
editLink: false
---
Copy the code

Markdown extension

link

Anchor link

In VuePress all titles in.md files (h2 and H3 by default) automatically add anchor links, so if we need to jump to a fixed anchor, we can set it as follows

[The anchor link] (/ vuepress / # pwa configuration)
Copy the code

Internal links

Within VuePress, files ending in.md or.html are converted to

for SPA navigation, which is case sensitive. If the file is called readme. md, it will be compiled to index.html, so when we visit /vuepress/, we are actually accessing /vuepress/ readme. md or /vuepress/index.html

Custom container

VuePress has three built-in custom containers of different states, including tip, Warning, and Danger. You can set the custom container title next to the type. If you do not write the container title, it will be tip by default

::: tip warning ::: ::: warning ::: ::: danger Danger container :::Copy the code

The results for the three custom containers are shown below

Code block category

For different code blocks, you need to set different types for display. Common code block types are as follows

  • htmlType: This indicates that the code block ishtmlThe format of
  • cssType: This indicates that the code block iscssThe format of
  • jsType: This indicates that the code block isjavascriptThe format of
  • stylusType: This indicates that the code block isstylusFormat, and similar types oflessandscss
  • mdType: This indicates that the code block ismarkdownThe format of
  • jsonType: This indicates that the code block isjsonThe format of

Their corresponding configuration is shown in the following HTML code block (observe the small corner mark in the upper right corner of the code block)

<div class="box">HTML type code block</html>
Copy the code

CSS code block (observe the small corner marker in the upper right corner of the code block)

.box {
  width: 100px;
  height: 100px;
}
Copy the code

Code block in JS format (observe the small corner marker in the upper right corner of the code block)

console.log('Js block of code')
Copy the code

The same applies to blocks of code in other formats

Code block highlighting and line number

Code block highlight

Nuggets does not support code block highlighting, please use the VuePress configuration to see the results

In Markdown, we can highlight code blocks as follows (type followed by curly braces)

`` js{4}
export default {
  data () {
    return {
msg: 'Highlighted! '
    }
  }
}
``
Copy the code

It might result in something like this (the fourth line is highlighted, the number of lines does not start at zero).

export default { data () { return { msg: 'Highlighted! '}}}Copy the code

Multi-line highlight, just separate the line numbers with commas, e.g. Js {1,3,5}

export default { data () { return { msg: 'Highlighted! '}}}Copy the code

Code block line number

The code block line number configuration also needs to be configured in config.js, as shown below

module.exports = {
  // Other configurations
  markdown: {
    // Displays the code block line number
    lineNumbers: true}}Copy the code

After configuration, the code block line number results as shown below

Use Emojis

Not all emojis are supported (nuggets don’t support emojis, but have to remove the example)

In the.md file, we can use emojis, you can also go to Emoji Search to find your favorite emojis, and go to Common Emoji to access commonly used emojis, an Emoji can be written like this

#### Here are Emoji: Tada:
:100: :rocket:
Copy the code

Github style table

Sometimes we want to list some simple tables in the.md file, which can be configured as follows

| | serial number of the order no. | orders | | -- -- -- -- -- -- -- -- -- -- -- -- - | : -- -- -- -- -- -- -- -- -- -- -- -- -- : | -- -- -- -- -- - : | | 1 $1600 | 20180101 | | | | 20180102 | 2 $12 | | 3 | 20180103 | | $1Copy the code

The above table is consistent with the Github table style, and its results are shown below

The serial number The order no. The order amount
1 20180101 The $1600
2 20180102 $12
3 20180103 The $1

Automatic directory generation

We sometimes want to automatically generate directories by title, so we can use [[toc]] to output our directories, which by default enumerates only H2 and H3 headings

[[toc]]

# H1 title

# # h2 headings
# # # h3 title
# # # h3 title

# # h2 headings
# # # h3 title
# # # h3 title
Copy the code

Its result might look something like this

Use Vue template syntax

Using the interpolation

In.md files, you can use Vue interpolation expressions like the following

# interpolation1+1 is {{1+1}}Copy the code

1+1 results in {{1+1}}(Nuggets not supported, use VuePress to view this case)

instruction

In addition to using interpolation as above, we can also use instructions such as V-for. Here is an example using the V-for instruction

The result of the list rendering is:<span v-for="number in 5">{{number}}</span>
Copy the code

The result of the list rendering is: {{number}}(ditto, nuggets not supported)

Use native JavaScript and CSS

If you are going to manipulate the DOM in native JS, it is important to remember that VuePress pages are rendered on the server and it is best to manipulate the DOM after the page has loaded

VuePress gives us the ability to write native JS and CSS directly in.md files, which can be in the following form

<! -- Style content -->
<style>
.box {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  color: #fff;
  background-color: #58a;
}
</style>

<! -. Md content - >
#### uses native JS and CSS
<div id="container"></div>

<! - js content - >
<script>
window.onload = function() {
  var dom = document.getElementById('container');
  dom.innerHTML = 'box content'
  dom.className = 'box'
}
</script>
Copy the code

The result of the above code is shown below

Use the CSS preprocessor

VuePress not only gives us the ability to use native JS and CSS like above, but also gives us the ability to use CSS preprocessor. It has built-in configuration of CSS preprocessor, we just need to install the corresponding dependency and use it. In particular, VuePress has built-in Stylus. We don’t need to install it and can use it directly, now let’s use the Stylus to rewrite the example above

<! <style lang="stylus">. Box width: 100% height: 100px text-align: center color: #fff background-color: #fb3 </style> <! -. Md content - > # # # # use native JS and CSS < div id = "container" > < / div > <! Onload = function() {var dom = document.getelementbyid ('container'); dom.innerHTML = 'box content' dom.className = 'box' } </script>Copy the code

The result with the Stylus preprocessor is shown below:

Using built-in components

External links

OutboundLink is used to identify an external link that follows the link and is used by default when setting external links in the.md file.

Below is the configuration of an external link, which links to Baidu

[The baidu] (https://www.baidu.com)
Copy the code

At this point, the little icon behind the text is the built-in OutboundLink.

The Badge (Angle)

The built-in Badge component has three properties to pass

  • text: It specifies the content of the corner marker
  • type: Similar to custom containers, there are three different types, respectivelytip,warnanderrorThe default istip
  • vertical: specifies how the corner is aligned with the content, and has two values, respectivelytopandmiddleThe default istop

The use of corner markers is as follows

# # # # Vue < Badge text = "2.5.0 +" / >
#### Vuex <Badge text="beta" type="warn" vertical="top"/> 
#### vue-resource 
      
Copy the code

Use Vue components

VuePress allows us to use our own components in addition to the built-in components. By default, VuePress registers all components globally in the.vuepress/ Components directory, which we can use directly in.md files. Let’s start with a.vue file for customer-Component in the.vuepress/ Components directory (otherwise, create a new one) with the contents shown below

<template> <div class="customer-component"> todoList: <div v-for="item in list" :key="item.id"> Item: {{item.text}}, status: {{item.done? 'Done ':' in progress '}} </div> </div> </template> <script> export default {name: 'CustomerComponent', data () {return {list: [] } }, created () { this.list = [ { id: 1, text: 'JavaScript', done: false }, { id: 2, text: 'HTML', done: false }, { id: 3, text: 'CSS', done: true }, { id: 4, text: 'Vue.js', done: true }, { id: 5, text: 'VuePress', done: true } ] } } </script>Copy the code

Introduced in the.md file

### Use custom components
<customer-component/>
Copy the code

VuePress result

The advanced configuration

Basic configuration API

The title (the title)

The title title lets us configure the static site title, which is fixed in our top left corner

You can configure the title as follows

module.exports = {
  // Other configurations
  title: 'VuePress Blog'
}
Copy the code

The following figure shows the configuration result

Description (Website description)

Description will be rendered to the HTML of the current page with a <meta> tag, which is for search engines to identify, this is SEO configuration

You can configure description as follows

module.exports = {
  // Other configurations
  title: 'VuePress Blog'.description: 'VuePress Blog site Description '
}
Copy the code

The following figure shows the configuration result

base

The default value of base is /, which belongs to the deployment process and can be configured to access our project in the GitHub Pages directory

In simple terms, if we want to configure this address at https://xxx.github.io/blog/, so we base the following configuration is required

module.exports = {
  // Other configurations
  base: '/blog/'.title: 'VuePress Blog'.description: 'VuePress Blog site Description '
}
Copy the code

Host (hostname) and POST (port)

The default value of host is 0.0.0.0, which specifies the host name (IP address), and the default value of port is 8080, which specifies the port number

With host and port configured, we can access from the browser via IP address +port port, for example

module.exports = {
  // Other configurations
  port: 3000.host: '127.0.0.1'.base: '/blog/'.title: 'VuePress Blog'.description: 'VuePress Blog site Description '
}
Copy the code

After the above configuration is successful, we can access our project at 127.0.0.1:3000

Dest (Output directory)

The dest default value is.vuepress/dist, which can be configured to help us set the output directory of the packaged files

If we want to export the dist directory to the root path instead of the.vuepress folder, we can do the following configuration

module.exports = {
  // Other configurations
  dest: 'dist'.port: 3000.host: '127.0.0.1'.base: '/blog/'.title: 'VuePress Blog'.description: 'VuePress Blog site Description '
}
Copy the code

Simple style overlays

If you just want to be able to do some simple style overrides in the default style, you need to create two style files in the.vuepress directory: Override. styl and style.styl, which are stylus files (or any other style file)

  1. Override. Styl resets the style variable for the default theme
  2. Style.styl applies custom styles to the default theme

override.styl

For VuePress’s default theme, it provides some theme constants that we can configure freely. The configurable constants and their corresponding explanations are as follows

// Hover color under default theme (theme green)
$accentColor = #3eaf7c 
// Text color under the default theme
$textColor = #2c3e50
// The border color under the default theme
$borderColor = #eaecef
// Code block background color under the default theme (background black)
$codeBgColor = #282c34
Copy the code

To demonstrate the effect, let’s give these lights a bold color

$accentColor = #fb3 
$textColor = green
$borderColor = red
$codeBgColor = #58a
Copy the code

The effect of the above Settings is as follows

style.styl

What are custom styles? For example, if we feel that the text color and background color of a single line of code block under the default theme are not bold enough, we can set our custom styles like this after reviewing the elements with the browser

.content
  code
    background-color: #fff5f5;
    color: #ff502c;
Copy the code

After applying the above custom styles, the single-line code block under the default theme looks like this

Introducing snippets

If we are writing a.md document and need to import existing JS code, VuePress allows us to import existing JS code snippets if we do not want to copy and paste them again using code blocks. The syntax is as follows

< < < @filepath// Import also supports highlighting <<< @filepath{highlightLines}
Copy the code

Examples are as follows

< < < @ /docs/.vuepress/js/hello.js {2}
Copy the code

The result of importing the code snippet

Algolia search

In the basic configuration section we talked about built-in search, which only indexes the H2 and H3 headings of a page, whereas if we want to do a full-text search, we need to use Algolia search, which can be configured like this

module.exports = {
  // Other configurations
  themeConfig: {
    algolia: {
      apiKey: '<API_KEY>'.indexName: '<INDEX_NAME>'}}}Copy the code

Unlike built-in search out of the box, using Algolia search requires us to submit websites to them for indexing

The configuration of this summary was not successfully configured due to its specificity. If you are interested, please go here to Algolia search. If you are successfully configured, their search results will look like the following (Vue official website)

Managing Static Resources

In a.md file, if we want to use static resources, we can refer to resources in several ways

  • Relative path/absolute path
  • WebpackThe alias

Let’s introduce them one by one

Relative paths

To reference an image resource in a. Md file, its fixed format is as follows

/ / format! [Alt when image is missing] (Image path) // Example: absolute path! [Baidu logo] (https://www.baidu.com/logo.png// Example: relative path! [Algolia search] (../images/vuepress/16.png)
Copy the code

If you have a relatively simple directory structure, it is often easy and straightforward to use relative paths or graph bed techniques to upload the image to the graph bed server and then fill in the absolute path.

Webpack alias

Like vue-CLI scaffolding, which is usually very friendly to access using the Webpack alias when paths are long or directory structures are complex, it can be configured like this

//.vuepress/config.js
module.exports = {
  // Other configurations
  configureWebpack: {
    resolve: {
      alias: {
        '@vuepress': '.. /images/vuepress'.'@vue': '.. /images/vue'.'@interview': '.. /images/interview'}}}}Copy the code

After the above configuration, we can use this in.md files

// Do not use aliases! [Algolia search] (../images/vuepress/16.png// Use an alias! [Algolia search] (~@vuepress/16.png)
Copy the code

Custom page style classes

Sometimes we want to use a particular style for a particular page, VuePress allows us to do this, you just need to write custom styles in.vuepress/style.styl and use them on the corresponding page, they may be configured this way

// .vuepress/style.styl
.customer-page-class
  color: #fb3;
  background-color: # 333;
Copy the code

At the top of the corresponding.md file, reference custom styles using YAML syntax

---
pageClass: customer-page-class
---
Copy the code

Use custom styles for its results

Customize the page layout

Under the default theme, each.md file is rendered in a tag like

, and generates a sidebar for the page, edit links (if any), last updated (if any), and previous/next (if any). But if we don’t want to generate pages like this and want to use custom layouts, that is, using Vue components for custom page development, VuePress gives us the ability to customize everything else while keeping the navigation bar, its configuration might look something like this 

// Use YAML syntax in. Md files that require customization
---
layout: customerComponent
---
Copy the code

Above such a component name, to its corresponding path. Vuepress/components/customerComponent vue, because vuepress automatically help us put. Vuepress/registered components directory of all the components, This can be used in any.md file, and the code in customerComponent.vue could look something like this

<template>
  <div class="customer-component">
    <div class="left">123</div>
    <div class="center">123</div>
    <div class="right">123</div>
  </div>
</template>
<style lang="stylus">
  .customer-component
    height: calc(100vh - 60px);
    display: flex;
    background-color: #333;
    color: #fff;
    & > div
      flex: 0 0 200px;
      width: 200px;
      text-align: center
    .left
      background-color: #58a;
    .center
      flex: 1;
      background-color: #fb3;
    .right
      background-color: #58a;
</style>
Copy the code

The results of using a custom layout are as follows

Use third-party themes

VuePress supports third-party themes. You need to perform the following operations in. VuePress /config.js

The name of the VuePress plug-in is fixed, which is usually vuepress-theme-xxx. After the third-party theme is installed, NPM install only needs to write the last name during the configuration. For example, vuepress-theme-reco theme is configured as follows.

module.exports = {
  // Other configurations
  theme: 'reco'
}
Copy the code

Use third-party libraries

VuePress provides enhanceapp.js for application-level configuration. The path is.vuepress/ enhanceapp.js. Relevant configuration is as follows

// Use custom styles
import './style/index.styl'
// Use third-party packages
import _ from 'lodash'
/ / other
// import xxx from xxx

export default ({
  Vue,
  options,
  router,
  siteData 
}) => {
  / /... Do some other application-level optimizations
}
Copy the code

The deployment of

Deploy to Github Pages

To deploy to Github Pages, we need to take the following steps

  • Pack to generatedistfolder
  • Create a new warehouse and create a new one under this warehousegh-pagesbranch
  • Commit code to the remote repository (containsmasterBranches andgh-pagesBranch)

packaging

Before deployment, we need to use the package commands we configured

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
Copy the code

Run the package command NPM run docs:build, it will generate a dist folder in the.vuepress directory, then we just need to upload this folder to Github, its package results can be referred to below

> vuepress build docs
 WAIT  Extracting site metadata...
[23:53:00] Compiling Client
[23:53:00] Compiling Server
Language does not exist sh
Language does not exist sh
[23:53:07] Compiled Server in 7s
[23:53:12] Compiled Client in 12s
WAIT  Rendering static HTML...
DONE  Success! Generated static files in docs\.vuepress\dist.
Copy the code

Create a new repository and create the Github Pages branch

The details of how to create a Github repository and branch are not mentioned here, but this is what your repository should look like if you’re successful

Commit to making

Above we created a new remote repository, we can do the following command in the dist directory

$git remote add origin; // Switch to the gh-pages branch; // Commit to the gh-Pages branch $git checkout master $git merge gh-PagesCopy the code

After submit success, by https://xxx.github.io or https://xxx.github.io/xxx/ (depending on whether you configure the base attribute) for a visit

As for automated deployment, if you are new to it, follow the normal process of submitting code to a remote repository. It is not recommended for beginners.