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


Posted in Javascript onMay 28, 2018

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,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript textContent与innerText的异同分析
Oct 22 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 Javascript
vue-cli构建项目下使用微信分享功能
May 28 #Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 #Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 #Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 #jQuery
JavaScript继承定义与用法实践分析
May 28 #Javascript
关于jquery中attr()和prop()方法的区别
May 28 #jQuery
JS数组去重常用方法实例小结【4种方法】
May 28 #Javascript
You might like
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
PHP count()函数讲解
2019/02/03 PHP
Prototype Number对象 学习
2009/07/19 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
开源Web应用框架Django图文教程
2017/03/09 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
python交互界面的退出方法
2019/02/16 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
给国外客户的邀请函
2014/01/30 职场文书
质量月活动策划方案
2014/03/10 职场文书
房产转让协议书
2014/04/11 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
2015年护士节慰问信
2015/03/23 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书