前端开发:axios在vue中的使用

简介: 前端开发:axios在vue中的使用

1、安装

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

# 安装vant 
npm i vant -S
# 完整写法:npm install vant --save

# 安装插件 
npm i babel-plugin-import -D
# 完整写法: npm install babel-plugin-import --save-dev

# 更换安装源:
# npm install vant --save --registry=https://registry.npm.taobao.org

2、babel.config.js 中配置

module.exports = {

plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};

3、新建视图 views/Web.vue

<template>
<div>

<van-button type="primary">主要按钮</van-button>

</div>
</template>

<script>

// 引入组件
import { Button } from "vant";

export default {
name: "web",

// 注册组件
components: {
[Button.name]: Button
}
};
</script>

4、配置路由router.js

{
path: '/web',
name: 'web',
component: () => import('./views/Web.vue')
}

5、访问测试

npm run serve           # 启动项目

http://localhost:8080/web

d21.3.png

            </div>
目录
相关文章
|
资源调度 前端开发 JavaScript
Vue3中如何使用axios进行Ajax请求?
Vue3中如何使用axios进行Ajax请求?
388 1
|
JavaScript 前端开发 数据库
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)-3
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)
250 0
Vue3 配置代理和使用全局axios请求数据
Vue3 配置代理和使用全局axios请求数据
1014 1
|
JavaScript Java 程序员
Vue项目实战(04)- axios封装
Vue项目实战(04)- axios封装
139 1
QGS
|
JavaScript 安全 前端开发
手摸手vue2+Element-ui整合Axios
手摸手vue2+Element-ui整合Axios
QGS
147 0
|
前端开发 JavaScript 算法
springboot+vue+mybatis-plus+axios实现商品的CRUD
springboot+vue+mybatis-plus+axios实现商品的CRUD
183 0
|
JavaScript
Vue如何请求接口——axios请求
Vue如何请求接口——axios请求
140 0
|
JavaScript 前端开发 API
在VUE项目中做一个简单的Axios二次封装及使用
在VUE项目中做一个简单的Axios二次封装及使用
242 0
|
JSON JavaScript 前端开发
Vue ElementUI操作 和 Axios使用
Vue ElementUI 和 Axios 内容分享。
428 0
|
JavaScript 前端开发
vue axios封装
vue axios封装
127 0