vue 项目常用加载器及配置详解


Posted in Javascript onJanuary 22, 2018

本文介绍了vue 项目常用加载器及配置详解,分享给大家,具体如下:

1.安装sass:

1.1 由于sass-loader依赖于node-sass,所以在安装sass-loader的同时还需安装node-sass

npm install --save-dev node-sass
npm install --save-dev sass-loader

1.2 安装完成后修改 <style>标签:

<style lang="scss"></style>

2.安装axios:

axios用于数据请求,在Vue1.0的时候有一个官方推荐的 ajax 插件 [vue-resource](https://github.com/pagekit/vue-resource),但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource,推荐使用axios。

2.1 安装:

npm install axios --save-dev

2.2. 在main.js中引入:

import axios from 'axios'
Vue.prototype.$http = axios

2.3. 在组件中使用:

this.$http({
  method:'get',
  url:'http://breadoffer.com/api/artcile',
  params:{
   platformCode:'pc'   // 用于向后台传参
  }
}).then(response => {
  console.log(response)
})

3.安装mock:

3.1. 安装:

npm install mockjs --save-dev

3.2. 使用:在src下新建mock.js文件

import Mock from 'mockjs';

export default Mock.mock('http://platform.breadoffer.com/api/oversea', {
 "data":{
  "breadActivities|9":[{
   "title":"@csentence(5,25)",
   "desc":"@paragraph(2)",
   "beiginTime":"@date",
   "endTime":"@date",
   "stateName":"进行中",
  }],
 }
})

3.3. 在需要数据的组件中引入:

import datas from '../mock' // 根据自己实际目录引入

 methods: {
  request() {
  this.$http({
   method: 'get',
   url: 'http://platform.breadoffer.com/api/oversea',
   params: {
   courseMaxCount: 2,  //设置课程返回的数据为2条
   teacherMaxCount: 10, //设置导师返回的数据为10条
   }
  }).then(response => {
   console.log(response)
  }).catch(error => {
    console.log(error)
  })
  },
 }

4.安装 lib-flexible: --实现移动端自适应

4.1 安装:

npm install lib-flexible --save

在实际开发过程中,使用flexible插件时会自动把px转换成rem单位,在vue项目中我们使用px2rem这个工具进行转换,所以需要安装px2rem加载器:

npm install px2rem-loader

4.2 在main.js中引入:

import 'lib-flexible'

4.3 配置px2rem-loader: (在build/untils.js)

remUnit 的意思是1rem=多少像素, 结合lib-flexible,我们将px2remLoader的option.remUnit 设置成设计稿宽度的1/10,假设我们的设计稿宽度是750,则remUnit为75,然后在cssLoader后面加一个px2remLoader即可

var px2remLoader = {
 loader: 'px2rem-loader',
 options: {
  remUnit: 75
 }
 }

 // generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {
 const loaders = [cssLoader,px2remLoader]
 if (loader) {
  loaders.push({
  loader: loader + '-loader',
  options: Object.assign({}, loaderOptions, {
   sourceMap: options.sourceMap
  })
  })
 }

5.安装 sass-resourses-loader

如果在项目中使用sass,或多或少会用到全局的变量,mixin/function等,那么如何将其设为全局状态,以避免在每个vue文件中引入?

5.1 安装 sass-resources-loader:

npm i sass-resources-loader

5.2 在main.js中引入

import 'lib-flexible'

5.3 配置px2rem-loader: (在build/untils.js)

在文件中找到这句注释

// [https://vue-loader.vuejs.org/en/configurations/extract-css.html](https://vue-loader.vuejs.org/en/configurations/extract-css.html)

在注释上面添加如下函数:

function resolveResouce(name) {
  return path.resolve(__dirname, '../src/sass/' + name);  // sass文件所在目录
 }

 function generateSassResourceLoader() {
  var loaders = [
   cssLoader,
   // 'postcss-loader',
   'sass-loader',
   {
    loader: 'sass-resources-loader',
    options: {
     // it need a absolute path
     resources: [resolveResouce('_mixin.scss')]
    }
   }
  ];
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

并且将以下代码

// return {
 // css: generateLoaders(),
 // postcss: generateLoaders(),
 // less: generateLoaders('less'),
 // sass: generateLoaders('sass', { indentedSyntax: true }),
 // scss: generateLoaders('sass'),
 // stylus: generateLoaders('stylus'),
 // styl: generateLoaders('stylus')
 // }

替换为:

return {
  css: generateLoaders(),
  postcss: generateLoaders(),
  less: generateLoaders('less'),
  sass: generateSassResourceLoader(),
  scss: generateSassResourceLoader(),
  stylus: generateLoaders('stylus'),
  styl: generateLoaders('stylus')
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 #Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 #jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 #jQuery
angular写一个列表的选择全选交互组件的示例
Jan 22 #Javascript
vue-router 组件复用问题详解
Jan 22 #Javascript
详解webpack多页面配置记录
Jan 22 #Javascript
详解html-webpack-plugin用法全解
Jan 22 #Javascript
You might like
PHP 判断变量类型实现代码
2009/10/23 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
js option删除代码集合
2008/11/12 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
Js与Jq 获取页面元素值的方法和差异对比
2015/04/30 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
2016/05/18 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
js+canvas实现滑动拼图验证码功能
2018/03/26 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
python写日志文件操作类与应用示例
2019/07/01 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Python Selenium截图功能实现代码
2020/04/26 Python
python中format函数如何使用
2020/06/22 Python
2014厂务公开实施方案
2014/02/17 职场文书
食品采购员岗位职责
2014/04/14 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
2014年实习生工作总结
2014/11/27 职场文书
2015年科协工作总结
2015/05/19 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript