快速上手 Vue 和 Element-UI 组件库

痛定思痛。 2024-05-23 18:58 70阅读 0赞

![168c1abc67f4402ebfc99ff077a3e4da.gif][]

> 哈喽~大家好，这篇来看看快速上手 Vue 和 Element-UI 组件库。
> 
> ?个人主页：[个人主页][Link 1]
> 
> ? 系列专栏：[【微服务】][Link 2]
> 
> ?与这篇相关的文章：
> 
> <table> 
>  <tbody> 
>   <tr> 
>    <td>SpringCloud Sentinel 使用</td> 
>    <td><a href="https://blog.csdn.net/aasd23/article/details/128032516?spm=1001.2014.3001.5501" title="SpringCloud Sentinel 使用_程序猿追的博客-CSDN博客_springcloud使用sentinel" rel="nofollow">SpringCloud Sentinel 使用_程序猿追的博客-CSDN博客_springcloud使用sentinel</a></td> 
>   </tr> 
>   <tr> 
>    <td>将Nacos注册到springboot使用以及Feign实现服务调用</td> 
>    <td><a href="https://blog.csdn.net/aasd23/article/details/127961919?spm=1001.2014.3001.5502" title="将Nacos注册到springboot使用以及Feign实现服务调用_程序猿追的博客-CSDN博客_nacos springboot 服务调用" rel="nofollow">将Nacos注册到springboot使用以及Feign实现服务调用_程序猿追的博客-CSDN博客_nacos springboot 服务调用</a></td> 
>   </tr> 
>   <tr> 
>    <td>微服务介绍与 SpringCloud Eureka</td> 
>    <td><a href="https://blog.csdn.net/aasd23/article/details/127913922?spm=1001.2014.3001.5502" title="微服务介绍与 SpringCloud Eureka_程序猿追的博客-CSDN博客" rel="nofollow">微服务介绍与 SpringCloud Eureka_程序猿追的博客-CSDN博客</a></td> 
>   </tr> 
>  </tbody> 
> </table>

号外号外，我最近发现了一个非常棒的人工智能学习网站，它的内容通俗易懂，风趣幽默，让人印象深刻。我想和大家分享这个网站，[点击链接][Link 3]即可访问。

**目录**

一、前言

1、vue 是什么？

2、什么是MVVM？

二、NPM使用

1、安装 npm 与 vue

三、vue 的使用

1、基本用法

2、内容渲染指令

3、属性绑定指令

4、使用JavaScript表达式

5、事件绑定指令

6、条件渲染指令

7、v-else与v-else-if指令

8、列表渲染指令

9、v-for中的key

四、Vue CLI使用

1、什么是Vue CLI？

2、什么是组件化开发？

3、vue组件的构成

4、使用Vue CLI 创建Vue

5、目录结构

6、自定义标签

五、第三方组件element-ui

1、什么是element-ui？

2、安装

3、引入

4、使用element-ui

5、第三方图标库

--------------------

## 一、前言 ##

### 1、vue 是什么？ ###

> **vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；**Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。
> 
> **Vue.js提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。**
> 
> 其目标是通过尽可能简单的API实现响应式的数据绑定和可组合的视图组件。

### 2、什么是MVVM？ ###

> **MVVM是Model-View-ViewModel的缩写，**它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定。
> 
> **Vue提供了MVVM风格的双向数据绑定，**核心是MVVM中的VM，也就是ViewModel，ViewModel负责连接View和Model，保证视图和数据的一致性。

![e2e927071ff9433cb816a2ab483fd510.png][]

注：学习vue需要网页三件套的基础（HTML + CSS + JavaScript）

这里我们使用的工具是 VScode ，需要安装的插件是 Vetur

![e9e6f05c54534329a37285d98d2467c0.png][]

## 二、NPM使用 ##

### 1、安装 npm 与 vue ###

安装 npm 与 vue 可以看看这位大佬的

[npm如何安装与配置][npm]

## 三、vue 的使用 ##

### 1、基本用法 ###

**我们采用导入 vue 的脚本文件方法**

**声明要被 vue 所控制的 DOM 区域**

<div id="app">
          {
       {message}}
        </div>

**创建 vue 的实例对象**

**Vue.createApp()**

> createApp可以分解成create和App来理解，create就是创建的意思，而App指的是Application，也就是应用的意思，那么Vue.createApp()就可以理解成创建一个Vue应用的意思。 createApp()方法会返回一个Vue实例对象。

**mount()**

> mount()是挂载的意思，需要一个字符串型参数参数，写法可以使用css选择器，一般都是使用ID选择器的形式，比如mount("\#app")，意思就是将ID为app的节点挂载到Vue上。

**测试代码**

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        
        <script src="https://unpkg.com/vue@next"></script>
      </head>
      <body>
    
        
        <div id="app">
          {
       {message}}
        </div>
    
        
        <script>
        const hello = {
            // 指定数据源，既MVVM中的Model
            data: function() {
                return {
                    message: 'Hello Vue!'
                }
            }
        }
        const app = Vue.createApp(hello)
        app.mount('#app')
        </script>
      </body>
    </html>

**效果**

![4f3e8dd6d1144a309954c2c799b15934.png][]

### 2、内容渲染指令 ###

在 data 里面的return 的字段名，通过 **\{ \{字段名\}\}** 的方式可以是字段名的内容渲染到标签里面，但如果遇到渲染的内容是个标签呢？

eg：

<p>{
       {desc}}</p>
          data: function(){ 
            return {
              username: 'zhangsan',
              gender: '男',
              desc: '<a href="http://www.baidu.com">百度</a>'
            }
          }

效果

![9ef20847a7ec4381a732c2a4613e1aa2.png][]

这肯定不是我们想要的，我们可以用 v-html

**代码**

**效果**

![4ba4eea7af9b442db3de3565c419197a.png][]

### 3、属性绑定指令 ###

**vue中，属性加不加冒号的区别？**

> 加冒号：表示后边是一个**变量**，或者是一个**表达式**
> 
> 不加冒号：表示后边是一个**字符串字面量**
> 
> Tips ① (:)是(v-bind:)的简写，v-bind是vue用来绑定属性的，属于vue的基础知识——模板语法 > > > 指令 > > > v-bind，[详见官网][Link 4] ② 指令 (Directives) 是带有 v- 前缀的特殊 attribute。除v-for外，其余attribute的预期值是一个js表达式

**测试代码**

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://unpkg.com/vue@next"></script>
      </head>
      <body>
        <div id="app">
          <a :href="link">百度</a>
          <input type="text" :placeholder="inputValue">
          <img :src="imgSrc" :style="{width:w}" alt="">
        </div>
    
        <script>
          const vm = {
              data: function(){
                return {
                  link:"http://www.baidu.com",
                  // 文本框的占位符内容
                  inputValue: '请输入内容',
                  // 图片的 src 地址
                  imgSrc: './images/demo.png',
                  w:'500px'
              }
            }
          }
          const app = Vue.createApp(vm)
          app.mount('#app')
        </script>
      </body>
    </html>

**效果**

![6557d346b1f74ea78d9e7e62f02bffca.png][]

### 4、使用JavaScript表达式 ###

JavaScript表达式有基本数据的直接量，有数组初始化表达式，有对象初始化表达式，有成员访问表达式，属性访问表达式等等。

**直接看代码**

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://unpkg.com/vue@next"></script>
      </head>
      <body>
        
        <div id="app">
          <p>{
       {number + 1}}</p>
          <p>{
       {ok ? 'True' : 'False'}}</p>
          <p>{
       {message.split('').reverse().join('')}}</p>
          <p :id="'list-' + id">xxx</p>
          <p>{
       {user.name}}</p>
        </div>
    
        <script>
          const vm = {
            data: function(){
              return {
                number: 9,
                ok: false,
                message: 'ABC',
                id: 3,
                user: {
                  name: 'itxzw',
                }
              }
            }
          }
          const app = Vue.createApp(vm)
          app.mount('#app')
        </script>
      </body>
    </html>

**效果**

![bbbf00041cb944f79814e5228aeda601.png][]

### 5、事件绑定指令 ###

在vue里面点击事件可以用v-on:click或@click来进行绑定某函数

**示例代码**

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://unpkg.com/vue@next"></script>
      </head>
      <body>
        <div id="app">
          <h3>count 的值为：{
       {count}}</h3>
          <button v-on:click="addCount">+1</button>
          <button @click="count+=1">+1</button>
          <button @click="count-=1">-1</button>
        </div>
    
        <script>
          const vm = {
            data: function(){
              return {
                count: 0,
              }
            },
            methods: {
              // 点击按钮，让 count 自增 +1
              addCount() {
                this.count += 1
              },
            },
          }
          const app = Vue.createApp(vm)
          app.mount('#app')
        </script>
      </body>
    </html>

**效果**

![e32b4a67ecde42dda92ce3ff6fac9185.png][]

### 6、条件渲染指令 ###

条件指令就像if else这样的了

**代码**

**v-if 与 v-show 的区别**

隐藏状态下，v-if 是直接没有了，而 v-show 是 display: none;

![8609c3980ebb4fb19820d9a6751ff494.png][]

![ecb8d57e39b743498f21bd4d2cd89170.png][]

### 7、v-else与v-else-if指令 ###

其实就是我们学的if else

**代码**

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://unpkg.com/vue@next"></script>
    
      </head>
      <body>
        <div id="app">
          <p v-if="num > 0.5">随机数 ＞ 0.5</p>
          <p v-else>随机数 ≤ 0.5</p>
          <hr />
          <p v-if="type === 'A'">优秀</p>
          <p v-else-if="type === 'B'">良好</p>
          <p v-else-if="type === 'C'">一般</p>
          <p v-else>差</p>
    
          <div v-show="a"> 
            测试
          </div>
          <button @click="!a">点击</button>
        </div>
    
        <script>
          const vm = {
            data: function(){
              return {
                // 生成 1 以内的随机数
                num: Math.random(),
                // 类型
                type: 'A',
                a : false 
              }
            },
            methods:{
    
              f:function(){
                this.a = !this.a
              }
    
            }
          }
          const app = Vue.createApp(vm)
          app.mount('#app')
        </script>
      </body>
    </html>

效果

![3de8f3e95961498c94b7ba375bc3169b.png][]

### 8、列表渲染指令 ###

v-for 使用的是增强for循环

**代码**

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://unpkg.com/vue@next"></script>
    
      </head>
      <body>
        <div id="app">
          <ul>
            <li v-for="(user, i) in userList">索引是：{
       {i}}，姓名是：{
       {user.name}}</li>
          </ul>
        </div>
    
        <script>
          const vm = {
            data: function(){
              return {
                userList: [
                  { id: 1, name: 'zhangsan' },
                  { id: 2, name: 'lisi' },
                  { id: 3, name: 'wangwu' },
                ],
              }
            },
          }
          const app = Vue.createApp(vm)
          app.mount('#app')
        </script>
      </body>
    </html>

**效果**

![a95b3aad4efe450dbd9e73ea073a3c61.png][]

### 9、v-for中的key ###

**代码**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <script src="https://unpkg.com/vue@next"></script>
    
    </head>
    
    <body>
      <div id="app">
    
        
        <div>
          <input type="text" v-model="name">
          <button @click="addNewUser">添加</button>
        </div>
    
        
        <ul>
          <li v-for="(user, index) in userlist" :key="user.id">
            <input type="checkbox" />
            姓名：{
       {user.name}}
          </li>
        </ul>
      </div>
    
      <script>
        const vm = {
          data: function(){
            return {
              // 用户列表
              userlist: [
                { id: 1, name: 'zhangsan' },
                { id: 2, name: 'lisi' }
              ],
              // 输入的用户名
              name: '',
              // 下一个可用的 id 值
              nextId: 3
            }
          },
          methods: {
            // 点击了添加按钮
            addNewUser() {
              this.userlist.unshift({ id: this.nextId, name: this.name })
              this.name = ''
              this.nextId++
            }
          }
        }
        const app = Vue.createApp(vm)
        app.mount('#app')
      </script>
    </body>
    
    </html>

**效果**

![313259c1848544c3ac67369482ac4fc4.png][]

> **push() 方法**可向数组的末尾添加一个或多个元素，并返回新的长度。
> 
> **pop() 方法**数组最后一位元素删除并返回数组的最后一个元素。
> 
> **shift() 方法**用于把数组的第一个元素从其中删除，并返回第一个元素的值。
> 
> **unshift() 方法**可向数组的开头添加一个或更多元素，并返回新的长度。
> 
> **splice(index,howmany,item1, …, itemX) 方法**向/从数组中添加/删除项目，然后返回被删除的项目 第一个参数：表示从哪个索引位置（index）添加/删除元素 第二个参数：要删除的项目数量。如果设置为 0，则不会删除项目。 第三个参数：可选。向数组添加的新项目。
> 
> **sort() 方法**对原列表进行排序，如果指定参数，则使用比较函数指定的比较函数。
> 
> **filter() 方法**创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
> 
> **concat() 方法**用于连接两个或多个数组。
> 
> **slice() 方法**可从已有的数组中返回选定的元素。
> 
> **split() 方法**用于把一个字符串分割成字符串数组。

## 四、Vue CLI使用 ##

### 1、什么是Vue CLI？ ###

> **Vue CLI是Vue官方提供的构建工具，通常称为脚手架。**
> 
> 用于快速搭建一个带有热重载（在代码修改后不必刷新页面即可呈现修改后的效果）及构建生产版本等功能的单页面应用。
> 
> Vue CLI基于 webpack 构建，也可以通过项目内的配置文件进行配置。

### 2、什么是组件化开发？ ###

> 组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。
> 
> Vue的组件系统允许我们使用小型、独立和通常可复用的组件构建大型应用。

### 3、vue组件的构成 ###

> **Vue 中规定组件的后缀名是 .vue**
> 
> 每个 .vue 组件都由 3 部分构成，分别是
> 
> **template，**组件的模板结构，可以包含HTML标签及其他的组件
> 
> **script，**组件的 JavaScript 代码
> 
> **style，**组件的样式

### 4、使用Vue CLI 创建Vue ###

**打开要创建的文件目录**

**打开cmd 使用 vue create 项目名指令**

![de0912ca0c9248a7b50d4386cce0704c.png][]

**选择第三个，敲回车**

![3ffd79e62a864c4588ab05a9480ab112.png][]

**取消 Linter / Formatter ，按空格取消，回车下一步**

![9c4f90fb07bb49a19f44e2e00798d1a6.png][]

**选择版本号，这里我们用2.0**

![1b6e1c930aaa4b9aad7aae013aefbdfc.png][]

**使用json风格**

![fc6b13cf8a3a4bd7a4f1cfffd5c73d33.png][]

**不使用快照**

![4898dc4a53e1434f95f5137ede1b6ebf.png][]

**正在创建**

![8fbf5963e6034656bcfef61935c95e51.png][]

**以创建ok**

![f39971c2d2c44076bf9f16e9f1b3784b.png][]

**使用 vscode 打开**

### 5、目录结构 ###

![ec3c035a2adf48c7b4e57f2eaf90d2f3.png][]

> **“assets”:** 共用的样式、图片
> 
> **“components”:** 业务代码存放的地方，里面分成一个个组件存放，一个页面是一个组件，一个页面里面还会包着很多组件
> 
> **“router”:** 设置路由
> 
> **“App.vue”:** vue文件入口界面
> 
> **“main.js：**对应App.vue 创建vue实例，也是入口文件，对应webpack.base.config.js里的入口配置
> 
> **static 文件夹：**
> 
> 存放的文件不会经过webpack处理，可以直接引用，例如swf文件如果要引用可以在webpack配置对swf后缀名的文件处理的loader，也可以直接将swf文件放在这个文件夹引用
> 
> **package.json:**
> 
> 这个文件有两部分是有用的：scripts 里面设置命令，例如设置了dev用于调试则我们开发时输入的是 npm run dev ；例如设置了build 则是输入 npm run build 用于打包;另一部分是这里可以看到我们需要的依赖包,在dependencies和devDependencies中，分别对应全局下载和局部下载的依赖包

vscode 打开控制台，使用命令 npm run serve 运行，

访问路径：[http://localhost:8080/][http_localhost_8080]

**效果**

![f37ed7ab974a46098b057de2e658e5da.png][]

**Hellow.vue 代码**

<template>
        <h1>Hellow Vue</h1>
    </template>
    
    <script>
    
    </script>
    
    <style>
    
    </style>

App.vue 将 Hellow.vue 代码导入进来，并起一个别名

import hellow from './components/Hellow.vue'

并注册到组件里面，这就是自定义标签

export default {
      name: 'App',
      components: {
        hellow
      }
    }

**思路有点像套娃行为**

### 6、自定义标签 ###

**新建一个Movie.vue，代码如下**

<template>
        <div>
            <h1>{
       {title}}</h1>
            <span>{
       {rating}}</span>
            <button @click="fun">点击</button>
        </div>
    </template>

<script>
    export default {
        name: "Movic",
        props:["title","rating"],
        data: function(){
            return{
    
            }
        },
        methods: {
            fun(){
                alert("我被点击了")
            }
        }
    }
    </script>

App.vue 代码

<template>
      <div id="app">
        <Movie v-for= "movie in movies" :key="movie.id" :title="movie.title" :rating="movie.rating"></Movie>
        <Hello></Hello>
      </div>
    </template>
    
    <script>
    import Movie from "./components/Movie.vue"
    import Hello from "./components/Hello.vue"
    
    export default {
      name: 'App',
      data: function(){
          return {
            movies: [
                  {id:1, title: "666", rating: 6},
                  {id:2, title: "777", rating: 7},
                  {id:3, title: "888", rating: 8},
              ]
          }
        },
        components: {
            Movie,
            Hello
          }
    }
    
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

效果

![2754bf21e16b491b828b3e03ad4f8122.png][]

## 五、第三方组件element-ui ##

### 1、什么是element-ui？ ###

> element-ui是由饿了么前端团队推出的一套为开发者、设计师和产品经理准备的基于Vue.js 2.0的桌面组件库，而手机端有对应框架是 Mint UI 。整个ui风格简约，很实用，同时也极大的提高了开发者的效率，是一个非常受欢迎的组件库。

[官网地址][Link 5]

### 2、安装 ###

推荐使用npm安装方式

npm install element-ui -save

### 3、引入 ###

全局引入，在vue入口main.js中增加内容如下

import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.use(ElementUI);

![966ec276763d4b9593b4e822e7ae462d.png][]

局部引入，在指定的vue文件中引入所需要的组件或主题样式，如下

import '@/style/theme/element-variables.scss'
     import { Message, MessageBox, Loading } from  'element-ui'
        Vue.use(Loading.directive) 
        Vue.prototype.$loading = Loading.service 
        Vue.prototype.$msgbox = MessageBox 
        Vue.prototype.$alert = MessageBox.alert 
        Vue.prototype.$confirm = MessageBox.confirm 
        Vue.prototype.$prompt = MessageBox.prompt 
        Vue.prototype.$message = Message

### 4、使用element-ui ###

打开官网，在组件里面选择要使用的代码直接cv大法

![aa17bf06f36d47ac9de8fec9190e4238.png][]

Hallow.vue代码

<template>
    <div>
        <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>
      <i class="fa fa-camera-retro fa-lg"></i> fa-lg
    </div>
    </template>
    
    
    <script>
    export default {
        name: "Hello",
        data: function(){
            return {
            tableData: [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄',
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }]
          }
        },
        methods: {
          tableRowClassName({row, rowIndex}) {
            if (rowIndex === 1) {
              return 'warning-row';
            } else if (rowIndex === 3) {
              return 'success-row';
            }
            return '';
          }
        }
    }
    </script>
    
    <style>
      .el-table .warning-row {
        background: oldlace;
      }
    
      .el-table .success-row {
        background: #f0f9eb;
      }
    </style>

**效果**

![76a6009809f544a1ad8fa270237a2b6f.png][]

### 5、第三方图标库 ###

> **由于Element UI提供的字体图符较少，**一般会采用其他图表库，如著名的Font Awesome
> 
> Font Awesome提供了675个可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改，包括大小、颜色、阴影或者其他任何支持的效果。
> 
> **文档地址：**[Font Awesome，一套绝佳的图标字体库和CSS框架][Font Awesome_CSS]
> 
> **安装：**npm install font-awesome
> 
> **使用：**import 'font-awesome/css/font-awesome.min.css'

![31af853d2a5f4769a5aa9b790cd4617b.png][]

**也是一样的，直接cv大法**

**这里我是用了这行代码**

**页面效果**

![9711d29814564d51afbbbaa1c5b9c189.png][]

> **不积跬步无以至千里，趁年轻，使劲拼，给未来的自己一个交代！向着明天更好的自己前进吧！**
> 
> ![d5358fcd619443fe98143f2fd5fef762.gif][]

[168c1abc67f4402ebfc99ff077a3e4da.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/2b962f7042bf4bea91ee4310816da44f.gif
[Link 1]: https://blog.csdn.net/aasd23?spm=1000.2115.3001.5343
[Link 2]: https://blog.csdn.net/aasd23/category_11867778.html?spm=1001.2014.3001.5482
[Link 3]: https://www.captainbed.cn/zhui
[e2e927071ff9433cb816a2ab483fd510.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/295ed8d81917434cb929d5ef2612e12f.png
[e9e6f05c54534329a37285d98d2467c0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/8c2d5eed24ee44bf954b52cd4c2fc991.png
[npm]: https://blog.csdn.net/fyq158797/article/details/126500042?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-126500042-blog-126486219.pc_relevant_vip_default&spm=1001.2101.3001.4242.1&utm_relevant_index=4
[4f3e8dd6d1144a309954c2c799b15934.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/28f67c6dcb074fd887882f46ecccb1e5.png
[9ef20847a7ec4381a732c2a4613e1aa2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/b8e63ab48d424febb4d24ff26762504a.png
[4ba4eea7af9b442db3de3565c419197a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/fd00ed07fcf1437481e42840e2644f34.png
[Link 4]: https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4
[6557d346b1f74ea78d9e7e62f02bffca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/bcf86098fec448bdbbb0a3484266e6f4.png
[bbbf00041cb944f79814e5228aeda601.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/107c5a8388fd4890afd97ff894ac6671.png
[e32b4a67ecde42dda92ce3ff6fac9185.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/cc69a12f8d11417ca8aee7337a179fd6.png
[8609c3980ebb4fb19820d9a6751ff494.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/933f195760394198b6dc1ae79a5e1334.png
[ecb8d57e39b743498f21bd4d2cd89170.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/8498ab2035e34d7d856bf3f50adcb87b.png
[3de8f3e95961498c94b7ba375bc3169b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/6329f212021a43d2b43a9c321bbe6236.png
[a95b3aad4efe450dbd9e73ea073a3c61.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/1968a798a94d46be9bbdf1c90b721e22.png
[313259c1848544c3ac67369482ac4fc4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/bd717dcbb4f94db38f51dc9022b5560c.png
[de0912ca0c9248a7b50d4386cce0704c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/451a7a99421c48b3a2e1c01ff101c991.png
[3ffd79e62a864c4588ab05a9480ab112.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/d3522ecd217b45d0af07570662f58348.png
[9c4f90fb07bb49a19f44e2e00798d1a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/7990adfe01574dbca069086f0d196040.png
[1b6e1c930aaa4b9aad7aae013aefbdfc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/5d7775f5f35f4defba6d47e717b53896.png
[fc6b13cf8a3a4bd7a4f1cfffd5c73d33.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/9f00b91f996d4bac8cc1690342c774c6.png
[4898dc4a53e1434f95f5137ede1b6ebf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/5796424f323147f9b19e8fbb01a2c898.png
[8fbf5963e6034656bcfef61935c95e51.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/0650e55973d24d008e4492f25c479742.png
[f39971c2d2c44076bf9f16e9f1b3784b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/55f2e8947ae94edcb017a52b08f6ac9d.png
[ec3c035a2adf48c7b4e57f2eaf90d2f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/7e75accaba56418d9ae6b04e47eccfdf.png
[http_localhost_8080]: http://localhost:8080/
[f37ed7ab974a46098b057de2e658e5da.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/cb619c842e144318a5036f9485af6ff0.png
[2754bf21e16b491b828b3e03ad4f8122.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/3973f6fe3a6b43839665ec89dde608c8.png
[Link 5]: https://element.eleme.cn/#/zh-CN
[966ec276763d4b9593b4e822e7ae462d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/4d933cd7dbe34189b67a47067e4e70b2.png
[aa17bf06f36d47ac9de8fec9190e4238.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/815cff61aa70442b9211995c4a6aba71.png
[76a6009809f544a1ad8fa270237a2b6f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/9a3f25fb1e6c4129bba74916836755cd.png
[Font Awesome_CSS]: http://fontawesome.dashgame.com/
[31af853d2a5f4769a5aa9b790cd4617b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/f328c1d00ef344d1bc20bf36300adb4f.png
[9711d29814564d51afbbbaa1c5b9c189.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/d9afb89f7462413c8c0461e0bd9c4198.png
[d5358fcd619443fe98143f2fd5fef762.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/23/9009ec51283947b6aa63cf94d86ba596.gif