Vue3.0 project actual combat + ElementUI from entry to actual combat

Posted by phwae on Sun, 20 Feb 2022 18:55:54 +0100

If you are Xiaobai, this set of information can help you become a big bull. If you have rich development experience, this set of information can help you break through the bottleneck
2022web full set of video tutorial front-end architecture H5 vue node applet Video + data + code + interview questions.

Course address: Vue3 0 project actual combat 2021 | Vue differentiation comparison + actual operation of the company's background management system | zero foundation introduction front-end development tutorial (C#/.Net/Vue Foundation / Vue3 technology introduction / Vue actual combat)_ Beep beep beep_ bilibili

ElementUI from introduction to actual combat [promotion and salary increase, seize the day] - learn video tutorial - Tencent classroom

Fatal Frame. Opening introduction

Vue3 vs Vue2

Vue cli build Vue3 project

First taste of vue3 composite API

Actual combat element plus + Axios + vue3

I Vue running environment installation, why do I need to install the running environment

Pre installed environment: node v8+

Why do I need to run environment vue project = = file type is vue he needs to be compiled into js files can be recognized by the browser. Will one click installation increase the learning cost? We just use the node environment and don't need to learn alone

Install node environment and download | node JS Chinese network

View node version: node – v

Vue3 of this course needs node version 8 or above

II npm image installation

npm is the built-in resource manager of node

View npm version: npm -v npm

Image: Taobao NPM image registry address:

Cnpmjs image registry address:

Set image source: npm config set registry address

View image source: npm config get registry

III VueCli scaffold installation

Install Vue cli NPM install - G @ Vue / cli

-g Global

IV Building Vue3 projects using Vue cli

Differences between Vue CLI and Vue

Scaffolding is based on Vue JS for rapid development of the complete system, through @ vue/cli to achieve rapid construction of standardized project scaffolding

Relationship between Vue version and VueCLI version

The Vue version is not affected by the scaffold version. Using VueCLI to build the project process, you can select the corresponding version of Vue according to your needs

View VueCLI version number: vue -v

V Building Vue3 projects using Vue cli

Run the command under the project file: Vue createproject name

Vi Vue3 and vue2 main JS comparison

VII Vue3 lifecycle changes and setup functions

And 2 Composite API corresponding to version x life cycle

1. Beforecreate - > use setup()

2. Created - > use setup()

3.beforeMount -> onBeforeMount

4.mounted -> onMounted

5.beforeUpdate -> onBeforeUpdate

6.updated -> onUpdated

7.beforeDestroy -> onBeforeUnmount

8.destroyed -> onUnmounted

9.errorCaptured -> onErrorCaptured

onRenderTracked check dependency is tracked. When the render function is called, it will check which responsive data is collected and depends on onrendertrigged. When the update operation is performed, it will check which responsive data causes the component to re render.

setup is the entry of composite API in Vue3

beforeCreate and created will be executed in setup

Unable to use this to get the relevant data of the current component. setup can only be executed synchronously, not asynchronously

VIII ref,reactive, responsive api

reactive and ref

Only the data marked by the responsive api can become responsive data

ref – used to mark simple type data

reactive -- Mark complex type data (deep response)

If you use ref object / array, the object / array will be automatically converted to a reactive proxy object

ref data operation: in js, you need to value, not required in the template (internal parsing will automatically add. value)

IX Element plus introduction

Installing Vue add element plus using cli

Element Plus - The world's most popular Vue 3 UI framework

Component | Element

X Introducing http request framework axios

Install axios http request framework npm install axios

Basic usage of axios:

Xi Encapsulating axios

1. Use of Axios Foundation

Basic usage of axios:

axios.create({config}) / / create an Axios instance

axios.get(url,{config}) //get request, data,{config}) //post request

axios.interceptors.request.use() / / request interceptor

axios.interceptors.response.use() / / request interceptor

See the following documents for details

Axios Chinese document | Axios Chinese website | axios


import axios from 'axios'
//axios.create creates an Axios instance. We write a configuration for this instance. All subsequent requests sent through the instance are subject to the current configuration
const $http = axios.create({
    baseURL: '',
    timeout: 1000,
    // headers: {'X-Custom-Header': 'foobar'}

  // Add request interceptor
  $http.interceptors.request.use(function (config) {
    // What to do before sending the request
    return config;
  }, function (error) {
    // What to do about request errors
    return Promise.reject(error);

// Add response interceptor
$http.interceptors.response.use(function (response) {
    // Do something about the response data
    return data;
  }, function (error) {
    // Do something about response errors
    return Promise.reject(error);

  export default $http


import $http from './index.js'

export const getCourseList= (data)=>{
    return $http.get('',data)

export const login=(data)=>{
    return $http.get('',data)

//views/login.vue call

  <div class="login">
    <h4>Day and night background management system</h4>
      <el-form-item label="account number">
        <el-input placeholder="Please enter the account number" v-model=""></el-input>
      <el-form-item label="password">
        <el-input placeholder="Please input a password" v-model="loginData.password" show-password></el-input>
          <el-button @click="subFun" class="sub-btn" type="primary">Sign in</el-button>
import {reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 import {login} from '../http/api.js'
 import router from '../router/index.js'
export default {
  name: "Login",
  setup() {
      let loginData=reactive({

      let subFun =()=>{
        //First judge whether the account and password have been filled in
              ElMessage.error('Please fill in the account number and password first');


<style scoped>
  width: 500px;
  margin: 150px auto;
  border:1px solid #efefef;
  border-radius: 10px;
  text-align: center;
  width: 100%;

2.axios cross domain processing

What is cross domain

Configure cross domain requests

① Create Vue. From the project root directory config. js

② Write devServe configuration

③ Resolve devServe configuration

XII Vue routing

1.1 front end routing

Routing is the path manager of SPA (single page application), which establishes the mapping relationship between url and page

Front end routing mode

① The hash mode simulates a complete URL through the hash of the URL, so when the URL changes, the page will not be reloaded. ② the History mode uses the pushState() and replaceState() added in the HTML5 History Interface to modify the browser's History stack

1.2 Vue router routing configuration

1.3 sub routing

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/login.vue'

const routes = [
    path: '/Home',
    name: 'Home',
    component: Home,
        path: '/courseList',
        name: 'CourseListin',
          title:'Course list'
        component: () => import(/* webpackChunkName: "login" */ '../views/courseList.vue')
        path: '/teacherList',
        name: 'TeacherList',
          title:'Instructor list'
        component: () => import(/* webpackChunkName: "login" */ '../views/teacherList.vue')
        path: '/personal',
        name: 'Personal',
          title:'Personal Center'
        component: () => import(/* webpackChunkName: "login" */ '../views/personal.vue')
    path: '/',
    name: 'Login',
    component: Login,

const router = createRouter({
  history: createWebHashHistory(),

export default router

1.4 route tuning

Routing optimization scheme

① The size of the route splitting project becomes larger, the route is bloated and the readability is poor. The coupling is reduced and the maintainability is improved according to the service splitting

② Route lazy loading reduces the compilation volume and increases the running speed of the page

Route splitting

1. Split routing by service

2. Create multiple routing data sources according to the split

3. In index JS page for routing integration

Significance of routing lazy loading

At the end of Vue project compilation, there is an html blank page and several js files. Route splitting divides the js files of the development environment into multiple js files. Lazy loading divides the compiled route files into multiple js files and loads them on demand.

① Change routing configuration mode

② Resolution configuration

1.5 routing parameters

Through label

valueString //$route.params.key

url parameters

path:'/params/:newsId/:newsTitle', //$route.params.newsId

query parameters

{ name:'xxx',query: { queryId: status }} //$route.query.queryId

XIII Vuex global status


Is a special for Vue JS application development state management mode. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way

Significance of state management

  • Ensure a single data source for objects
  • Data remains as responsive as Vue
  • Data operation isolation to ensure data security
  • Global data sharing ensures data dissemination

Vuex data operation process

1. The state of the state application level should be concentrated in a single store object

2. mutation is the only way to change the state, and the process is synchronous

3. action asynchronous logic should be encapsulated in action

XIV Vue3 vs Vue2

  1. 1.5-2 times faster, 1.1 times faster, 1.2 times faster, 1.3 times faster, and 1.1 times faster
  2. Volume reduction volume reduction tree shaking webpack plug-in vue2 130.01k vue3 113.37k
  3. Easier to maintain composition API (added)
  4. With higher native support, Proxy (object interception) is used instead of object Defineproperty Proxy: ES6 native syntax

XV Home page layout implementation

Refer to the official website of Element

  <div class="home">
      <el-header class="top-box">
          <el-row :gutter="24">
          <el-col :span="18">
              <img class="logo" src="../assets/logo.png" alt="">
          <el-col :span="6">
            <div class="info-box">
              <el-button class="out-btn" type="text">sign out</el-button>
        <el-aside width="200px">
              <el-menu-item :route="i.path" v-for="i in tabList" :key="" :index="">
                <!-- <i class="el-icon-document"></i> -->
                <template #title>{{i.meta.title}}</template>
          <div class="content-box">

// @ is an alias to /src
// import {reactive} from "vue";
import router from "../router/index";
export default {
  name: "Home",
  setup() {
    let tabList = router.options.routes[0].children;
    return {
<style lang="scss" scoped>
.top-box {
  background: #efefef;
  padding: 5px;
  .logo {
    width: 50px;
  .info-box {
    text-align: right;
  .out-btn {
    margin-left: 10px;

XVI Course list and pagination

  <div class="select-box">
      <el-select v-model="" placeholder="Please select id">
          v-for="item in [1,2,3,4,5,6,7]"
     <el-input v-model="option.title" placeholder="Please enter a title"></el-input>
    <el-button @click="getTabList" type="primary">query</el-button>
  <el-table border :data="data.table[]" style="width: 100%">
    <el-table-column prop="title" label="title"> </el-table-column>
    <el-table-column prop="body" label="content"> </el-table-column>
    <el-table-column prop="id" label="id"> </el-table-column>
    layout="total, prev, pager, next, jumper"

import { reactive } from "vue";
import { getCourseList } from "../http/api";
export default {
  name: "CourseList",
  setup() {
    let data = reactive({
      table: [],
      psages: 0,
      total: 0,

  let option=reactive({
    page: 0,


    let getCourseListFun = async (obj) => {
      let arr = await getCourseList(obj),
        newArr = []; = arr.length;
      //   [1,2,3,4,5,6,7]   [10,11,12----100]
      //   [[1,2],[3,4],[5,6],[7]]
      for (let index = 0; index < arr.length; index++) {
        let obj = arr.splice(index, 10);
        index += 10;
      data.table = newArr;

    let handleCurrentChange = (index) => { = index;
      // getCourseListFun({})

    let getTabList=()=>{

    return {
<style lang="scss" scoped>
       display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: 10px;
      margin-right: 10px;
      width: 30%;
      display: flex;
      align-items: center;
        width: 50px;


Topics: Front-end Vue.js html Interview elementUI