How to configure the loader in vue?-JS Tutorial-php.cn

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.