GitHub remote repository

1. Create a Git repository

Execute code in project folder (created projects do not need to execute code changes)git init

2. Check the local code status

git status

3. Submit all documents to the staging area

git add .

4. Make a local submission

Git commit -m

5. Connect the remote warehouse

git remote add origin https://github.com/sun-unc/test.git

git push -u origin master

6. Initialize the project again before writing it

Check whether the project directory is clean

Create a branch (git checkout -b login)

7. Commit the local code to the remote repository

Git status (red is all files that have been modified and not committed)

Commit all files to the staging area (git add.)

Git commit -m ‘XXXXX’

View branches (git banch)

At this point, the code submitted above is put into the Login branch staging

Merge branches into main branchesNote that you must switch to the main branch before merging】

Git checkout master

Merge code from the LOGIN branch into master

Commit native code to the cloud (Git push)

7. At this time, there is only one master branch in the cloud, and the local login branch needs to be submitted separately

Git checkout Login
Git push -u Origin Login The first time to push the login branch to the remote repository (Git push -u Origin Login), it means to push the local branch to the cloud Origin repository for storage

The Vetur plugin and ESLint plugin formats conflict

In the project code; “And” will get an ESLint error, Vetur will automatically change it back after you manually change it, add a configuration file:.prettierrc under the project folder

{"emi": false, // semicolon "singleQuote": true // single quotes}Copy the code

Rule validation for Element UI forms

<el-form class="demo-ruleForm" :model="loginForm" :rules="loginFormRules">
  <el-form-item prop="username">
      <el-input
        autocomplete="true"
        prefix-icon="iconfont icon-user"
        v-model="loginForm.username"
      ></el-input>
   </el-form-item>
</el-form>
Copy the code
  data () {
    return {
      loginForm: {
        username: ' '.password: ' '
      },
      // Form validation rules
      loginFormRules: {
        username: [{required: true.trigger: 'blur'.message: 'Please enter a user name' },
          { min: 3.max: 10.message: 'Between 3 and 10 characters long'.trigger: 'blur'}].password: [{required: true.trigger: 'blur'.message: 'Please enter your password' },
          { min: 3.max: 10.message: 'Between 3 and 10 characters long'.trigger: 'blur'}]}}}}Copy the code

1. If the model is not written, it will not affect the two-way data binding of the V-Model, but it will not affect the form rule validation if the model is not written.

2. Prop =” XXX “is corresponding to the data in rules, which is also indispensable for form verification and needs to be placed in the label

4. Style changes to the Element UI navigation menu

1. Right-click to check the current style, copy the class name, and paste in the CSS to modify it

2. El-submenu cannot be modified. Write a new style to remove scoped

<style scoped lang="scss">

</style>

<style>
    .el-menu>.el-submenu .el-submenu__title {
        .
        .
        .
        .
        .
        .
    }
</style>
Copy the code

Scope slots in ElementUI

To render the status bar chart, you can add it through the scope slot

<el-table :data="userList" border stripe>
   <el-table-column type="index"></el-table-column>
   <el-table-column label="姓名" prop="username"></el-table-column>
   <el-table-column label="邮箱" prop="email"></el-table-column>
   <el-table-column label="电话" prop="mobile"></el-table-column>
   <el-table-column label="角色" prop="role_name"></el-table-column>
   <el-table-column label="状态" prop="mg_state">
     <template slot-scope="scope">
        {{ scope.row }}
     </template>
   </el-table-column>
   <el-table-column label="操作"></el-table-column>
</el-table>
Copy the code

This allows you to retrieve the data in the userList through scope.row. Using this data through the component allows you to render the desired result

<el-table-column label=" status "prop="mg_state"> <template slot-scope="scope"> //{{scope.row}} <el-switch v-model="scope.row.mg_state"> </el-switch> </template> </el-table-column>Copy the code