(3)dest
该属性表示的是项目打包以后文件生成的目录
例如我们将该 dest
的值改成 ./dist
,那么当我们执行 npm run build
打包文件后,会在当前根目录下生成一个 dist
文件夹,打包好的项目文件都在该文件夹中
(4)head
该属性表示的是 html
文档的 head
标签中需要额外插入的其它标签
默认生成的是:
“head”: [ // 在head标签中生成以下标签
[
“link”, // 生成link标签
{
“rel”: “icon”, // rel属性值为icon
“href”: “/favicon.ico” // href属性值为 /favicon.ico
}
],
[
“meta”, //生成meta标签
{
“name”: “viewport”, // name属性值为viewport
“content”: “width=device-width,initial-scale=1,user-scalable=no” // content属性值为width=device-width,initial-scale=1,user-scalable=no
}
]
]
当然我们也可以继续添加别的标签,例如:
“head”: [ // 在head标签中生成以下标签
[“link”, { “rel”: “icon”, “href”: “/favicon.ico” }],
[“meta”, { “name”: “viewport”, “content”: “width=device-width,initial-scale=1,user-scalable=no” }],
[“meta”, { “name”: “keywords”, “content”: “前端,js,css” }],
[‘meta’, { name: ‘author’, content: ‘零一’ }],
]
(5)theme
该属性表示的是当前项目使用的主题
这里我们是用 vuepress-theme-reco
主题的脚手架生成的,所以它默认就是 reco
,我们可以不用修改,当然后续你想使用别的主题也可以,可以参考一下 vuepress
的官网
(6)themeConfig
该属性表示的是主题的配置信息
这里东西有点多,我们慢慢来讲
1. nav
该属性表示导航栏的配置信息
默认生成的 nav
值如下:
“nav”: [
{ // 第一个导航按钮
“text”: “Home”, // 按钮名称为 Home
“link”: “/”, // 对应的跳转链接为 /
“icon”: “reco-home” // 按钮的前置图标为 reco-home
},
{ // 第二个导航按钮
“text”: “TimeLine”, // 按钮名称为 TimeLine
“link”: “/timeline/”, // 对应的跳转链接为 /timeline/
“icon”: “reco-date” // 按钮的前置图标为 reco-date
},
{ // 第三个导航按钮
“text”: “Docs”, // 按钮名称为 Docs
“icon”: “reco-message”, // 按钮的前置图标为 reco-message
“items”: [ // 该按钮的子菜单
{ // 子菜单中的第一个导航按钮
“text”: “vuepress-reco”,
“link”: “/docs/theme-reco/”
}
]
},
{ // 第四个导航按钮
“text”: “Contact”, // 按钮名称为 Contact
“icon”: “reco-message”, // 按钮的前置图标为 reco-message
“items”: [ // 该按钮的子菜单
{ // 子菜单中的第一个导航按钮
“text”: “GitHub”,<