新建vue项目,并引入element ui和axios的步骤
一、新建vue项目
(1)win+R进入命令行 使用cmd

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

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


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


点击下方的“在此创建新项目”
(4)进入创建界面




(5)直接点击创建项目即可(等待加载完即可)
因为需要联网下载,所以可能会加载四五分钟
如果有卡顿还可以去cmd命令行中按一下回车试试
二、vue项目中引入element ui
(1)在已经创建好的vue文件中打开终端(也就是cmd命令行)输入指定“npm install element-ui@2.15.3"(也有其他的版本)

(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' 即可

新建vue项目,并引入element ui和axios的步骤的更多相关文章
- 搭建Nuxt项目(搭配Element UI、axios)
使用Nuxt Nuxt.js文档:https://zh.nuxtjs.org/guide/ 开始 初始化Nuxt项目 npx create-nuxt-app <项目名> // or yar ...
- 在Vue项目中使用Element UI:按需引入和完整引入
下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...
- vue按需引入Element UI的方法
在我们的实际项目开发中,多数是采用按需引入的模式来进行开发的,那么具体应该如何操作呢,可能会有许多新人傻傻分不清楚,具体将在下文讲到. 首先我们先vue create demo创建一个项目出来此时我们 ...
- 怎么样在vue-cli的项目里面引入element ui
第一步:先进入到项目里面 npm i element-ui -S 第二步: import Vue from 'vue'; import ElementUI from 'element-ui'; //这 ...
- vue项目中使用element ui上传图片到七牛
1.获取token值 后台有接口调用直接返回token值 //请求后台拿七牛云token async getQiniuToken() { //token let uploadtoken = await ...
- vue Cli 按需引入Element UI 和全局引用Element UI
全局引用: 一.安装 Element UI npm i element-ui -S 二.在main.js 中引入 element UI import ElementUI from 'element-u ...
- Electron-vue实战(一)—搭建项目与安装Element UI
Electron-vue实战—搭建项目与安装Element UI 作者:狐狸家的鱼 本文链接 GitHub:sueRimn 一.新建项目1.初始化项目打开cmd,新建一个项目,我使用的是electro ...
- Vue项目的创建和UI资源
Vue项目创建打包与UI资源 1.Vue项目创建 1.1 vue-cli脚手架 vue-cli是一个基于vue的构建工具,用于搭建vue项目的环境,有着兼容,方便,快速的优点,能够完全遵循前后端分离的 ...
- 创建vue项目及引入插件
部署开发环境 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack cnpm install ...
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
随机推荐
- QA|20211013|SecureCRT:如图,有很多^,中文显示有问题,乱码,如何解决
Q1:如图,有很多^,中文显示有问题,乱码,如何解决 Q2:securecrt的vi展示有问题:少很多字.有很多^M和^,光标无法移动到最右侧 A: 首先检查当前编码格式: 1 echo $LANG ...
- .NET应用多语言-葡萄牙语软件,如何处理本地化,特别是数字的转换和计算
在葡萄牙语软件中,数字本地化通常涉及小数点和千位分隔符的使用.在葡萄牙语中,小数点用","表示,而不是英语中使用的".".千位分隔符通常是一个空格或一个点. 例 ...
- 《流畅的Python》 读书笔记 230926
写在最前面的话 缘由 关于Python的资料市面上非常多,好的其实并不太多. 个人认为,基础的,下面的都还算可以 B站小甲鱼 黑马的视频 刘江的博客 廖雪峰的Python课程 进阶的更少,<流畅 ...
- 最快速搭建个人服务器图床siuuuuu
@ 目录 1.服务器准备 2.docker 安装 (1)通过命令行的方式 (2)宝塔面板上安装 3.开启端口访问 什么是docker 4.docker安装minio 什么是minio 5.配置mini ...
- C++中::和:, .和->的作用和区别
符号::和:的作用和区别 ::是作用域运算符,A::B表示作用域A中的-名称B,A可以是名字空间.类.结构: 类作用域操作符 "::"指明了成员函数所属的类.如:M::f(s)就表 ...
- 其它——Siege压力测试工具使用
文章目录 Siege压力测试工具使用 一 Siege介绍 二 windows 下使用 三 mac和linux使用 四 使用 五 参数详解 六 结果详解 七 修改系统的文件描述符限制 Siege压力测试 ...
- python第2~5章 学习笔记
# 第2~5章 学习笔记 ## 什么是计算机语言 计算机就是一台用来计算机的机器,人让计算机干什么计算机就得干什么! 需要通过计算机的语言来控制计算机(编程语言)! 计算机语言其实和人类的语言没有本质 ...
- NW排错
fist date VM备份失败时: NW server上(linux): > nsradmin >p type : nsr recover > cd /nsr/logs >n ...
- WPF性能优化:Freezable 对象
Freezable是WPF中一个特殊的基类,用于创建可以冻结(Freeze)的可变对象.冻结一个对象意味着将其状态设置为只读,从而提高性能并允许在多线程环境中共享对象. Freezable的应用 我们 ...
- 记一次有趣的 buffer overflow detected 问题分析
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 环境说明 无 前言 在我开发的一个实验和学习库中,在很久 ...