自学几个月前端,为什么感觉什么都没学到??
这种现象在很多的初学者和自学前端的同学中是比较的常见的。
因为自学走的弯路是比较的多的,会踩很多的坑,学习的过程中是比较的迷茫的。
最重要的是,在学习的过程中,不知道每个部分该学哪些知识点,学到什么程度才算好,学了能做什么。
很多自学的朋友往往都是自己去找资料学习的,资料上有的或许就学到了,资料上没有的或许就没有学到。
这就会给人一个错误的信息就是,我把资料上的学完了,估计也-就差不多的了。
但是真的是这样的吗?非也,因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线,你可以参考。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
还有很多的同学在学习的过程中一味的追求学的速度,很快速的刷视频,写了后面忘了前面,最后什么都没有学到,什么都知道,但是什么都不懂,要具体说,也说不出个所以然。
所以学习编程一定要注重实践操作,练习敲代码的时间一定要多余看视频的时间。
- 界面简洁优雅
- 容易上手
- 更好的兼容、扩展
Markdown
语法- 响应式布局,PC端、手机端
Google Analytics
集成- 支持
PWA
三、运行原理
VuePress
搭建的静态网站实际上是由 Vue
, Vue Router
和 webpack
驱动的单页面应用程序。如果你以前使用过 Vue
,那么在编写或开发自定义主题时(甚至可以使用 Vue DevTools
来调试你的自定义主题!),你会融入到熟悉的开发体验中!
在构建过程中,我们会创建应用程序的服务器渲染版本,并且实际上是通过访问每个路由,来渲染相应的 HTML
。这种方式受到 Nuxt
的 nuxt generate
命令以及 Gatsby
等其他项目的启发。
四、项目搭建
4.1 项目结构
首先说明一下官方推荐的目录结构:
4.2 创建项目文件夹
可以右键手动新建,也可以使用 mkdir
命令新建:
mkdir vuepressBlogDemo
全局安装 VuePress
npm install -g vuepress
进入 vuepressBlogDemo 文件夹,初始化项目
使用 npm init
或 npm init -y
(默认yes)
npm init -y
4.3 创建文件夹和文件
在 vuepressBlogDemo 文件夹中创建 docs 文件夹,在 docs 中创建 .vuepress
文件夹,在.vuepress
中创建 public
文件夹和 config.js
文件,最终项目结构如下所示:
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: {
// ...
### 最后
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
>![](https://img-blog.csdnimg.cn/img_convert/ed9ca1cb03c5b351064e912b9b07c2ee.webp?x-oss-process=image/format,png)
: '唐',
link: '/tang/'
}],
sidebar: {
// ...
### 最后
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
>[外链图片转存中...(img-D0pB1FOR-1715045566578)]