乐趣区

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

jiezi

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

自动化部署项目 demo 链接

http://blog.flutterweb.cn

jenkins 自动部署的好处

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

tip:

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

教程推荐

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

https://juejin.im/post/5ad198…

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

    https://www.cnblogs.com/imyal…

部署过程中的坑

  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/
  1. 另外，购买服务器时，大家还是买阿里云吧，最好配置高点。
    我买的是腾讯云服务器，价格便宜。但今天为了自动化部署项目，jenkins 挂了三四十次了，真是惨不忍睹。。。

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

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

项目地址：

Vue + Element UI 实现权限管理系统 前端篇：https://www.cnblogs.com/xifen…

收获 ：

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

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

项目地址：

手摸手，带你用 vue 后台：
https://juejin.im/post/59097c…

第一个项目教程非常详细，简单快速的对于后台项目框架有了整体的思维。

而这第二个项目，将会是第一个的深入。当然如果能够搞定，收获也将会很大。

退出移动版