文章输出:【拉勾教育Java高薪训练营 】
- 学习体会
- 学习拉钩前端课程有近3个多月的时间了,每天给自己安排2个多小时的视频任务,边看视频,边看笔记,最后进行实操训练。在这个过程中,最艰难的任务就是最后的作业题。感觉每次的作业难度好大啊,作业特别具有综合性,几乎涵盖了一个章节的知识点。不得不说,作业很具有挑战性。我的前端底子不是很强,做作业总是遇到很多困难和阻碍,不是项目发布失败,就是卡到一个问题上了,不过最后通过老师的帮助和自己的努力解决了问题,心里还是蛮有成就感的。剩下还有3个月的时间,我感觉我的技术会有更大的提升。
- 课程评价
- 拉钩前端设计的课程真的是太符合市场的需求了,对于每个章节的设计也很有逻辑性,视频也很简短,内容浓缩到精华。在项目实操的过程中,老师也很耐心帮助我解决问题。我特别感谢小峰老师和圈圈老师对我的帮助。
- 收获
- 对于有4年前端经验的我来说,学了近一半的课程,感觉比我工作接触的内容还多,而且我所学到的内容都是现在市场上所需要的技能,这个课程对我的技能给予了很大的提升,对我马上跳槽也有了很大的自信。报名前,我觉得网上有很多的免费课程可以学,所以很犹豫要不要花钱报这个课程,但是我整体看了这个课程体系,感觉很不错,现在学了一半,我感觉这个课程很值,不仅仅是对课程内容的满意,还有整个拉钩老师团队的满意。我觉得单打独斗到高手,需要走很多弯路,而遇到贵人帮自己的话,进阶就会很快。
一、准备工作
- Gridsome
- Strapi
- 购买一个虚拟主机或者自己电脑安装一个虚拟主机:我买的是云服务 UCLOUD https://www.ucloud.cn/ (Linux 系统 ubuntu )
- 在虚拟机安装 msyql,具体安装步骤参考我的博客 :https://blog.csdn.net/weixin_37883657/article/details/114835435
- 安装 mysql8时,第一次提示输入密码,记得输入空格,不要设置,在完成安装后再进行密码的设置,否则输出密码后,进入 mysql 会提示密码输入错误,解决办法重置密码,可以参考我的博客 :https://blog.csdn.net/weixin_37883657/article/details/114937477
- 在本地安装 Navicate ,用来远程连接虚拟机的 mysql 数据库
-
安装完毕,先不要启动
-
打开安装目录
-
复制 PatchNavicat.exe 到该目录
-
二、前端用 Gridsome 创建项目
- 安装 Gridsome 脚手架(用 yarn 或者 npm)
- yarn global add @gridsome/cli
- npm install --global @gridsome/cli
- 创建一个 Gridsome 项目
gridsome create my-gridsome-site cd my-gridsome-site gridsome develop
注意事项:
1、第一步gridsome create my-gridsome-site
就卡住了解决办法:结束 control + c,删除项目里的依赖 rm -rf node_modules,手动 cnpm install 安装 node_modules
2、gridsome 项目安装依赖注意事项(配置环境变量):
npm config set sharp_binary_host "https://npm.taobao.org/mirrors/sharp"
npm config set sharp_libvips_binary_host "https://npm.taobao.org/mirrors/sharp-libvips"
- 我们以 startbootstrap-clean-blog 这个博客为例,用 gridsome 来实现这个博客
- 将这个项目克隆到本地:git clone https://gitee.com/daisy_yangyang/startbootstrap-clean-blog.git,无需安装依赖,直接打开 index.hrml 就可以访问
- 处理首页模板
- 先处理 index 中的 css 资源文件,在
startbootstrap-clean-blog
项目的index
页面中,将css
文件提取到 我们的Gridsome
项目中, 其他 HTML 也是一样的。- npm install bootstrap
- npm install @fortawesome/fontawesome-free
- 在 my-gridsome-site 项目的 main.js 中引入
import 'bootstrap/dist/css/bootstrap.min.css' import '@fortawesome/fontawesome-free/css/all.min.css' import './assets/index.css'
- Google 字体文件 可以在 assets 中创建一个 index.css
// asstes/index.css @import url("https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic"); @import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"); // 将clean-blog css 复制到assets/index.css 文件中
- 在
pages/index.
- 先处理 index 中的 css 资源文件,在