How to configure the loader in vue?

This article introduces the common loaders and configuration details of vue projects. Now I share them with you and give them a reference.

This article introduces the common loaders and configuration details of vue projects and shares them with everyone. The details are as follows:

1. Install sass:

1.1 Because sass-loader depends on node-sass, so when installing sass-loader, you also need to install node-sass

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

1.2 After the installation is complete, modify the

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

2. Install axios:

axios is used for data requests. In Vue1.0, there is an officially recommended ajax plug-in [vue-resource](https://github.com/pagekit/ vue-resource), but since Vue was updated to 2.0, vue-resource is no longer officially updated, and it is recommended to use axios.

2.1 Installation:

npm install axios --save-dev

2.2. Introduction in main.js:

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

2.3. Use in components:

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

3 .Install mock:

3.1. Installation:

npm install mockjs --save-dev

3.2. Use: Create a new mock.js file under src

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. In the components that require data Introduced in:

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. Install lib-flexible: --realize mobile terminal adaptation

4.1 Installation:

npm install lib-flexible --save

In the actual development process , when using the flexible plug-in, px will be automatically converted into rem units. In the vue project, we use the px2rem tool for conversion, so we need to install the px2rem loader:

npm install px2rem-loader

4.2 Introduced in main.js:

import 'lib-flexible'

4.3 Configure px2rem-loader: (in build/untils.js)

remUnit means 1rem=how many pixels, combined with lib-flexible, we set the option.remUnit of px2remLoader to the design 1/10 of the width of the draft. Assume that the width of our design draft is 750, then remUnit is 75, and then add a px2remLoader after the cssLoader

 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. Install sass-resourses-loader

If you use sass in your project, you will more or less use global variables, mixin/function, etc. So how do you set it as a global state to avoid introducing it in every vue file?

5.1 Install sass-resources-loader:

npm i sass-resources-loader

5.2 Introduce

import 'lib-flexible'

5.3 Configure px2rem-loader: (in build/untils.js)

Find this comment in the file

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

Add the following function above the comment:

 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)
  }
 }

and replace the following code

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

with:

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About how to use ejsExcel template

How to create a logistics map in D3.js (detailed tutorial)

How to get the top N main color values ​​​​of an image in javascript

How to use trackBy to improve performance in Angular

How to implement the card flipping mini-game in WeChat mini program

How to clear the specified overlay using Baidu map api? How to do it specifically?

The above is the detailed content of How to configure the loader in vue?. For more information, please follow other related articles on the PHP Chinese website!