前端自学笔记-第二篇(vuePress自动部署 & 后台项目自学)

长期更新前端自学笔记，欢迎关注

前端自学笔记 - 第一篇(nginx/flutter/后台系统/vuepress博客）

1、jenkins自动部署vuePress博客项目

自动化部署项目demo连接

blog.flutterweb.cn

jenkins自动部署的好处

本地代码推进到git仓库后，jenkins能完成后续部署事项，减轻工做量，好比，项目自动打包，自动项目部署到静态服务器，部署状况邮件通知。

tip:

今天部署好了vuepress项目，如今写好了博客页面，只要vscode一提交，jenkins会自动打包而且部署；若是部署失败，还会发送邮件提醒。爽的不行！

教程推荐

1. Jenkins打造强大的前端自动化工做流

2. jenkins配置邮件通知(上篇教程虽然有，建议用这个)

部署过程当中的坑

1. vuepress 配置要注意，对于脚本的理解很重要，否则坑很大。

   vuepress的dist目录比通常的项目要多两级，于是配置稍稍不同。 贴图感觉下：

   

   

send build artificial over SSH， 参数说明：
    
    Name:选择一个你配好的ssh服务器
    
    Source files ：写你要传输的文件路径
    1. 特别注意，起始目录是根目录 '/'
    2. 若是mobx项目下面，打包后目录是build，则
    
        a. source files: build/build.tar.gz
    
        b. Remove prefix: build/
    3. 若是mobx项目下面，打包后目录是build/docs/dist，则
    
        a. source files: build/docs/dist/build.tar.gz
    
        b. Remove prefix: build/docs/dist/
复制代码

2. 另外，购买服务器时，你们仍是买阿里云吧，最好配置高点。 我买的是腾讯云服务器，价格便宜。但今天为了自动化部署项目，jenkins挂了三四十次了，真是惨不忍睹。。。

2、后台管理系统学习进度

两周左右学完了简单的后台项目

项目地址：

Vue + Element UI 实现权限管理系统

收获：

1. 了解了登录流程，语言国际化，自定义皮肤
2. 动态加载菜单、权限管理是重点也是难点
3. mock使用了本身服务器搭建的yapi ,还算是稳定
4. 恰好最近公司在上一个后台项目，本身也有参与。这套教程不但帮助本身快速入手项目，并且偶尔能帮同事答疑。
5. 对于element ui各个模块用法及参数理解更透彻，过程当中不断才坑，不断积累经验

最难的后台项目学习计划：下两周慢慢搞定

项目地址：

手摸手，带你用vue后台

第一个项目教程很是详细，简单快速的对于后台项目框架有了总体的思惟。

而这第二个项目，将会是第一个的深刻。固然若是可以搞定，收获也将会很大。