zoukankan      html  css  js  c++  java
  • VuePress博客网站搭建

    vuePress

    vuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

    由 VuePress 生成的每个页面,都具有相应的预渲染静态 html,它们能提供出色的加载性能,并且对 seo 友好。然而,页面加载之后,Vue 就会将这些静态内容,接管为完整的单页面应用程序(SPA)。当用户在浏览站点时,可以按需加载其他页面。VuePress中文网

    环境搭建

    安装

    Node.js版本需要>=8才可以。

    npm install -g vuepress 或者在已有项目中安装
    npm install vuepress -D

    安装完成检测是否安装成功

    vuepress -v
    //vuepress v1.0.3

    其他信息:

    vuepress v1.0.3
    
    Usage:
      $ vuepress <command> [options]
    
    Commands:
      dev [targetDir]    start development server
      build [targetDir]  build dir as static site
      eject [targetDir]  copy the default theme into .vuepress/theme for customization.
      info               Shows debugging information about the local environment
    
    For more info, run any command with the `--help` flag:
      $ vuepress dev --help
      $ vuepress build --help
      $ vuepress eject --help
      $ vuepress info --help
    
    Options:
      -v, --version  Display version number 
      -h, --help     Display this message 

    创建项目

    mkdir VuePress
    cd VuePress

    初始化项目

    通过npm init快速创建项目的pageage.json文件

    npm init -y
    {
      "name": "VuePress",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

    新建docs文件夹

    docs文件夹作为项目文档根目录,主要放置Markdown类型的文章和.vuepress文件夹。

    mkdir docs

    设置package.json

    在script中添加dev启动和build打包脚本命令

    "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "dev": "vuepress dev docs",
        "build": "vuepress build docs"
      },

    创建README.md

    在docs里面创建README.md

    cd docs
    echo "## Hello VuePress" > README.md

    创建.vuepress目录

    npm run build

    可直接打包构建README.md文件 并生成.vuepress

    .vuepress 目录这是放置所有 VuePress 特有(VuePress-specific) 文件的地方。

    创建config.js

    不做任何配置的话,页面会显得过于简单,用户也无法方便地浏览网站;

    配置 VuePress 站点的基本文件是 .vuepress/config.js,其中导出一个 JavaScript 对象:

    touch config.js

    目录结构

    ├── docs # 文档目录
    │    ├── .vuepress //存放所有资源和打包结果
    │   │         ├── dist //打包结果
    │   │        ├── public //公共资源文件
    │   │        ├── ...
    │   │       └── config.js //配置文件
    │   ├── demo //分类文档存储
    │   │    ├── demo1.md
    │   │    ├── ...
    │   │    └── demon.md
    │   └── README.md 
    └── package.json//项目启动配置

    资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com

    基本配置

    module.exports = {
        title: '文档管理', 
        description: '呵呵博客',
        head: [
            ['link', { rel: 'icon', href: '/logo.ico' }]
        ]
    }

    title

    • Type: string
    • Default: undefined

    网站的标题。这将是所有页面标题的前缀,并显示在默认主题的导航栏中。

    description

    • Type: string
    • Default: undefined

    网站描述。这将在页面 html 中表现为一个 <meta> 标签。

    head

    • Type: Array
    • Default: []

    被注入页面 HTML <head> 额外的标签。每个标签可以用 [tagName, { attrName: attrValue }, innerHTML?] 的形式指定。例如,要添加自定义图标:

    port

    • Type: number
    • Default: 8080

    指定用于 dev 服务器的端口。

    dest

    • Type: string
    • Default: .vuepress/dist

    指定 vuepress build 的输出目录。

  • 相关阅读:
    fedora上部署ASP.NET——(卡带式电脑跑.NET WEB服务器)
    SQL Server 请求失败或服务未及时响应。有关详细信息,请参见事件日志或其它适合的错误日志
    8086CPU的出栈(pop)和入栈(push) 都是以字为单位进行的
    FTP 服务搭建后不能访问问题解决
    指定的 DSN 中,驱动程序和应用程序之间的体系结构不匹配
    Linux 安装MongoDB 并设置防火墙,使用远程客户端访问
    svn Please execute the 'Cleanup' command. 问题解决
    .net 操作MongoDB 基础
    oracle 使用绑定变量极大的提升性能
    尝试加载 Oracle 客户端库时引发 BadImageFormatException。如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行,将出现此问题。
  • 原文地址:https://www.cnblogs.com/qianxiaox/p/14102189.html
Copyright © 2011-2022 走看看