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 Copy after login 1.2 After the installation is complete, modify the tag:

Copy after login 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 Copy after login 2.2. Introduction in main.js:

import axios from 'axios' Vue.prototype.$http = axios Copy after login 2.3. Use in components:

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

3.1. Installation:

npm install mockjs --save-dev Copy after login 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":"进行中", }], } }) Copy after login 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) }) }, } Copy after login 4. Install lib-flexible: --realize mobile terminal adaptation

4.1 Installation:

npm install lib-flexible --save Copy after login 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 Copy after login 4.2 Introduced in main.js:

import 'lib-flexible' Copy after login Copy after login 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 }) }) } Copy after login 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 Copy after login 5.2 Introduce

import 'lib-flexible' Copy after login Copy after login 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) } } Copy after login 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') // } Copy after login with:

return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateSassResourceLoader(), scss: generateSassResourceLoader(), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } Copy after login The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

How to configure the loader in vue?