Vue的学习之旅3-——element-ui的基本使用、axios基本使用与简单案例笔记

最新推荐文章于 2024-06-06 22:26:38 发布

海海不掉头发

最新推荐文章于 2024-06-06 22:26:38 发布

阅读量874

点赞数 3

文章标签： vue js

本文链接：https://blog.csdn.net/qq_43055855/article/details/109023533

版权

本文记录了学习Vue的过程，重点介绍了如何搭建Element-UI环境，实现基本组件，并通过Axios进行简单的HTTP请求。文章详细阐述了Element-UI的引入步骤，包括环境配置、组件创建和路由设置。同时，解释了Axios的用途，展示了如何使用Axios发送GET请求。

摘要由CSDN通过智能技术生成

学习目标：

熟练掌握element-ui 组件的引入与使用

学习内容：

四点：
1、搭建 element-ui环境
2、使用element-ui实现基本的form、按钮、对话框等等组件效果
3、了解axios并实现简单的请求数据显示到页面上

学习时间：

2020.10.12
1、周一早上 7 点—中午12点
2、周一下午1 点-下午 5 点

学习笔记产出：

第一部分：element-ui

环境的引入：在当前目录夹下面调出控制台输入命令语句：
-npm i element-ui -S
这里的S 是大写的S，即可实现elemeng-ui的引入。
安装引入成功与否的判断条件，在package.json下的dependencies代码块中可以看到,前提是已经安装了路由与Vuex状态管理器.
在src目录下的-Main.js下引入element-ui, 前提是用语句创建的vue-cli脚手架，如果不是用语句建的话则没有main.js的目录结构。
引入的语句分别是：

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

引入成功之后咱们就可以在components下新建一个element文件了.
新建组件后需要配置路由-
源代码:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import ElementUI from '@/components/ElementUI'
import VueAjax from '@/components/VueAjax'

Vue.use(Router)
const router = new Router({
   
    mode: "hash",
    routes: [{
   
            path: '/HelloWorld',
            name: 'HelloWorld',
            component: HelloWorld
        },
        {
   
            path: '/ElementUI',
            name: 'ElementUI',
            component: ElementUI
        },