创建了Vue项目,需要导入什么插件以及怎么导入

news2024/9/22 21:29:28

如果你不知道怎么创建Vue项目,建议可以看一看这篇文章

怎么安装Vue的环境和搭建Vue的项目-CSDN博客

1.在idea中打开目标文件

2.系在一个插件Vue.js

3.下载ELement UI

在Terminal中输入

# 切换到项目根目录
cd vueadmin-vue
# 或者直接在idea中执行下面命令
# 安装element-ui
cnpm install element-ui --save

4.在main.js添加

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false
Vue.use(Element)

我这里是创建的时候出错了,创建了Vue3的项目

5.测试一下

6.启动

输入

npm run serve

我这里删除了其他的组件,只留下了这个按钮

7.同上下载axios  qs   mockjs等插件

口语化简述作用

axios :就是用来发送http请求的,没有就发不了

qs   :就是用来将前段封装的对象,转换为一种后端能接受的格式

mockjs  就是用于模拟后端接口的返回数据,拦截前端发出的请求到后端,模拟后端,来对前端进行调试

axios

cnpm install axios --save

然后同样我们在main.js中全局引入axios。

import axios from 'axios'
Vue.prototype.$axios = axios //

qs

组件中,我们就可以通过this.$axios.get()来发起我们的请求了哈。当然了,后面我们添加axios拦截的时候我们需要修改引入的编写。 同时,我们同步安装一个qs,什么是qs?qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串,或者反过来将一个查询字符串解析成一个object,帮助我们查询字符串解析和序列化字符串。qs

cnpm install qs --save

mockjs

然后因为后台我们现在还没有搭建,无法与前端完成数据交互,因此我们这里需要mock数据,因此我们引入mockjs(http://mockjs.com/),方便后续我们提供api返回数据。

cnpm install mockjs --save-dev

然后我们在src目录下新建mock.js文件,用于编写随机数据的api,然后我们需要在main.js中引入这个文件:

src/main.js

require("./mock") //引入mock数据,关闭则注释该行

后面我们mackjs会自动为我们拦截ajax,并自动匹配路径返回数据!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1964528.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

漏洞打靶-tomato

这是一个很有意思的靶场,靶机的安装过程请参考我的文章“漏洞打靶-hackme”,进入靶场后,迎面而来的就是一个大tomato,然后就无从下手了,查目录查不出来,sql注入也没地方注入 这时候我们可以用kali的nmap去查…

ARM学习(29)NXP 双coreMCU MCXN94学习

笔者来介绍一下NXP 双core板子 ,新系列的mcxn94 1、MCX 新系列介绍 恩智浦 MCU 系列产品包括 Kinetis 、LPC 系列,以及 i.MX RT 系列,现在又推出新系列产品 MCX 产品,包括四个系列,目前已经发布产品的是 MCX N 系列。…

第十四天7.25(git)

1.git 1.git功能特性 1.克隆数据库版本:从服务器上克隆数据库本机上 2.提交代码:在本机上自己创建的分支上提交代码 3.合并分支:在本机上合并分支 4.拉取合并分支:新建一个分支,把服务器上最新的代码Fetch下来&…

微软工具合集 | Microsoft PowerToys v0.83.0

PowerToys是由微软开发的一款免费系统工具集,专为Windows 10和Windows 11系统设计。它提供了一系列高效实用的工具,旨在帮助用户提升操作系统的使用效率和个性化程度。PowerToys工具集深受系统管理员和高级用户的喜爱,通过集成多种工具&#…

XXE -靶机

XXE靶机 一.扫描端口 进入xxe靶机 1.1然后进入到kali里 使用namp 扫描一下靶机开放端口等信息 1.2扫描他的目录 二 利用获取的信息 进入到 robots.txt 按他给出的信息 去访问xss 是一个登陆界面 admin.php 也是一个登陆界面 我们访问xss登陆界面 随便输 打开burpsuite抓包 发…

《深入浅出WPF》学习笔记二.为对象属性赋值的三种方式

《深入浅出WPF》学习笔记二.为对象属性赋值的三种方式 WPF用户图形界面是树状结构 👆wpf文档大纲 👆winform文档大纲 wpf的用户图形界面是树状结构,与winform不同点在于,winform同样存在树状结构的控件(比如panel、gridcontrol等…

Wi-Fi、WLAN、Bluetooth、zigbee、蜂窝网络、4g5g、MQTT

为什么打开手机的WiFi连接,显示的是WLAN? 分清Wi-Fi、WLAN、Bluetooth、zigbee、蜂窝网络、4g5g、MQTT这些概念. 一、WLAN、WIFI、WAPI WLAN是利用无线通信技术在局部区域内构建的网络,家庭/办公室里的网络就是一个WLAN,WLAN是一…

【数据结构】Java实现二叉搜索树

二叉搜索树的基本性质 二叉搜索树(Binary Search Tree, BST)是一种特殊的二叉树,它具有以下特征: 1. 节点结构:每个节点包含一个键(key)和值(value),以及指…

大语言模型中的提示隐私保护

大语言模型中的提示隐私保护 一、简介: 大语言模型(LLM) 拥有庞大的规模、预先训练的知识和卓越的性能,被广泛应用于各种任务。提示学习(prompt learning)和指令微调(instruction tuning) 是两种重要的使得大模型能理解具体任务…

决策树基础

概述 决策树是一种树型结构,其中每个内部结点表示在一个属性上的测试,每个分支代表一 个测试输出,每个叶结点代表一种类别。决策树学习采用的是自顶向下的递归方法,其基本思想是以信息熵为度量构造一棵熵值下降最快的树&#xff…

自学Java第16Day

学习目标:面向对象进阶 学习内容:Object、Objects、BigInteger、BigDecimal、正则表达式 学习时间:下午 3 点-下午 6 点 学习产出: 1. Object类 1.1 概述 查看API文档,我们可以看到API文档中关于Object类的定义如下&…

【SpringBoot3】场景整合(实战)

0 环境准备 0.0 云服务器 阿里云、腾讯云、华为云 服务器开通; 按量付费,省钱省心 安装以下组件:docker、redis、kafka、prometheus、grafana 下载windterm: https://github.com/kingToolbox/WindTerm/releases/download/2.5…

React-Native 宝藏库大揭秘:精选开源项目与实战代码解析

1. 引言 1.1 React-Native 简介 React-Native 是由 Facebook 开发的一个开源框架,它允许开发者使用 JavaScript 和 React 的编程模型来构建跨平台的移动应用。React-Native 的核心理念是“Learn Once, Write Anywhere”,即学习一次 React 的编程模型&am…

《LeetCode热题100》---<5.普通数组篇六道>

本篇博客讲解LeetCode热题100道普通数组篇中的六道题 第一道:最大子数组和(中等) 第二道:合并区间(中等) 第一道:最大子数组和(中等) 法一:贪心算法 class So…

文件上传漏洞--之upload-labs靶场(第1关到第5关)专栏更新ing.....

第一关&#xff1a; 第一步&#xff1a;新建一个木马文件muma.php 第二步&#xff1a;在木马文件中写入一句话木马访问php主页 <?php eval(phpinfo());?> ​ 第三步&#xff1a;直接上传试一下 现上传一个png格式文件查看一下 然后上传一句话木马文件的&#xff0c;…

C:图案打印

引言 本篇文章讲了一些常见的图形编程题&#xff0c;并总结了一些规律。 1、打印空心正方形 1.1 代码展示&#xff1a; #include<stdio.h> int main() {int a 0;//边长初始化scanf("%d", &a);//输入边长的值{int i 0;for (i 0; i < a; i)//控制行…

面试经典算法150题系列-数组/字符串操作之多数元素

序言&#xff1a;今天是第五题啦&#xff0c;前面四题的解法还清楚吗&#xff1f;可以到面试算法题系列150题专栏 进行复习呀。 温故而知新&#xff0c;可以为师矣&#xff01;加油&#xff0c;未来的技术大牛们。 多数元素 给定一个大小为 n 的数组 nums &#xff0c;返回其…

Python 提取excel中嵌入的图片

注意&#xff1a;是嵌入在单元格里的图片&#xff0c;嵌入在单元格里的图片&#xff0c;嵌入在单元格里的图片 会显示这种类似的命令&#xff08;office好像不支持查看&#xff0c;wps可以查看这个位置显示的图片&#xff09; 网上好多都说用 _image 提取&#xff0c;经测试,…

精装房、旧房改造智能家居,单火线也有“救”了单火模块 零线发生器

精装房、旧房改造智能家居&#xff0c;单火线也有“救”了单火模块 零线发生器 史新华 以前写过关于智能家居没有预留零线&#xff0c;导致无法安装零火开关&#xff0c;也没办法装触控屏&#xff0c;主要原因还是无法通过零火线给设备供电。今年最火的一款思万奇零线发生器救…