详解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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
Jul 16 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
基于vue hash模式微信分享#号的解决
Sep 07 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
JavaScript中Function详解
2015/02/27 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
Python解惑之True和False详解
2017/04/24 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
学雷锋志愿者活动总结
2014/06/27 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
医学检验专业自荐信
2014/09/18 职场文书
党员民主生活会对照检查材料思想汇报
2014/09/28 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
新闻报道稿范文
2015/07/23 职场文书
小学主题班会教案
2015/08/17 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android