使用yarn搭建Vue,ElementUI,axios环境

2023-11-15

1. 搭建vue、ElementUI、axios环境

1.1 安装yarn

安装yarn

npm install -g yarn

查看是否安装版本

yarn --version 

yarn切换为国内源

yarn config set registry https://registry.npm.taobao.org/

1.2 搭建vue、ElementUI、axios环境

1.2.1 创建vue项目element_crud

vue create element_crud

在这里插入图片描述

1.2.2 安装ElementUI

  1. 进入项目目录,添加element-ui依赖
cd element_crud

yarn add element-ui 
  1. main.js中添加如下:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

1.2.3 安装axios

  1. 进入项目目录,添加axios依赖
yarn add axios
  1. main.js中添加如下:
import axios from 'axios'
Vue.prototype.$http = axios

1.3 启动项目

yarn serve
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用yarn搭建Vue,ElementUI,axios环境 的相关文章

  • Vue 读取本地静态文件 json【很全,很详细】

    所有文章优先发布在个人博客上 后续更新可能会忘记同步到CSDN上 给你带来不便抱歉 个人博客此篇文章 https www xdx97 com article 654798704103915520 方法一 require 格式 var jso
  • vue.js之NVM安装步骤详解

    1 下载地址 https github com coreybutler nvm windows releases 2 3 4 5 6 7 8 设置环境变量 这里打开就有 自动创建的 不用管 9 这也是自动配的 10 在windows下cmd
  • Vue3 defineProp传参以及defineEmits事件传递详细解释

    defineProp父子组件传参 vue3中引用另一个组件非常简单 不再需要设置各个组件的name 直接import导入即可 下方代码 父组件为PropSuper vue 子组件为PropBase vue
  • Vue突然报错 doesn‘t work properly without JavaScript enabled

    突然报错未启用JavaScript 下午演示项目的时候突然给我整了一出JavaScript未启用 当场就把我整尴尬了 然后我怀疑是不是写的路由守卫有问题就注释了再试 发现问题还在 然后经过各种骚操作以后 发现还是报这个js未启用 当场我就不
  • vue配置生产环境.env.production、测试环境.env.development

    静下来 慢慢看 首先 我们需要搭建一个项目 依赖包会自动下载好 无需自己 npm i env 无论什么环境都会加载 env production 生产环境加载 env development 测试开发环境加载 我们下面的例子分开来写 只用
  • 学习Vue 之 创建一个 Vue 应用

    文章目录 Vue js 概述 了解 Vue 创建一个 Vue 应用 参考 Vue js 概述 计划学习前端 已有一些HTML js CSS的基础知识 下一步学习Vue js 以下是一些适合新手的Vue js教程 你可以根据自己的实际情况和需
  • Vue样式设置的几种方式

    1 直接使用class设置样式 代码 结果 2 通过v bind绑定class设置样式 1 使用json形式 代码 结果 2 使用数组形式 代码 结果 注意 通过第二种数组的方式 也可以通过三元表达式进行class的判断 此处不再赘述 3
  • 基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能

    前言 其原理主要是利用JavaScript中的鼠标事件来控制CSS样式 大致就是监听某个DOM元素的鼠标按下事件 以及按下之后的移动事件和松开事件 在鼠标按下且移动过程中 可实时获得鼠标的X轴坐标的值 通过简单计算 可计算出目标元素的宽度
  • springboot实现用户统一认证、管理(单点登录)

    大家好 我是雄雄 欢迎关注微信公众号 雄雄的小课堂 前言 现在是 2022年5月25日13 44 16 最近和模拟登录杠上了 这不 又来了个需求 还是以这个技术点入手的 需求大概是这样的 为了统一管理系统的用户 上游平台做了个统一认证平台
  • Vue学习 之 MacOS 安装 webpack

    Vue学习 之 MacOS 安装 webpack webpack 简介 Webpack 是一个非常流行的前端构建工具 它可以将多个模块 包括CSS JavaScript 图片等 打包成一个或多个静态资源文件 bundle 以便用于部署到生产
  • Vue+Element-ui实现表单验证

    文章目录 效果 template js实现 校验通过的实现效果 效果 校验效果 template div div
  • Vue3基础(三)__isRef___isReactve

    isRef isRef方法通过vue解构出来 import isRef from vue 主要是为了判断自己生成的响应数据是否是通过isRef 方法生成的
  • 10.Vue中绑定class属性,模板中传递class属性

    文章目录 class 对象类型 动态绑定 动态切换 动静结合 关于写法 数组类型 多个绑定 在组件上使用 单根组件 多根组件 attrs class 因为class属性的特殊性 可以有多个值 在将v bind 用于 class 时 Vue
  • taro-vue3监听左滑/右滑手势退出

    一 业务背景 我做的是一个要货小程序 没有华丽的页面 没有购物车 就是在要货页面填写要货数量 然后跳转到预览页面 预览页面有保存和支付按钮 可以先点保存 再点支付 也可以直接点支付 支付的同时进行保存 问题 支付成功后直接跳转回菜单页面 但
  • vue开发项目

    一 环境安装 1 概述 1 若只写个vue的简单demo程序 那么只需在html中引入vue js即可 没必要安装node npm webpack以及Vue cli 2 如果开发大型项目 就需要vue cli完成项目目录结构 部署 热加载等
  • 什么是钩子函数

    钩子函数 钩子函数 钩子函数是在一个事件触发的时候 在系统级捕获到了他 然后做一些操作 一段用以处理系统消息的程序 钩子 就是在某个阶段给你一个做某些处理的机会 钩子函数 1 是个函数 在系统消息触发时被系统调用 2 不是用户自己触发的 钩
  • 以element ui为例分析前端各种弹窗和对话框的使用场景与区别

    文章目录 摘要 Dialog 对话框 Drawer 抽屉 Notice 通知 MessageBox 弹框 Popconfirm 气泡确认框 Message 消息提示 Notification 通知 Dialog 对话框与Drawer 抽屉的
  • Vue源码分析(Render渲染函数)

    文章目录 Render函数 渲染DOM原理 虚拟DOM Vue整体机制 Render Function API 练习Render函数动态渲染标签 函数组件和状态组件 练习Render函数动态渲染组件 Render函数 渲染DOM原理 在前面
  • 利用vue-cli脚手架创建项目

    利用vue cli脚手架创建项目 安装vue cli脚手架 全局安装 npm install g vue cli 使用vue version查看是否安装完成 显示对应版本号 使用命令行创建 vue create 项目名称 default包含
  • el-checkbox如何同时获得value值和label的值

    在使用el checkbox时有时候需要往后台传送value值 定义的code 和label值 el checkbox组件默认获取的都是label属性中的值 如果label中设置的是code 那如何获取el checkbox的显示文字 la

随机推荐

  • 推荐一本书——《The Scientist and Engineer's Guide to Digital Signal Processing》

    突然在国外的网站上看到一本非常好的数字信号处理的书籍 讲解简介明白 清晰易懂 书籍为免费电子版 地址为 http www dspguide com pdfbook htm
  • day05-编程题

    知识点 方法 题目1 训练 定义一个方法 该方法能够找出两个小数中的较小值并返回 在主方法中调用方法进行测试 训练提示 根据方法的功能描述 方法的参数应该是两个小数 要返回两个小数的较小值 所以返回值类型也是小数类型 解题方案 操作步骤 定
  • QT中学习Opengl---(GLSL简单的使用)

    前言 本文的代码是 LearnOpenGL 中对应代码 这里提供学习 大家喜欢的可去官方网站去看看 https learnopengl cn readthedocs io zh latest https learnopengl cn rea
  • C++的模板特例化template<>

    C 的模板特例化是指当我们定义了一个通用的模板类或模板函数时 如果特定输入参数类型或值需要进行不同的处理 我们可以为这些特定情况提供单独的实现 这就是模板特例化 下面我们将详细介绍C 的模板特例化 假设我们有以下的一个模板类 templat
  • java自学笔记12:java中的集合框架(下)List

    一 学生选课 判断List中课程是否存在 思考 在课程序列中 如何判断是否包含某门或者某几门课程 如果课程序列包含某门课程 如何判断该课程的索引位置 在学生映射表中 如何判断是否包含某个学生ID 又该如何判断是否包含某个学生对象 如果想把课
  • 解读随着教育改革的深入steam教育

    STEAM鼓励孩子勇于创新和探索 打破思维的第三面墙 自古以来 大家都是教育孩子纠正错误 而STEAM可以让孩子们通过与小组实践学习 探索讨论 交流思想和相互帮助 来发现自己的缺点和不足 通过团队合作来弥补自己的劣势 可以说 STEAM是一
  • Pandas 返回Nan值的行索

    Pandas 返回Nan值的行索 通过np where函数查找 gt gt gt df Out 1 0 1 0 0 450319 0 062595 1 0 673058 0 156073 2 0 871179 0 118575 3 0 59
  • Mysql大小写敏感设置(Docker版)

    应用场景 本人由于项目前期使用windows版国产数据库开发 默认就是大小写不敏感的 加上代码规范约束不够 导致代码中SQL大小写不统一 后期有需求要更换数据库 改用Mysql 因为在Linux系统中Mysql默认是大小写敏感的 所以需要对
  • java多线程同步的实现方式

    java多线程同步的实现方式 1 什么时候会出现线程安全问题 2 使用synchronized关键字 2 1修饰方法 2 2 修饰代码块 3 使用重入锁实现线程同步 4 wait与notify方法 5 使用原子变量实现线程同步 关于vola
  • vmospro启动黑屏_VMOS Pro,安卓手机上的虚拟机

    应用名称 VMOS Pro 应用包名 com vmos pro 应用版本 1 1 26 应用大小 28 0MB 适用平台 Android 5 1 版本说明 1 优化电量同步问题 2 优化游戏断触问题 3 设备信息修改加入随机按钮 4 增加横
  • Docker导入导出镜像(镜像迁移)

    打包现有镜像 docker images 命令查看已有镜像列表 docker save命令打包镜像 docker save使用说明 o 选项 用来指定输出文件 将alpine ffmpeg 3 15打包 docker save o alpi
  • Linux定时任务

    Linux定时任务 at命令 语法 at 选项 日期时间 选项 f 指定包含具体指令的任务文件 q 指定新任务的队列名称 l 显示待执行任务的列表 d 删除指定的待执行任务 m 任务执行完成后向用户发送 E mail 日期时间 指定任务执行
  • 通过XSD文件生成JAVA对象

    c Program Files Java jdk1 8 0 101 bin gt xjc exe p io xsd xml encoding UTF 8 xsdTOxml MyField xsd d xsdTOxml Picked up J
  • 如何在uni中实现一个路由守卫

    在uni app中实现路由守卫 可以使用全局的router beforeEach方法来拦截路由导航 以下是一个简单的示例 展示了如何在uni app中实现路由守卫 在上述代码中 我们通过监听beforeRouterEnter事件来实现路由守
  • java.util.LinkedHashMap cannot be cast to Entity

    前后端数据传输转换问题 java util LinkedHashMap cannot be cast to Entity 问题场景 项目前端使用json传输方式 后台接收后对象变成了LinkedHashMap ResponseBody Re
  • 方向包围盒OBB(oriented bounding box)

    制造几何仿真中的碰撞检测通常视为针对刚体对象间的碰撞检测 这样的话可以把非刚体即软体的建模和变形算法对碰撞检测的影响减少到最小 常见成熟的基于包围盒的碰撞检测 box intersection test 算法如 1 沿坐标轴的包围盒AABB
  • Unity3D关于ComputeShader

    由于最近在实验中需要大量循环计算产生网格 所以可能需要GPU的加速 对于compute shader学习下 可能对于做GPU加速有帮助 以下补充修改了转载文章的内容 原文链接 https blog csdn net csharpupdown
  • HTML怎么建立两行四列的li,关于CSS如何实现多行多列布局的方法

    这篇文章主要介绍了CSS实现多行多列的布局的实例代码 需要的朋友可以参考下 1 两列多行 HTML box1 实现两列多行布局 111 222 333 CSS box1 width 500px background EEEEEE box1
  • fortran求解雷诺方程_方程的计算机处理96(5)_C++vs

    计算机语言运用 数值计算9 方程的计算机处理96 5 C vs 计算机 电子线路组成的计算机器 人与计算机则是通过计算机语言 符号系统说给计算机听而交流 计算机语言有低级语言 机器语言 汇编 高级语言 C C C VB PASCAL LIS
  • 使用yarn搭建Vue,ElementUI,axios环境

    1 搭建vue ElementUI axios环境 1 1 安装yarn 安装yarn npm install g yarn 查看是否安装版本 yarn version yarn切换为国内源 yarn config set registry