Web前端最新Vue进阶(九十六):VuePress 详解(2),一个小例子彻底搞懂前端的MVP模式到底是什么
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-P24L4JcX-1715202307666)]
文末
技术是没有终点的,也是学不完的,最重要的是活着、不秃。
零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。
最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
自学最怕的就是缺乏自驱力,一定要自律,杜绝“三天打鱼两天晒网”,到最后白忙活一场。
高度自律的同时,要保持耐心,不抛弃不放弃,切勿自怨自艾,每天给自己一点点鼓励,学习的劲头就会很足,不容易犯困。
技术学到手后,找工作的时候一定要好好准备一份简历,不要无头苍蝇一样去海投简历,容易“竹篮打水一场空”。好好的准备一下简历,毕竟是找工作的敲门砖。
拿到面试邀请后,在面试的过程中一定要大大方方,尽力把自己学到的知识舒适地表达出来,不要因为是自学就不够自信,给面试官一个好的印象,面试成功的几率就会大很多,加油吧,骚年!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
vuepressBlogDemo
├─── docs
│ ├── README.md
│ └── .vuepress
│ ├── public
│ └── config.js
└── package.json
在 config.js 文件中配置网站标题、描述、主题等信息:
module.exports = {
themeConfig: {
nav: [{
text: '唐',
link: '/tang/'
}, {
text: '宋',
link: '/song/'
}, {
text: '更多',
link: '/more/'
}],
sidebar: {
'/tang/': [
['', '简介'], {
title: '代表人物',
collapsable: false,
children: [
'libai/'
]
}
],
'/song/': [
['', '简介'], {
title: '代表人物',
collapsable: false,
children: [
'liqingzhao/'
]
}
]
}
}
}
其中,/tang/、/song/、’'和libai/等表示当前导航栏或侧边栏点击所跳转的路由地址(即相应的.md文件),按照路由创建对应的文件。
- ''会显示为当前目录下的
README.md文件。['', '简介']当前侧边栏的title为简介。/tang/表示为tang文件夹下的README.md,/tang表示为tang.md文件。- 可以使用
sidebar: auto自动生成侧边栏,这里采用自定义侧边栏。
在 package.json 文件里添加两个启动命令
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
4.4国际化
在config.js中添加locales字段,以配置国际化。
locales: {
'/': { // 中文
lang: 'zh-CN',
title: '诗词鉴赏',
description: '静态站点 诗词鉴赏'
},
'/en/': { // 英文
lang: 'en-US', // 将会被设置为 <html> 的 lang 属性
title: 'Appreciation of poetry',
description: 'Static Site Appreciation of poetry'
}
}
配置默认主题的导航栏和侧边栏支持国际化,在上述themeConfig中增加locales字段:
themeConfig: {
locales: {
'/': { // 默认语言,这里为中文
nav: [{
text: '唐',
link: '/tang/'
}],
sidebar: {
// ...
}
},
'/en/': { // 英文
nav: [{
text: 'Tang',
link: '/en/tang/'
}],
sidebar: {
// ...
}
}
}
}
nav和sidebar和前文字段含义相同。
相应的也要增加国际化相应的文件夹及文件,整体结构跟原结构一致,如图:
4.5 项目启动
一切就绪,启动项目
npm run dev
五、部署上线
项目开发完毕后,便可像部署其他前端Vue项目一样进行项目部署上线,依赖系统只需要通过链接形式,访问该系统上的相关支持文档。从而实现小助手功能。
六、示例演示
部署在本地的项目演示效果如下:

国际化部分,还需要再做研究设计。
七、一些小亮点
完成了基础搭建后,就可以在docs目录下新建 .md 文件写文章了(.md 是 Markdown 语法文件,你需要掌握 Markdown 的一些基本写法)
vuepress支持自定义布局以及自定义主题,并且可以使用很多插件以及自定义插件。
八、拓展阅读
最后
文章到这里就结束了,如果觉得对你有帮助可以点个赞哦
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

.csdn.net/topics/618166371)》
最后
文章到这里就结束了,如果觉得对你有帮助可以点个赞哦
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-P24L4JcX-1715202307666)]
更多推荐


所有评论(0)