美文网首页
vuepress搭建博客详解

vuepress搭建博客详解

作者: 一只正在成长的程序猿 | 来源:发表于2021-04-27 14:09 被阅读0次

    一、介绍

    VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

    二、文件目录

    ├── project
    │   ├── .vuepress 
    │   │   ├── public 
    │   │   │   └──images
    │   │   └──config.js 
    │   ├── docs
    │   │   └──xxx.md 
    │   └── README.md
    └── package.json
    

    二、快速开始

    # 安装
    npm install -g vuepress
    
    # 新建一个 markdown 文件
    echo '# Hello VuePress!' > README.md
    
    # 开始写作
    vuepress dev .
    
    # 构建静态文件
    vuepress build .
    

    三、搭建过程详解

    1. 下载

    npm install -g vuepress
    

    2. 新建project文件夹

    为自定义文件夹,名字可随便取

    3. 在project文件夹,新建如下内容

    • vuepress文件夹

    • docs文件夹

    • README.md

    4.执行命令

    npm init
    

    5. 在packeage.json里面,新增

    "scripts": {
            "docs:dev": "vuepress dev ",
            "docs:build": "vuepress build ",
            },
    
    • 我的package.json
    {
        "name": "y",
        "version": "1.0.0",
        "description": "'# Hello VuePress!'",
        "main": "index.js",
        "directories": {
            "doc": "docs"
        },
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "docs:dev": "vuepress dev ",
            "docs:build": "vuepress build ",
        },
        "author": "",
        "license": "ISC"
    }
    
    

    6.执行命令

    npm install
    

    7. 启动项目

    npm run docs:dev
    

    8. 打包

    npm run docs:build
    

    四、源码克隆

    #克隆
    git clone https://github.com/wgjh5/blogs.git
    
    #下载
    npm install
    
    #启动
    npm run docs:dev
    
    #打包
    npm run docs:build
    
    相关链接:

    相关文章

      网友评论

          本文标题:vuepress搭建博客详解

          本文链接:https://www.haomeiwen.com/subject/uzrbqltx.html