详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper

1.vue-cli 构建项目

  //全局安装 vue-cli
  npm install - g vue- cli
  //创建一个基于 webpack 模板的新项目
  vue init webpack my- project
  //cd 进入刚新建的项目文件(my-project)
  cd my- project
  // 运行
  npm run dev

2.vue-cli 使用axios

  //1.先安装axios
  npm install axios
  //2.main.js中引入并放在Vue的原型上
  import axios from 'axios';
  Vue.prototype.axios = axios;
  //3. .vue文件中中使用
  this.axios.post..

3.vue-cli项目和请求后台接口

 //找到config文件下的index.js，修改dev。
  dev: {
   proxyTable: {
    '/': {
     target: 'http://192.168.1.122:8080', //此处不能用localhost:8080，需要用ip替换
      changeOrigin: true,
       pathRewrite: {
      '^/': ''
     }
    }
   }
  }
  // 在需要调用接口的地方调用，会自动代理
  this.axios.post('/getList/list',{
   orderId: '',
   userId: ''
  }).then(function (msg) {})

4.vue-cli使用sass

 //第一步
  npm install node- sass--save- dev
  npm install sass- loader--save- dev
  //第二步，打开webpack.base.config.js在loaders里面加上
  {
   test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
  }
  //第三步在.vue文件中设置
  <style lang= "scss" scoped > </style>

5.vue-cli使用swiper

 // 1.npm安装swiper 执行
  npm install swiper
  // 2.需要使用的.vue文件中引入
  import Swiper from 'Swiper'
  // 3.下载swiper样式文件,并在需要使用的.vue文件引入(多个地方使用可在main.js中引入)
  import '../../assets/css/swiper-4.2.6.min.css'
  // 4.初始化
  var mySwiper = new Swiper('.swiper-container', {
   autoplay: {
    delay: 5000
   },
   pagination: {
    el: '.swiper-pagination',
    clickable: true,
   }
  })

总结

以上所述是小编给大家介绍的vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解vue配置后台接口方式

    详解vue配置后台接口方式

    在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 proxyTable: { '/api': { target: 'http://127.0.0.1:8000', pathRewrite: { '^/api': '' } } }, 在工程目录下 > src > api > user.js - 接口写法 import axios from 'axios' export

  • 在vue-cli搭建的项目中增加后台mock接口的方法

    在vue-cli搭建的项目中增加后台mock接口的方法

    用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现成的后台可以调用,基本上都是自己写mock进行模拟. 在vue-cli搭建的项目中,框架上用的是express的web框架,要做一个mock是很方便的. 假设前端页面上需要获取所有的新闻列表,那么就需要mock一个能够返回所有新闻列表数据的接口. 接下来就在项目中实现mock功能. 脚手架生成项目

  • vue webpack开发访问后台接口全局配置的方法

    在实际开发中,使用vue 后就是前后端分离开发了,这时候我们就需要访问后台的接口来拿到数据,需要URL,name,password来获取到token才能正常使用接口,下面就来配置. 1.找到config文件夹,在prod.env.js中添加一下代码(若没有此JS,自己创建一个就可以了) 'use strict' module.exports = { NODE_ENV: '"production"', API_ROOT: '"//123.116.245.150:18081/ap

  • 详解vue-cli快速构建项目以及引入bootstrap、jq

    详解vue-cli快速构建项目以及引入bootstrap、jq

    vue-cli脚手架工具快速构建项目架构: ..首先默认了有已经安装了node... npm install -g vue-cli                   全局安装vue-cli vue init webpack cnm                  生成项目名为cnm的的项目模板,cnm自定义 npm install                                   到cnm文件夹中打开Git bash或者命令窗口初始化安装依赖 此时文件夹目录应该是这样 然后

  • 详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper

    1.vue-cli 构建项目 //全局安装 vue-cli npm install - g vue- cli //创建一个基于 webpack 模板的新项目 vue init webpack my- project //cd 进入刚新建的项目文件(my-project) cd my- project // 运行 npm run dev 2.vue-cli 使用axios //1.先安装axios npm install axios //2.main.js中引入并放在Vue的原型上 import

  • 详解Maven POM（项目对象模型）

    POM( Project Object Model,项目对象模型 ) 是 Maven 工程的基本工作单元,是一个XML文件,包含了项目的基本信息,用于描述项目如何构建,声明项目依赖,等等. 执行任务或目标时,Maven 会在当前目录中查找 POM.它读取 POM,获取所需的配置信息,然后执行目标. POM 中可以指定以下配置: 项目依赖 插件 执行目标 项目构建 profile 项目版本 项目开发者列表 相关邮件列表信息 在创建 POM 之前,我们首先需要描述项目组 (groupId), 项目的

  • 详解前端任务构建利器Gulp.js使用指南

    概述 在软件开发中,任务运行器的好处是不言而喻的.它们可以帮助自动运行常见的冗长的任务,让你可以专注于更重要的事情中,比如敲出很棒的代码.说的严肃点,自动运行一些比如图片压缩.代码压缩.单元测试以及更多的任务的技能,简直就是节省时间的利器. 对于很多前端开发者而言,时下使用最多的任务管理器就是Grunt了,一个可以让你在Gruntfile.js文件中使用JavaScript定义各种运行任务的工具.基本上,只要你了解JavaScript,创建一个Grunt任务是非常简单直接的事情.丰富的第三方插件

  • 详解用Docker构建MySQL主从环境

    前言 本篇文章记录我使用 docker-compose 以及 dockerfile 来构建基于 binlog 的 MySQL 主从环境.如果你严格按照文中的步骤进行配置,相信很快就可以搭建好一个基础的 MySQL 主从环境. 介绍 MySQL 主从同步分为 3 个步骤: master 节点将数据的更新记录写到 binary log 中. slave 节点开启 IO 线程连接 master 节点,请求获取指定 binary log 文件的指定位置之后的日志. master 节点的 binary l

  • 详解如何将springboot项目导出成war包

    以demo-3项目为例: 1.将pom.xml中的jar改成war     2.添加依赖 <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <scope>provided</scope> </dependency> 3.移除插件 如果已经嵌入了tomcat插件,还要移除tomcat插件

  • 详解如何为SpringBoot项目中的自定义配置添加IDE支持

    详解如何为SpringBoot项目中的自定义配置添加IDE支持

    导言 代码是写给人看的,不是写给机器看的,只是顺便计算机可以执行而已 --<计算机程序的构造和解释(SICP)> 导言 在我们的项目里经常会出现需要添加自定义配置的应用场景,例如某个开关变量,在测试环境打开,在生产环境不打开,通常我们都会使用下面的代码来实现,然后在Spring Boot配置文件中添加这个key和Value Application.java: application.properties 或者是没有使用@Value而直接在XML中使用我们配置的属性值 application.x

  • 详解IDEA2020新建spring项目和c3p0连接池的创建和使用

    详解IDEA2020新建spring项目和c3p0连接池的创建和使用

    目录 前言 1.环境准备:maven配置 2.导入jar包:c3p0-0.9.5.4.jar和mysql-connector-java.jar 3.编写测试类测试连接 前言 C3P0是一个开源的JDBC连接池,它实现了数据源和JNDI绑定,支持JDBC3规范和JDBC2的标准扩展,目前使用它的开源项目有Hibernate,Spring等. 1.环境准备:maven配置 打开idea,点击"+"新建项目,选择Spring,点击next,填写项目的名称,点击finish,新的Spring项

  • 详解如何在SpringBoot项目中使用全局异常处理

    详解如何在SpringBoot项目中使用全局异常处理

    目录 1. 创建自定义异常 2.创建全局异常处理器 3.创建测试控制器 在完整的项目开发中,异常的出现几乎是无法避免的:如果凡是有可能出现异常的地方,我们都手动的使用try-catch将其捕获的话,虽然也能达到处理异常的效果,但是这样做会使得代码显得十分臃肿并且后期不好维护,也不利于多人系统开发. 在Spring Boot中提供了统一处理异常的方法,SpringBoot中有一个ControllerAdvice的注解,使用该注解表示开启了全局异常的捕获,我们只需在自定义一个方法使用Exceptio

  • 详解如何在SpringBoot项目中使用统一返回结果

    详解如何在SpringBoot项目中使用统一返回结果

    目录 1.创建Spring Boot项目 2.返回结果的封装 3.后端接口实现 3.1 创建实体类 3.2 创建dao层 3.3 创建Controller层 4.前端部分 5.验证 在一个完整的项目中,如果每一个控制器的方法都返回不同的结果,那么对项目的维护和扩展都会很麻烦:并且现在主流的开发模式时前后端分离的模式,如果后端返回各式各样的结果,那么在前后端联调时会非常的麻烦,还会增加前后端的格外任务. 所以,在一个项目中统一返回结果就是一个十分必要和友好的做法.接下来就用一个简单的demo来看看

随机推荐