Use Element-UI to develop a back-end management system

I. Implementation process of the project

1. Use vUE to create a project and install element-UI
2. Implement the login page
3. Realize the development of various components in home
4. Project optimization

Two, the knowledge point used

2.1. Login logic

1. Log in to the page for the first time
2. If the login succeeds, save the token information and go to the Home page
3. If there is token information, enter the home page directly
4. If no token information is displayed, the login page is displayed

Use components in element-UI

Installed 3.1.

Use the global installation method

vue add element-ui
Copy the code

3.2. Use

After installation, there is a folder named plugins in the SRC path, which you can refer to in main.js

import './plugins/element.js'
Copy the code

3.3. The form the form

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
  <el-form-item label="Form name" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
</el-form>
Copy the code

Properties:

el-form

Data bound to the Model form
Rules Form Rule verification
The ref parent component can be accessed through this.$refs

el-form-item

Label Specifies the name of the form
Rules for binding prop forms

3.4. Input Box Button

  <el-input placeholder="Please enter the content" v-model="input3" class="input-with-select">
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
Copy the code

V-model Data to bind

3.5. Breadcrumb navigation

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">Home page</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">Activity management</a></el-breadcrumb-item>
  <el-breadcrumb-item>List of activities</el-breadcrumb-item>
  <el-breadcrumb-item>Event details</el-breadcrumb-item>
</el-breadcrumb>
Copy the code

3.6. The card

<el-card class="box-card">
  <div>Content of the card</div>
</el-card>
Copy the code

3.7. The table

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
Copy the code

Table A table can have a number of attributes

Data Indicates the displayed data
Border whether the border has a vertical border
Check whether the stripe is a zebra table

Attributes in el-table-column

Type Indicates the column type. If selection is set, multiple selection boxes are displayed. If index is set, the index of the row (counting from 1) is displayed. If you set expand, it appears as an expandable button
Index If type=index is set, you can customize the index by passing the index attribute
Label Indicates the displayed title
Prop Specifies the name of the field corresponding to the column contents. You can also use the property property
Width Indicates the width of the column
Formatter is used to format content
Align = align

3.8. The pager

<span class="demonstration"</span><el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage4"
    :page-sizes="[100, 200, 300, 400]." "
    :page-size="100"
    layout="total, sizes, prev, pager, next, jumper"
    :total="400">
</el-pagination>
Copy the code

attribute

Current-page Indicates the current page number
Page – Sizes Indicates the option Settings of the number selector per page
Page-count Specifies the total number of pages. Set either of the two parameters to display the page number. To support changes to Page-sizes, you need to use the total attribute
Page-size Indicates the number of items displayed on each page
Layout Specifies the layout of components. The names of subcomponents are separated by commas
Total Total number of entries

methods

Size-change pageSize is triggered when changing the number of pages (called when changing the number of pages per page)
Current-change Triggered when currentPage changes (called when page number is changed)

3.9.Cascader cascade selector

  <span class="demonstration">hover trigger submenu </span><el-cascader
    v-model="value"
    :options="options"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange"></el-cascader>
Copy the code

attribute

Options Shows the data
Props configuration options (as follows)

Value Specifies that the value of the option is an attribute value of the option object

Label Specifies the option label as an attribute value of the option object

Children specifies that the child of the option is an attribute value of the option object

ExpandTrigger How the secondary menu is expanded

methods

Change is triggered when the selected node changes

3.9. The Switch Switch

<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>
Copy the code

attribute

Active-color Switch Specifies the background color when turned on
Inactive-color Switch Background color when inactive-color switch is turned off

3.10. The Upload to Upload

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :on-success="handleSuccess"
  :headers="headerObj"
  list-type="picture">
  <el-button size="small" type="primary">Click on the upload</el-button>
  <div slot="tip" class="el-upload__tip">Only JPG/PNG files can be uploaded, and the maximum size is 500kb</div>
</el-upload>
Copy the code

attribute

Action Specifies the address of the upload server
Headers sets the request header for the upload (since upload has its own upload method, the axios request we set won’t work, so we need this property to set the request header)
List-type Indicates the type of the file list

methods

On-preview is called when previewing a file
On-remove Called when a file is removed from the file list
On-success Called when the file is uploaded successfully

3.11. The Tag label

<el-tag type="success"Closable > Tag one </el-tag>Copy the code

There are many types: 1.success 2.info 3.warning 4.danger\

attribute

Closable removes tags

methods

Click The event that is triggered when a Tag is clicked
Close Indicates the event that is triggered when the Tag is closed

3.12.Message Prompts

this.$message.success()
Copy the code

The status can be: Warning Warning

3.13.NavMenu Navigation menu

<el-col :span="12">
    <h5>Custom colors</h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>A navigation</span>
        </template>
        <el-menu-item-group>
          <template slot="title">Group a</template>
          <el-menu-item index="1-1">Option 1</el-menu-item>
          <el-menu-item index="1-2">Option 2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="Group 2">
          <el-menu-item index="1-3">Option 3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">Option 4</template>
          <el-menu-item index="1-4-1">Option 1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">Navigation 2</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">Navigation three</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">Navigation four</span>
      </el-menu-item>
    </el-menu>
  </el-col>
Copy the code

3.14. Tabs TAB

 <el-tabs :tab-position="'left'" style="height: 200px;" :before-leave="" tab-click="">
    <el-tab-pane label="User Management">User management</el-tab-pane>
    <el-tab-pane label="Configuration Management">Configuration management</el-tab-pane>
    <el-tab-pane label="Role Management">Role management</el-tab-pane>
    <el-tab-pane label="Timed task compensation">Timed task compensation</el-tab-pane>
  </el-tabs>
Copy the code

attribute

Tab-position (top/right/bottom/left)

methods

Before-leave The hook before the toggle tag, which prevents the toggle if it returns false or a Promise and reject.

Article 3.15 Steps Steps

<el-steps :space="200" :active="1" finish-status="success">
  <el-step title="Step 1"></el-step>
  <el-step title="Step 2"></el-step>
  <el-step title="Step 3"></el-step>
</el-steps>
Copy the code

Attribute method

Space Indicates the spacing of each step. If you do not fill in this parameter, the spacing will be self-adaptive. Percentage supported.
Active Sets the current activation step
Finish-status Sets the status of the end step

Iv. Project optimization

4.1. Adding a Progress bar (NProgress)

npm install nprogress -S
Copy the code

Set on and off in AXIos request and response interception

// Request interception
axios.interceptors.request.use(config= > {
  // Displays a progress bar
  NProgress.start()
  return config
})
// Response interception
axios1.interceptors.response.use(config= > {
  // Hide the progress bar
  NProgress.done()
  return config
})
Copy the code

4.2. Remove console.log() from the packaging phase

npm install transform-remove-console -D
Copy the code

4.3. Complete multiple entry of packaging, separate the entry of packaging in development stage and release stage

module.exports = {
    chainWebpack:config= >{
        // Publish mode
        config.when(process.env.NODE_ENV === 'production'.config= >{
            //entry Finds the default packing entry. Clear deletes the default packing entry
            //add adds a new packing entry
            config.entry('app').clear().add('./src/main-prod.js')})// Development mode
        config.when(process.env.NODE_ENV === 'development'.config= >{
            config.entry('app').clear().add('./src/main-dev.js')}}}Copy the code

4.4. Load the CDN

Configure it in vue.config.js first

config.set('externals', {
    vue: 'Vue'.'vue-router': 'VueRouter'.axios: 'axios'.echarts: 'echarts'.nprogress: 'NProgress'.lodash: "_".'vue-quill-editor': 'VueQuillEditor'
})
Copy the code

Then add the CDN to the index.html page

4.5. Script does not need to be loaded during development

config.plugin('html').tap(args= > {
    args[0].isProd = true
    return args
})
Copy the code

Then wrap the loaded CDN in index.html with the following method

The < %if(htmlWebpackPlugin. Options. IsProd) for the loading within {% > CDN} < % % >Copy the code

4.6. Enable Gzip compression

npm i compression-webpack-plugin -S
Copy the code

Then configure it in vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js'.'css']

module.exports = {
    configureWebpack: {
    plugins: [
      // configure compression-webpack-plugin compression
      new CompressionWebpackPlugin({
        algorithm: 'gzip'.test: new RegExp('\ \. (' + productionGzipExtensions.join('|') + '$'),
        threshold: 10240.minRatio: 0.8}}})]Copy the code

4.7. Lazy route loading

Routing can be used lazily to load files in routing configuration instead

const Home = () = > import("./home")
Copy the code

This enables lazy loading of routes

Use Element-UI to develop a back-end management system

Use Element-UI to develop a back-end management system

I. Implementation process of the project

Two, the knowledge point used

2.1. Login logic

Use components in element-UI

Installed 3.1.

3.2. Use

3.3. The form the form

3.4. Input Box Button

3.5. Breadcrumb navigation

3.6. The card

3.7. The table

3.8. The pager

3.9.Cascader cascade selector

3.9. The Switch Switch

3.10. The Upload to Upload

3.11. The Tag label

3.12.Message Prompts

3.13.NavMenu Navigation menu

3.14. Tabs TAB

Article 3.15 Steps Steps

Iv. Project optimization

4.1. Adding a Progress bar (NProgress)

4.2. Remove console.log() from the packaging phase

4.3. Complete multiple entry of packaging, separate the entry of packaging in development stage and release stage

4.4. Load the CDN

4.5. Script does not need to be loaded during development

4.6. Enable Gzip compression

4.7. Lazy route loading

Related Posts

Javascript gets all image nodes from Markdown

Start with the Express framework to learn Node

React source code – write Hook useState