Vue Getting Started Record (I)

effect

This article is to achieve the following front-end effect of learning practice records:

fulfill

The best practice for getting started I think is to go to the official website first, which usually has a quick start guide.

Build a new Vue3+TypeScript to see the structure of the newly created project according to the quick start documentation on the official website:

Now focus first on COMPONENTS, VIEWS, vs.

componentsCatalogs are typically used to store reusable Vue components.

viewsCatalogs are used to store page-level components. These components usually correspond to different pages or routing views of the application.

is the root component of a Vue application. It usually contains the global styles and structure of the application and is the starting point for Vue instance mounts, all other components are rendered from this root component.

is the entry file for a Vue application. It is responsible for creating Vue instances and mounting them in the DOM.

Learning Vue not only learn Vue framework but also to learn the relevant ecological, as a person who just started learning Vue, write their own css may not be a good choice, but that's okay, there are many component libraries on the market, generally only need to use these component libraries to meet the majority of the needs of the library.

You can use element-plus when you are just starting to learn.

GitHub Address:/element-plus/element-plus

Official website address:

Learn how it is used on the official website, here is a simple study that can be introduced in its entirety and added in:

import ElementPlus from 'element-plus'
import 'element-plus/dist/'

(ElementPlus)

As shown below:

Now it's time to start using ElementPlus components.

Observation:

Only under VIEWS.

Take another look:

Only from COMPONENTS.

Take another look:

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'

const prompt1 = ref('')
const fetchData = async () => {
      try {
        const response = await ('https://192.168.1.6:7101/Semantickernel');
         = ;
      } catch (error) {
        ('There was a problem with the Axios request:', error);
      }
    };
</script>

<template>
    <div>
     <el-row>
    <el-col :span="24">
    <el-space direction="vertical">
    <el-text type="primary" size="large">boast</el-text>
    <el-input
    v-model="prompt1"
    style="width: 300px"
     :rows="8"
    type="textarea"
    placeholder="Please input"
    clearable
    />
    <el-button type="primary" round @click="fetchData">boast</el-button>
    </el-space>
    </el-col>
    </el-row>
    </div>
</template>

UI components in ElementPlus were used for layout.

Use v-model to bind prompt1 to el-input.

Documentation for v-model:/guide/components/#component-v-model

You don't need to read it all at first, just know that it's for two-way binding.

<el-button type="primary" round @click="fetchData">boast</el-button>

Represents a button whose click triggers the fetchData function.@clickbev-on:The abbreviation for:

In this event handler we need to send a get request to the backend interface, which can be done using axios to send http requests.

Install axios, introduce axios, and send requests using axios:

import axios from 'axios'

const fetchData = async () => {
      try {
        const response = await ('https://192.168.1.6:7101/Semantickernel');
         = ;
      } catch (error) {
        ('There was a problem with the Axios request:', error);
      }
    };

The effect at the beginning can be realized.

summarize

Vue framework related: understand the role of each part of the Vue project structure, understand the componentized development ideas, learn v-model, v-on.

Front-end ecology related: understanding element-plus and axios.

TypeScript related: type annotations and type inference, arrow functions, asynchronous functions (async/await), module import.