Project purpose

Do a feature front end project, and MacOS system desktop can do a lot of things

1. The main technology stack in my work is VUe2. x, I want to learn react through the project practice.

Familiarize yourself with TypeScript

affiliated

My computer isn’t actually macOS, so it’s doomed to be low-imitation. However, this does not affect the realization of the cool effect of learning macOS like Dock and the purpose of achieving the above original intention.

Modified my desktop through this tutorial for reference

Main software myDockFinder

Development environment setup

Use create-React-app with typescript to build quickly

yarn create-react-app my-app --typescript

Copy the code

Sass is introduced for CSS preprocessing

yarn add node-sass

Copy the code

Setting the background image

After removing all the unnecessary files and code, I used the serra-4K.jpg file from the above tutorial as the background for the App interface

// App.scss

.App {

  min-width: 1500px;

background: url(.. /assets/image/sierra4 -K.jpg) center/100% no-repeat;

}

Copy the code

Results the following

Use Github to automate deployment

The procedure for deploying the Create React App to Github is faulty

I used GitHub Actions instead of references

Add a homepage in package.json

Format: https:// {yourGithubName}. Making. IO / {yourRepositoryName}

// package.json

// ...

  ,

  "homepage": "https://adashuai5.github.io/my-desktop"

}

// ...

Copy the code

Create a new project file. Github /workflows/ci.yml

name: my-desktop

on:

  push:

    branches:

      - master

jobs:

  build-and-deploy:

    runs-on: ubuntu-latest

    steps:

      - name: Checkout

        uses: actions/checkout@master



      - name: Build and Deploy

        uses: JamesIves/github-pages-deploy-action@master

        env:

          ACCESS_TOKEN: ${{ secrets.MY_WINDOW }}

          BRANCH: gh-pages

          FOLDER: build

          BUILD_SCRIPT: npm install && npm run build

Copy the code

The ACCESS_TOKEN here is the Secrets set under the Settings bar in the Github repo

Do this and Github will automatically run Actions to create a workflow after each push

Once your push is successful, open Settings and find Github Pages

Selecting gh-Pages Branch will bring up the project browsing link shown above, such as my project my-Desktop

Also, the project code, welcome watch and Star.

summary

At this point, the project process is to go again.

At present, the project has completed the dock, simple Settings, basic calculator, basic drawing board and other functions. Even these existing functions still need to be improved.

Later, I will slowly optimize and update the series of articles from time to time when the corresponding module code is optimized to a certain extent. 🍮