Detailed explanation of common loaders and configurations for vue projects

This article introduces a detailed explanation of the commonly used loaders and configurations of vue projects. It is shared with you, as follows:

1. Install sass:

1.1 Since sass-loader depends on node-sass, node-sass is also required to be installed while installing sass-loader.

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

1.2 Modify the <style> tag after installation:

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

2. Install axios:

axios is used for data requests. In Vue1.0, there is an officially recommended ajax plugin [vue-resource](/pagekit/vue-resource), but since Vue was updated to 2.0, the official has stopped updating vue-resource, and it is recommended to use axios.

2.1 Installation:

npm install axios --save-dev

2.2. Introduced in:

import axios from 'axios'
.$http = axios

2.3. Use in components:

this.$http({
  method:'get',
  url:'/api/artcile',
  params:{
   platformCode:'pc'   // Used to pass parameters to the background  }
}).then(response =&gt; {
  (response)
})

3. Install mock:

3.1. Installation:

npm install mockjs --save-dev

3.2. Use: Create a new file under src

import Mock from 'mockjs';

export default ('/api/oversea', {
 "data":{
  "breadActivities|9":[{
   "title":"@csentence(5,25)",
   "desc":"@paragraph(2)",
   "beiginTime":"@date",
   "endTime":"@date",
   "stateName":"in progress",
  }],
 }
})

3.3. Introduce in components that require data:

import datas from '../mock' //Introduce according to your actual directory
 methods: {
  request() {
  this.$http({
   method: 'get',
   url: '/api/oversea',
   params: {
   courseMaxCount: 2,  //Set the course returns 2 pieces of data   teacherMaxCount: 10, //Set the tutor returns 10 pieces of data   }
  }).then(response =&gt; {
   (response)
  }).catch(error =&gt; {
    (error)
  })
  },
 }

4. Install lib-flexible: --Implement mobile adaptation

4.1 Installation:

npm install lib-flexible --save

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

npm install px2rem-loader

4.2 Introduced in:

import 'lib-flexible'

4.3 Configuring px2rem-loader: (in build/)

remUnit means 1rem=how many pixels. Combined with lib-flexible, we set the px2remLoader to 1/10 of the width of the design draft. Assuming that our design draft width is 750, remUnit is 75, and then add a px2remLoader after 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) {
  ({
  loader: loader + '-loader',
  options: ({}, loaderOptions, {
   sourceMap: 
  })
  })
 }

5. Install sass-resours-loader

If you use sass in your project, more or less global variables, mixin/function, etc., then how do you set it to global state to avoid being introduced in every vue file?

5.1 Install sass-resources-loader:

npm i sass-resources-loader

5.2 Introduced in

import 'lib-flexible'

5.3 Configuring px2rem-loader: (in build/)

Find this comment in the file

// [/en/configurations/](/en/configurations/)

Add the following function above the comment:

 function resolveResouce(name) {
  return (__dirname, '../src/sass/' + name);  // The directory where the sass file is located }

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

And put 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')
 // }

Replace with:

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

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.