Long-term update front-end self-study notes, welcome attention

Nginx/Flutter/Backend system/Vuepress blog

Jenkins automatically deploys the vuePress blog project

Automated deployment project Demo link

blog.flutterweb.cn

Benefits of Jenkins automatic deployment

Once the native code is pushed into the Git repository, Jenkins is able to complete subsequent deployment tasks and reduce workload, such as automatic project packaging, automatic project deployment to a static server, and email notification of deployment.

tip:

Vuepress project was deployed today, now the blog page is written, Jenkins will automatically package and deploy as soon as vscode is submitted; If the deployment fails, an email notification is sent. Oh, no!

The tutorial is recommended

  1. Jenkins built a powerful front-end automation workflow

  2. Jenkins configure email notification (although this is available in the previous tutorial)

Potholes during deployment

  1. Vuepress configuration needs to be paid attention to. It is important to understand the script.

    Vuepress’s Dist directory is two levels higher than a typical project, so the configuration is slightly different. Feel the texture:

Send Build artificial over SSH, parameter description: Name: select an SSH server that you have configured Source files: write the path of the file that you want to transfer1.Note that the start directory is the root directory'/'
    2.Source files: build/build.tar.gz b. Remove prefix: build/3.If mobx project below, after the package directory is the build/docs/dist, is a. source files, build/docs/dist/build. The tar. Gz b. Remove the prefix: build/docs/dist /Copy the code
  1. In addition, when buying a server, we still buy Ali cloud, the best configuration high. I bought Tencent cloud server, the price is cheap. But today Jenkins failed 30 or 40 times for the automated deployment project. It was a disaster…

Second, background management system learning progress

I finished the simple background project in about two weeks

Project Address:

Vue + Element UI to implement the rights management system

Harvest:

  1. Understand the login process, language internationalization, custom skin
  2. Dynamic loading menu and permission management are the key and difficult points
  3. Mock uses yAPI built on its own server, which is stable
  4. Just recently the company in the last backstage project, oneself also participated in. Not only did the tutorial help me get started quickly on my project, but it also helped me occasionally answer questions from colleagues.
  5. I had a better understanding of the usage and parameters of each element UI module, and accumulated experience during the process

Hardest backstage project learning plan: Work it out over the next two weeks

Project Address:

Hand touch hand, take you with vUE backstage

The first project tutorial is very detailed, simple and quick for the background project framework of the overall thinking.

And this second project will be the depth of the first one. Of course, if it can be done, the harvest will be great.