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 相关文章推荐
jQuery 使用手册(五)
Sep 23 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
AngularJs表单验证实例详解
May 30 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
Vue关于组件化开发知识点详解
May 13 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上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
php探针不显示内存解决方法
2019/09/17 PHP
jquery ui对话框实例代码
2013/05/10 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
python中reload重载实例用法
2020/12/15 Python
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
廉洁自律承诺书
2014/03/27 职场文书
金秋助学感谢信
2015/01/21 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
大学生就业意向书
2015/05/11 职场文书