首页 > 其他分享 >新建vue项目,并引入element ui和axios的步骤

新建vue项目,并引入element ui和axios的步骤

时间:2023-12-04 17:15:52浏览次数:30  
标签:axios 创建 cmd element vue ui

一、新建vue项目

(1)win+R进入命令行  使用cmd

 (2)切换到需要创建vue项目的盘符下    直接D:就能切换到D盘

 (3)使用vue ui指令 进入图形化创建vue项目的界面(注意在创建项目的时候,命令行不能关闭)

 

 之后就在浏览器的界面中进行创建

 

 点击下方的“在此创建新项目”

(4)进入创建界面

 

 

 

 (5)直接点击创建项目即可(等待加载完即可)

因为需要联网下载,所以可能会加载四五分钟

如果有卡顿还可以去cmd命令行中按一下回车试试

二、vue项目中引入element ui

(1)在已经创建好的vue文件中打开终端(也就是cmd命令行)输入指定“npm install [email protected]"(也有其他的版本)

 (2)在main.js文件中写入上方给出的三行代码

 1 import ElementUI from 'element-ui';

2 import 'element-ui/lib/theme-chalk/index.css'; 

 3 Vue.use(ElementUI); 

(3)之后可以在App.vue文件中

 (4)记得去修改index.js的路由,实现页面的跳转

 三、引入axios

(1)只需要在该vue文件夹的终端(cmd命令行)输入”npm install axios“即可,成功后会在package-lock.json多出一行axios的代码

 (2)在不同的vue界面中使用axios的时候,在script中输入       import axios from 'axios'    即可

 

标签:axios,创建,cmd,element,vue,ui
From: https://www.cnblogs.com/lian369/p/17875406.html

相关文章

  • vue3 setup 父组件向子组件传递参数、方法|子组件向父组件传递数据,函数
    https://blog.csdn.net/qq_27517377/article/details/123163381https://blog.csdn.net/qq_27517377/article/details/123166367vue3setup父组件向子组件传递参数参数<template><el-rowclass="mb-4"> <el-buttontype="danger">props.vue传......
  • vue路由局部刷新-局部页面刷新达到和F5刷新一样的注销
    1.静态路由页面加上这一条{  path:"/redirect/:path(.*)",  component:()=>import("@/views/redirect/index.vue") },2.点击事件的vue方法里面用router.replace({path:"/redirect/projects/templates/edit",......
  • 【全栈第一课】Vue快速入门
    一、前端工程化JS的复用就是模块化UI样式复用就是组件化(LayUI里面的都是组件化)所以说前端工程化就是有规范的写,不能你一个样式我一个样式,不够统一不够专业!二、WebPack是什么前端工程化的具体实现方案基本使用实现奇偶行变色1.初始化包管理工具通过npminit-y生成2.安装jquery......
  • 手写类似于BetterScroll样式的左右联动菜单 uni-app+vue3+ts (使用了script setup语法
     注意:在模拟器用鼠标滚动是不会切换光标的,因为使用的是触摸滑动。【自定义类型贴在最后了】script部分如下:import{onMounted}from'vue'importtype{orderDetail}from'@/types/category'importtype{mainArr}from'@/types/main-arr'import{nextTick,ref}......
  • vue3使用::v-deep深度选择器不生效
    会出现 ::v-deepusageasacombinatorhasbeendeprecated.Use:deep(<inner-selector>)insteadof::v-deep<inner-selector>.的报错::v-depth用作组合子已被弃用。使用:deep(<内部选择器>)而不是::v-deep<内部选择器>。需要改成:deep(class),示例代码如下:deep(.el-checkbo......
  • Vue学习计划--Vue2(一)简单了解vue
    Vue2的终止支持时间为2023年12月31日。在这个矛盾的时间点,还是决定先把vue2的笔记放出来,在Vue2完结后再把Vue3的笔记补上。这样呢,2和3都不落下,也算是来一个启承的作用吧。在工作中呢,旧的项目可以维护,新的项目也可以上手。后续呢会有react16和react18、node、webpack、vite、以及实......
  • [Vue]按页数和行数重新计算表格序号
    转载自:https://blog.csdn.net/qq_48203828/article/details/123224024 1、 2、<el-table-columnlabel="序号"style="width:120px;height:50px"header-align="center"align="center"><templateslot-scope=&quo......
  • Vue3用户代码片段
    1.defineComponent语法{ "Printtoconsole":{ "prefix":"vue3", "body":[ "<template>", "<divclass=\"container\">", "", "</div>&q......
  • 在写springboot和vue时,需要改进的地方
    后端Springboot(1)需要更加熟练使用mysql语句,insertupdatedeleteselect(查询)(2)前后端跨域问题的解决: (3)另外在使用delete语句时,可以在路径中直接添加id,实现通过id删除数据例①未在路径中添加id  ②在路径中使用idpostman中样例:  使用id作为路径参数的注意事项:......
  • Jenkins自动化构建Vue项目的实践
    在现代的Web开发中,Vue.js已经成为一种非常流行的JavaScript框架。为了更高效地管理和部署Vue.js项目,使用自动化构建工具是至关重要的。Jenkins作为一款强大的持续集成和持续部署(CI/CD)工具,为我们提供了一种便捷的方式来自动化构建Vue.js项目。本文将介绍如何在Jenkins中配置和使用自......