Hello VuePress

发布: 2019-06-08 20:54:29 标签: vue

hello VuePress!

hello VuePress

vuepress 官方文文档

安装和配置

安装和使用

01# 安装
02vuepress install -g vuepress
03
04# 开发(开发文件夹docs)
05npm dev docs
06
07# 编译
08vuepress build docs
复制代码

目录结构

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json
  • docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
  • docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
  • docs/.vuepress/theme: 用于存放本地主题。
  • docs/.vuepress/styles: 用于存放样式相关的文件。
  • docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件,会生成在最终的 CSS 文件结尾,具有比默认样式更高的优先级。
  • docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量,或者设置新的 stylus 颜色常量。
  • docs/.vuepress/public: 静态资源目录。
  • docs/.vuepress/templates: 存储 HTML 模板文件。
  • docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
  • docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
  • docs/.vuepress/config.js: 配置文件的入口文件,也可以是 YML 或 toml。 d- ocs/.vuepress/enhanceApp.js: 客户端应用的增强。

默认路由

文件的相对路径 页面路由地址
/README.md /
/guide/README.md /guide/
/config.md /config.html

基础配置

01// .vuepress/config.js
02module.exports = {
03 title: 'Hello VuePress', // 导航title
04 description: 'Just playing around', // 网页描述
05 themeConfig: {
06 nav: [ // 导航链接
07 { text: '首页', link: '/' },
08 {
09 text: '指导', items: [
10 { text: '基础', link: '/guide/' },
11 { text: '配置', link: '/config/' }
12 ]
13 },
14 { text: 'Github', link: 'https://github.com/kuan1/test-vuepress' },
15 ],
16 sidebar: {
17 '/guide/': [
18 '',
19 ],
20 '/config/': [
21 '',
22 ]
23 }
24 }
25}
复制代码

静态资源

01![An image](./image.png)
复制代码

配置别名

01![Image from alias](~@alias/image.png)
02![Image from dependency](~some-dependency/image.png)
复制代码
01// .vuepress/config.js
02module.exports = {
03 configureWebpack: {
04 resolve: {
05 alias: {
06 '@alias': 'path/to/some/dir'
07 }
08 }
09 }
10}
复制代码

公共文件

.vuepress/public

基础路径

01<img :src="$withBase('/foo.png')" alt="foo">
复制代码

markdown使用vue

.vuepress/components 会被全局注入组件,markdown中写入组件名字

<test />