Vue随笔记

1 Idea里面使用Vue

Idea里面要安装Vue插件

File - New - Project - JavaScript - Vue.js

然后出现:

"C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npx-cli.js" --ignore-existing --package @vue/cli vue create --default .
npx: the --ignore-existing argument has been removed.
See `npm help exec` for more information
Need to install the following packages:@vue/cli@5.0.8
Ok to proceed? (y) y

然后等它自己安装完成,完成后打开一个Terminal并cd到项目的文件夹里,运行npm run serve

然后访问: http://localhost:8080/ 即可看到Vue界面

使用 Ctrl + C 退出

接着安装axios和echarts

C:\GIT_repo\vue-workspace\demo-monitor>npm install --save axios
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: acorn-jsx@5.3.2
npm WARN Found: acorn@7.4.1
npm WARN node_modules/acorn-jsx/node_modules/acorn
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer acorn@"^6.0.0 || ^7.0.0 || ^8.0.0" from acorn-jsx@5.3.2
npm WARN node_modules/acorn-jsx
npm WARN   acorn-jsx@"^5.3.2" from espree@9.6.1
npm WARN   node_modules/vue-eslint-parser/node_modules/espreeadded 6 packages, removed 2 packages, and changed 48 packages in 2m107 packages are looking for fundingrun `npm fund` for detailsC:\GIT_repo\vue-workspace\demo-monitor>npm install --save echartsadded 4 packages in 2m107 packages are looking for fundingrun `npm fund` for details

2 Vue3.0编码

import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'
import axios from 'axios'const app = createApp(App);
app.config.globalProperties.$axios = axios
app.config.globalProperties.$echarts = echarts
app.config.globalProperties.$url = '/api/hello2/monitor1'app.mount('#app')

处理跨域请求:修改vue.config.js文件

module.exports = defineConfig({transpileDependencies: true,devServer: {proxy: {'/api': {target: 'http://localhost:20006',ws: true,changeOrigin: true,pathRewrite: {'^/api': ''}}}},
})

关掉页面,重新npm run dev一下,要不即使设置代理完成也会请求不到,一定要注意

3 使用element-ui

在vue的template里想用el-row和el-col,发现根本不起作用,原来是没有引入element-ui

<template><div><el-row><el-col :span="12"><div id="main" style="width:500px; height:400px" ref="main"></div></el-col><el-col :span="12"><div id="pie" style="width:500px; height:400px"></div></el-col></el-row></div>
</template>

Vue3.0中需要引入elementplus 如下main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'
import axios from 'axios'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'const app = createApp(App);
app.use(ElementPlus)
app.config.globalProperties.$axios = axios
app.config.globalProperties.$echarts = echarts
app.config.globalProperties.$url = '/api/hello2/monitor1'app.mount('#app')

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

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

相关文章

Keil中for(int i=0;;)报错

一、报错 二、报错原因 定义变量i报错 这是C的写法&#xff0c;C语言不支持 用C语言格式应该为 int i0; for(int i;;;) {} c99支持第一种写法&#xff0c;如果使用gcc&#xff0c;可以指定c99模式。 三、指定c99模式

cv2.imwrite路径中存在中文时出现乱码问题

cv2.imwrite(path, img) 在写入包含中文的路径的时候&#xff0c;保存的文件名称为乱码。 解决办法&#xff1a; cv2.imwrite(path,image)将上面的代码修改为以下代码&#xff0c;可以避免出现中文乱码。 cv2.imencode(.jpg, image)[1].tofile(path)

搜索与图论:图中点的层次

搜索与图论&#xff1a;图中点的层次 题目描述参考代码 题目描述 输入样例 4 5 1 2 2 3 3 4 1 3 1 4输出样例 1参考代码 #include <cstring> #include <iostream> #include <algorithm>using namespace std;const int N 100010;int n, m; int h[N], e[N]…

【Linux网络】传输层协议 - UDP

文章目录 一、传输层&#xff08;运输层&#xff09;运输层的特点复用和分用再谈端口号端口号范围划分认识知名端口号&#xff08;Well-Know Port Number&#xff09;两个问题① 一个进程是否可以绑定多个端口号&#xff1f;② 一个端口号是否可以被多个进程绑定&#xff1f; n…

德国西门子论未来质量管理 - 如何与明天相遇?

未来制造业的质量 -- 如何用软件方案满足质量要求 作者&#xff1a;Bill Butcher 翻译&编辑&#xff1a;数字化营销工兵 【前言】在Frost&Sullivan最近发表的一份白皮书中&#xff0c;他们讨论了制造业的质量投资。质量是制造过程的关键要素&#xff0c;但似乎比其他…

【贡献度分析(帕累托图)】

文章目录 前言一、贡献度分析是什么&#xff1f;二、使用步骤1. 准备数据2. 排序数据3. 绘制帕累托图4. 分析结果5. 实际应用 三、示例代码 前言 贡献度分析也称为帕累托分析。它可以帮助我们理解数据集中各个因素对整体影响的程度&#xff0c;从而优先处理最重要的因素&#…

oracle数据库通过impdp导入数据时提示,ORA-31684:对象类型用户xxx已存在,和ORA-39151:表xxx存在的解决办法

前提条件&#xff1a;首先备份原数据库中此用户对应的schemas 比如名为cams_wf的schemas 以便出了问题后还可以恢复原数据。 解决办法一、 通过命令或者数据库管理工具删除掉此schemas下的所有表&#xff0c;然后在impdp中加入ignorey 来忽略ORA-31684&#xff1a;对象类型用…

Python logging 模块详解

Python 的 logging 模块提供了一个强大而灵活的日志系统。它是 Python 标准库的一部分&#xff0c;因此可以在任何 Python 程序中使用。logging 模块提供了许多有用的功能&#xff0c;包括日志消息的级别设置、日志消息的格式设置、将日志消息输出到不同的目标&#xff0c;以及…

UE5刷植物悬空了

UE5系列文章目录 文章目录 UE5系列文章目录前言一、解决办法 前言 在Unreal Engine5.3中使用植物模式刷各种植物时&#xff0c;有时会发现有的植物要么悬空&#xff0c;要不有刷不上地板的情况。而且悬空的植物还不能接触到地面&#xff0c;感觉很奇怪&#xff0c;就像下图所示…

mmdetection的生物图像实例分割三:自定义数据集的测试与分析

mmdetection的生物图像实例分割全流程记录 第三章 自定义数据集的测试、重建与分析 文章目录 mmdetection的生物图像实例分割全流程记录前言一、测试集的推理1.模型测试2.测试数据解析 二、测试结果的数据整合三、生物结构的重建效果 前言 mmdetection是一个比较容易入门且上…

【研发日记】Matlab/Simulink软件优化(二)——通信负载柔性均衡算法

文章目录 前言 背景介绍 初始代码 优化代码 分析和应用 总结 前言 见《【研发日记】Matlab/Simulink软件优化(一)——动态内存负荷压缩》 背景介绍 在一个嵌入式软件开发项目中&#xff0c;需要设计一个ECU节点的CAN网路数据发送&#xff0c;需求是在500k的通信波特率上&a…

机器人舵机:关键要素解析与选择指南

在机器人技术日新月异的今天&#xff0c;舵机作为机器人的核心部件之一&#xff0c;扮演着至关重要的角色。它的性能直接关系到机器人的运动控制、稳定性以及精度等方面。那么&#xff0c;在选择和使用机器人舵机时&#xff0c;我们需要关注哪些关键要素呢&#xff1f;本文将为…

使用Vue.js将form表单传递到后端

一.form表单 <form submit.prevent"submitForm"></form> form表单像这样写出来&#xff0c;然后把需要用户填写的内容写在form表单内。 二.表单内数据绑定 <div class"input-container"><div style"margin-left: 9px;"&…

WALT算法简介

WALT(Windows-Assist Load Tracing)算法是由Qcom开发&#xff0c; 通过把时间划分为窗口&#xff0c;对 task运行时间和CPU负载进行跟踪计算的方法。为任务调度、迁移、负载均衡及CPU调频 提供输入。 WALT相对PELT算法&#xff0c;更能及时反映负载变化&#xff0c; 更适用于…

String类知识

目录 一、String存在意义 二、字符串为何不可变 三、String类常用方法 1、字符串构造 2、String对象的比较 3、字符串查找 4、转化 &#xff08;1&#xff09;数值和字符转化 &#xff08;2&#xff09;大小写转换 &#xff08;3&#xff09;字符串转数组 &#xff08;4&…

系统架构设计师【补充知识】: 应用数学 (核心总结)

24.1 图论之最小生成树 (1)定义: 在连通的带权图的所有生成树中&#xff0c;权值和最小的那棵生成树(包含图中所有顶点的树)&#xff0c;称作最小生成树。 (2)针对问题: 带权图的最短路径问题。 (3)最小生成树的解法有普里姆(Prim)算法和克鲁斯卡尔(Kruskal)算法&#xff0c;我…

重复文件怎么查找并清理,试试这5个文件去重方法(新)

重复文件怎么查找并清理&#xff1f;日常工作中&#xff0c;我们使用电脑的时间长了&#xff0c;都会累积大量好的文件&#xff0c;这其中难免会出现重复文件。这些重复文件不仅占用了电脑磁盘空间&#xff0c;还会降低电脑性能。因此&#xff0c;我们必须定期对重复文件查找出…

fastapi学习前置知识点

前置知识点 FastApi&#xff1a;一个用于构建API的现代、快速&#xff08;高性能&#xff09;的web框架。 FastApi是建立在Pydantic和Starlette基础上&#xff0c;Pydantic是一个基于Python类型提示来定义数据验证、序列化和文档的库。Starlette是一种轻量级的ASGI框架/工具包…

GIF录屏工具Gif123 v3.3.0单文件

软件介绍 GIF的优势是小、轻、快&#xff0c;适合时间短、画面小、需要嵌入其他页面&#xff0c;打开就自动循环播放的动画。Gif123可录制合成鼠标轨迹,可调整鼠标指针大小,可在设置中打开鼠标指针高亮光圈功能,高亮光圈可跟随鼠标移动以指示鼠标位置。软件极其简单&#xff0…

流水线建构apk、abb实战(二)

gradlew 命令生成apk、aab包 其实构建应用程序包就几个命令&#xff1a; ### 生成AAB&#xff1a; gradlew bundleRelease #输出到[project]/build/outputs/bundle/release/下 gradlew bundleDebug### 生成APK&#xff1a; gradlew assembleRelease gradlew assembleDebug###…