wordpress entware/温州seo网站推广
一、vue-cli
vue-cli俗称vue脚手架,是vue官方提供的快速生成vue 工程化项目的工具。
1.官网:https://cn.vuejs.org/
中文官网: https://cli.vuejs.org/zh/
特点:基于webpack,功能丰富且易于扩展,支持创建vue2和vue3的项目
2.全局安装:
npm install -g @vue/cli
查看vue-cli的版本,检查vue-cli是否安装成功
vue --version
3.解决Windows PowerShell 不识别vue命令的问题
a.以管理员身份运行 PowerShell
b.执行set-ExecutionPolicy RemoteSigned命令
c.输入字符Y,回车即可
4.基于vue ui 创建vue项目
本质:通过可视化面板采集到的用户配置信息后,在后台基于命令行的方式自动初始化项目
a.在终端下运行vue ui 命令,自动在浏览器中打开创建项目的可视化面板
b.在详情页面填写vue项目名称
c. 在预设页面选择手动配置项目
d.在功能页面勾选需要安装的功能(css预处理器,使用配置文件)
e.在配置页面勾选vue的版本和需要的预处理器
f.将刚才所有的配置保存为预设模板,方便下一次创建项目时直接复用之前的配置
5.基于命令行创建vue项目
vue create my-project
a.在终端下运行vue create 002demo命令,基于交互式的命令行创建vue的项目
b.选择要安装的功能(手动选择要安装的功能)
把babel,eslint等插件的配置信息存储到单独的配置文件中(推荐)
把babel,eslint等插件的配置信息存储到package.json中(不推荐)
erer
二、组件库
1.element-plus
地址:https://element-plus.org/zh-CN/
全局引入
npm install element-plus --save
npm install @element-plus/icons-vue
// main.js
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}
app.mount('#app')
也可以将element相关代码拆分
element.js
import { ElButton,ElIcon } from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
export const setupElement = (app) =>{app.component(ElButton.name, ElButton)app.component(ElIcon.name, ElIcon)for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}
}import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import {setupElement} from './element.js'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
setupElement(app)
app.mount('#app')
按需引入
npm install -D unplugin-vue-components unplugin-auto-import
vue.config.js
const AutoImport = require('unplugin-auto-import/webpack').default;
const Components = require('unplugin-vue-components/webpack').default;
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
module.exports = {configureWebpack: {resolve: {alias: {components: '@/components'}},//配置webpack自动按需引入element-plus,plugins: [AutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})]}
};
<template><div class="hello"><el-button color="#626aef">Default</el-button><el-button>我是 ElButton</el-button><el-button type="primary" circle><el-icon :size="20"><Edit /></el-icon></el-button></div>
</template>
<script>
import { Edit } from '@element-plus/icons-vue'
export default {name: 'HelloWorld',components: {Edit}
}
</script>
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// import {setupElement} from './element.js'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
// setupElement(app)
app.mount('#app')
三、axios拦截器
拦截器会在每次发起ajax请求和得到相应的时候自动被触发。
应用场景:token身份验证,loading效果。
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
axios.defaults.baseURL='http://localhost:3000'
app.config.globalProperties.$http=axios
app.mount('#app')<template>
</template>
<script>
export default {methods:{async getData(){const {data:res} = await this.$http.get('/goodsList')console.log('res',res);}},created(){this.getData()}
}
</script>
配置请求拦截器,响应拦截器
通过axios.interceptors.request.use(成功的回调,失败的回调)可以配置请求拦截器。
通过axios.interceptors.response.use(成功的回调,失败的回调)可以配置相应拦截器。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import 'element-plus/dist/index.css'
import { ElLoading } from 'element-plus'
const app = createApp(App)
app.use(router)
axios.defaults.baseURL='http://localhost:3000'
// axios.interceptors.request.use(config=>{
// config.headers.Authorization='Bearer xxx'
// return config
// })
let loadingInstance=null
axios.interceptors.request.use(config=>{loadingInstance = ElLoading.service({fullscreen:true})return config
})
axios.interceptors.response.use((response)=>{loadingInstance.close()return response
},(error)=>{return Promise.reject(error)} )
app.config.globalProperties.$http=axios
app.mount('#app')
拆分axios
// src/http.js
import axios from 'axios';
import { ElLoading } from 'element-plus';const http = axios.create({baseURL: 'http://localhost:3000',
});let loadingInstance = null;http.interceptors.request.use(config => {loadingInstance = ElLoading.service({ fullscreen: true });if(localStorage.getItem('token')){config.hearders.token=localStorage.getItem('token')}return config;
});http.interceptors.response.use(response => {loadingInstance.close();return response;},error => {loadingInstance.close();switch(error.response.status){case 404:console.log("您请求的路径不存在,或者错误");break;case 500:console.log("服务器出错");break;}return Promise.reject(error);}
);export default http;main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import http from './http'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(router)
app.config.globalProperties.$http=http
app.mount('#app')
拆分发请求的api
api.js
import http from "./http";
//获取商品列表
// export const getGoodsListApi=()=>{
// return http.get("/goodsList")
// }
export const getGoodsListApi=()=>{return http({url:"/goodsList",methods:'get'})
}
四、proxy跨域代理
1.解决方法
a.把axios的请求根路径设置为vue项目的根路径
b.vue项目发请请求的接口不存在,把请求转交给proxy代理
c.代理把请求路径替换为devServer.proxy属性的值,发请真正的数据请求
d.代理把请求的数据,转发为axios
vue.config.js
const AutoImport = require('unplugin-auto-import/webpack').default;
const Components = require('unplugin-vue-components/webpack').default;
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');
const { defineConfig } = require('@vue/cli-service');module.exports = defineConfig({configureWebpack: {resolve: {alias: {components: '@/components'}},plugins: [AutoImport({resolvers: [ElementPlusResolver()]}),Components({resolvers: [ElementPlusResolver()]})]},devServer: {proxy: {'/apicity': { //axios访问 /apicity == target + /apicitytarget: 'http://121.89.205.189:3000',//真正的服务器changeOrigin: true, //创建虚拟服务器 pathRewrite: {'^/apicity': '' //重写接口地址,去掉/apicity, }}}}
});api.js
import http from "./http";
export const getCitysListApi=()=>{return http({url: "/apicity/city/sortCity.json",methods:'get'})
}
注意:a.derServer.proxy提供的代理功能,仅在开发调试阶段生效
b.项目上线发布时,依旧需要api接口服务器开启cors跨域资源共享
相关文章:

vue-cli,element-plus,axios,proxy
一、vue-cli vue-cli俗称vue脚手架,是vue官方提供的快速生成vue 工程化项目的工具。 1.官网:https://cn.vuejs.org/ 中文官网: https://cli.vuejs.org/zh/ 特点:基于webpack,功能丰富且易于扩展,支持创建vue2和vu…...

《Zeotero的学习》
学习视频链接 Zeotera的安装 官网点击download,选择合适的版本进行下载,并安装插件。 下载完成之后,点击安装包,一路默认就可以。如果不想下载在C盘,可以在步骤中选择自定义路径。 Zeotero的注册 官网进行注册&am…...

大数据复习知识点1
1、HDFS和MapReduce的起源:HDFS起源于Google的GFS论文,它是为了解决大规模数据集的存储问题而设计的。而MapReduce则是Google为了解决大规模数据处理问题而提出的一种并行计算模型。 2、YARN的作用:YARN是Hadoop的资源管理器,它负…...

9.26 Buu俩题解
[CISCN2019 华东北赛区]Web2 看wp写完之后写的 知识点 存储型XSS与过滤绕过sql注入 题解 好几个页面,存在登录框可以注册,存在管理员页面(admin.php) ->既然存在管理员页面,且直接访问admin.php提示我们 说明存在身份验证࿰…...

Mitsuba 渲染基础
Mitsuba 渲染基础 0. Abstract1. 安装 Mitsuba21.1 下载 Mitsuba2 源码1.2 选择后端 (variants)1.3 编译 2. [Mitsuba2PointCloudRenderer](https://github.com/tolgabirdal/Mitsuba2PointCloudRenderer)2.1 Mitsuba2 渲染 XML2.2 Scene 场景的 XML 文件格式2.2.1 chair.npy to…...

深入理解 WebSocket:实时通信的利器
深入理解 WebSocket:实时通信的利器 1. 什么是 WebSocket? WebSocket 是一种网络通信协议,它允许服务器和客户端之间建立持久的双向通信通道,适用于高频率、低延迟的数据交换场景。在传统的 HTTP 通信中,每次请求都需…...

OpenEuler配置本地yum源
0x00 服务器版本 将本地镜像传输至服务器 操作步骤如下 # 创建一个目录用于挂载光盘映像 mkdir /media/cdrom/# 将光盘映像挂载到指定目录 mount /kvm/openeuler.iso /media/cdrom/#进入Yum仓库配置目录 cd /etc/yum.repos.d/# 备份原有的 openEuler.repo 文件 mv openEuler.…...

论文不同写作风格下的ChatGPT提示词分享
学境思源,一键生成论文初稿: AcademicIdeas - 学境思源AI论文写作 在学术论文写作中,不同的写作风格能显著影响文章的表达效果与读者的理解。无论是描述性、分析性、论证性,还是批判性写作风格,合理选择和运用恰当的写…...

单点登录(SSO)基础
单点登录(SSO, Single Sign-On) 是一种身份认证机制,允许用户在多个独立的应用系统中只进行一次登录操作,即可访问所有授权的应用或服务,而无需每次切换应用时都进行登录。SSO 提高了用户体验的便捷性,同时…...

设置VsCode搜索时排除文件,文件列表中隐藏文件
按照《VsCode gdb gdbserver远程调试C程序》中介绍的方法,配置好VsCode后,打开一个C/C工程,发现左侧的面板会显示编译时生成的中间文件(比如.d和.o文件)。我们可以通过设置隐藏掉一些我们不需要打开的文件以简洁面板…...

急!现在转大模型还来得及吗?零基础入门到精通,收藏这一篇就够了
大模型的出现,让行内和行外大多数人都感到非常焦虑。 行外很多人想了解却感到无从下手,行内很多人苦于没有硬件条件无法尝试。想转大模型方向,相关的招聘虽然层出不穷,但一般都要求有大模型经验。而更多的人,则一直处…...

使用 lstm + crf 实现NER
条件随机场CRF 前言 CRF是给定一组输入随机变量条件下另一组输出随机变量的条件概率分布的模型。特点:假设输出随机变量构成马尔卡夫随机场。CRF可以用于不同的预测问题。但是主要讨论线性链条件随机场,这时问题变成了由输入序列对输出序列的判别模型&…...

【牛掰】这款RPA多平台引流获客软件已正式上线,助您日引流1000+
哈喽大家好我是年哥,自从上次与大家团购了那款基于autojs开发的RPA引流获客的源码,经过本缝合怪不断地修修补补,终于将它变成自己的了,还为它起了个魔幻的名字:获客宝RPA。尽管部分功能还有点瑕疵,但是不管…...

Python的包管理工具pip安装
Python的包管理工具pip安装 一、安装步骤1.检查 pip是否已安装2.安装 pip方法一:通过 ensurepip 模块安装(推荐)方法二:通过 get-pip.py 脚本安装(经常应为网络域名问题连接不上) 3.验证pip安装4.创建别名5.更新pip 二、常…...

《AIGC 时代程序员的应对之策》
在 AIGC 大语言模型不断涌现、AI 辅助编程工具日益普及的当下,程序员的工作方式确实面临着深刻变革。对于程序员来说,如何应对这一趋势成为了至关重要的问题。 一方面,有人担忧 AI 可能取代部分编程工作。不可否认,随着技术的发展…...

51单片机系列-串口(UART)通信技术
🌈个人主页: 羽晨同学 💫个人格言:“成为自己未来的主人~” 并行通信和串行通信 并行方式 并行方式:数据的各位用多条数据线同时发送或者同时接收 并行通信特点:传送速度快,但因需要多根传输线…...

使用k8s部署java前后端服务
一、项目架构 前端、后端、数据库 1)前端 静态的资源:img css html js文件 js:axios、ajax 2)后端 提供数据:根据web前端发送的请求,从数据库中获取数据 请求都是无状态的,如何保持会话 …...

使用docker创建zabbix服务器
首先保证服务器已正常安装docker,然后执行下面这几个容器创建命令: #创建MySQL容器 docker run --name mysql-server -t --restartunless-stopped -e MYSQL_DATABASE"zabbix" -e MYSQL_USER"zabbix" -e MYSQL_PASSWORD"zabbix_…...

nodejs 016: javascript语法——解构赋值({ a, b, c } = {})=>{console.log(“Hello“);}
在 JavaScript 中,函数参数 { a, b, c } {} 的含义是在函数定义时提供一个默认的对象参数。这个对象包含了三个可选的属性 a, b, 和 c。如果没有传递参数或者传递的参数是一个非对象类型的值,那么函数内部将使用一个空对象 {} 作为参数。 示例 const …...

【人人都能看懂的大模型原理】(一)
前言 当前大模型的学习资源呈现爆发趋势,各种角色的人都用自己的视角参与到大模型的讨论。但是我发现这些学习资源都有几个特点:只摆事实而不讲道理;只讲应用可能而不提实现代价;只讲可能性而缺乏实操经验分享;洞察材…...

JMeter源码解析之JMeter命令行新增命令
JMeter源码解析之JMeter命令行新增命令 需求描述 需要新增一条命令,能够在JMeter命令行中能够展示输入对应的JMeter命令,能够展示对应的命令信息 查看命令效果如下: apache-jmeter-5.1\bin>jmeter --? Copyright © 1999-2024 The …...

YOLOv8 Windows c++推理
#添加一个**yolov8\_。onx **和/或**yolov5\_。Onnx **模型(s)到ultralytics文件夹。 #编辑**main.cpp**来改变**projectBasePath**来匹配你的用户。#请注意,默认情况下,CMake文件将尝试导入CUDA库以与opencv dnn (cuDNN) GPU推理一起使用。 #如果你的Op…...

一文读懂Python中的Popen函数
目录 1. 基本知识2. Demo 1. 基本知识 在Python中,Popen 是 subprocess 模块中的一个函数,它用于创建一个子进程并与其进行通信 subprocess.Popen():Popen 类用于创建和管理子进程 与 os.system() 或 os.popen() 相比,Popen 提供…...

07-阿里云镜像仓库
07-阿里云镜像仓库 注册阿里云 先注册一个阿里云账号:https://www.aliyun.com/ 进入容器镜像服务控制台 工作台》容器》容器服务》容器镜像服务 实例列表》个人实例 仓库管理》镜像仓库》命名空间》创建命名空间 仓库管理》镜像仓库》镜像仓库》创建镜像仓库 使…...

net core mvc 数据绑定 《2》
mvc core 模型绑定 控制绑定名称 》》》Bind 属性可以用来指定 模型应该 绑定的前缀 public class MyController : Controller {[HttpPost]public ActionResult Create([Bind(Prefix "MyModel")] Ilist<MyModel> model){// 模型绑定将尝试从请求的表单数据中…...

文件服务器FastDFS 消息队列中间件RabbitMQ
新标签页 (chinaunix.net) FastDFS - Browse Files at SourceForge.net 一、FastDFS Tracker和Storage: tracker用来管理所有的storage,只是管理服务器,负责负载均衡。 storage是存储服务器,每一个storage服务器都是一个单独的个…...

工作纪实58-Idea打jar包
有时候需要配合算法使用spark定时DP,调用java相关的jar包做数据处理 idea打jar包有以下三种场景 SpringBoot的Maven项目【Maven打包即可】非SpringBoot的Maven项目【添加maven打包参数,使用Maven打包】 借助maven的配置进行打包,新增以下配置…...

ELK-03-skywalking监控linux系统
文章目录 前言一、下载node_exporter二、启动node_exporter三、下载OpenTelemetry Collector四、启动OpenTelemetry Collector4.1 将配置文件下载到同级目录4.2 启动 五、查看总结 前言 skywalking安装完成后,开始我们的第一个监控-监控linux系统。 参考官方文档&a…...

HEITRONICS TC13红外辐射高温计CT13 INFRARED RADIATION PYROMETER CT13
HEITRONICS TC13红外辐射高温计CT13 INFRARED RADIATION PYROMETER CT13...

开源图像降噪算法与项目介绍【持续更新】
Intel Open Image Denoise 介绍:Intel Open Image Denoise(OIDN)是一个开源库,它提供了一系列高性能、高质量的去噪滤镜,专门用于光线追踪渲染的图像。这个库是Intel Rendering Toolkit的一部分,并且是在宽…...