Wie konfiguriere ich den Loader in Vue?

In diesem Artikel werden die allgemeinen Loader und Konfigurationsdetails von Vue-Projekten vorgestellt. Jetzt teile ich sie mit Ihnen und gebe ihnen eine Referenz.

In diesem Artikel werden die allgemeinen Loader und Konfigurationsdetails von Vue-Projekten vorgestellt und mit allen geteilt. Die Details lauten wie folgt:

1. Installieren Sie sass:

1.1 Fälliger Sass-Loader hängt von Node-Sass ab, daher müssen Sie bei der Installation von Sass-Loader auch Node-Sass installieren

npm install --save-dev node-sass npm install --save-dev sass-loader Nach dem Login kopieren 1.2 Ändern Sie nach Abschluss der Installation das Tag :

Nach dem Login kopieren 2. Axios installieren:

Axios wird für Datenanfragen verwendet. Es gibt ein offiziell empfohlenes Ajax-Plugin [vue-resource ](https://github.com/pagekit/ vue-resource), aber da Vue auf 2.0 aktualisiert wurde, wird vue-resource nicht mehr offiziell aktualisiert und es wird empfohlen, axios zu verwenden.

2.1 Installation:

npm install axios --save-dev Nach dem Login kopieren 2.2. Eingeführt in main.js:

import axios from 'axios' Vue.prototype.$http = axios Nach dem Login kopieren 2.3. Wird in Komponenten verwendet:

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

3.1. Installation:

npm install mockjs --save-dev Nach dem Login kopieren 3.2. Verwendung: Erstellen Sie eine neue Mock.js-Datei unter 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":"进行中", }], } }) Nach dem Login kopieren 3.3 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) }) }, } Nach dem Login kopieren 4. lib-flexible installieren: --realize mobile terminal adaption

4.1 Installation:

npm install lib-flexible --save Nach dem Login kopieren im eigentlichen Entwicklungsprozess, Bei Verwendung des flexiblen Plug-Ins werden px automatisch in rem-Einheiten konvertiert. Im Vue-Projekt verwenden wir das px2rem-Tool zur Konvertierung, daher müssen wir den px2rem-Loader installieren:

npm install px2rem-loader Nach dem Login kopieren 4.2 Eingeführt in main .js:

import 'lib-flexible' Nach dem Login kopieren Nach dem Login kopieren 4.3 px2rem-loader konfigurieren: (in build/untils.js)

remUnit bedeutet 1rem=wie viele Pixel, kombiniert mit lib-flexible, setzen wir die Option.remUnit von px2remLoader auf das Design 1/10 der Breite des Entwurfs. Nehmen Sie an, dass die Breite unseres Designentwurfs 750 beträgt, dann ist remUnit 75 und fügen Sie dann einen px2remLoader nach dem 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 }) }) } Nach dem Login kopieren 5 hinzu . Installieren Sie sass-resources-loader

Wenn Sie sass in Ihrem Projekt verwenden, werden Sie mehr oder weniger globale Variablen, Mixin/Funktion usw. verwenden, also wie Sie es als globalen Status festlegen Vermeiden Sie es, es in jede Vue-Datei einzuführen?

5.1 sass-resources-loader installieren:

npm i sass-resources-loader Nach dem Login kopieren 5.2

import 'lib-flexible' Nach dem Login kopieren Nach dem Login kopieren vorstellen 5.3 px2rem-loader konfigurieren: (in build/untils.js)

Finden Sie diesen Kommentar in der Datei

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

Fügen Sie über dem Kommentar die folgende Funktion hinzu:

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) } } Nach dem Login kopieren und ersetzen Sie den folgenden Code

// return { // css: generateLoaders(), // postcss: generateLoaders(), // less: generateLoaders('less'), // sass: generateLoaders('sass', { indentedSyntax: true }), // scss: generateLoaders('sass'), // stylus: generateLoaders('stylus'), // styl: generateLoaders('stylus') // } Nach dem Login kopieren durch:

return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateSassResourceLoader(), scss: generateSassResourceLoader(), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } Nach dem Login kopieren Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Informationen zur Verwendung der ejsExcel-Vorlage

So erstellen Sie eine Logistikkarte in D3.js (ausführliches Tutorial)

So erhalten Sie die Top-N-Hauptfarbwerte eines Bildes in Javascript

So verwenden Sie trackBy, um die Leistung in Angular zu verbessern

So implementieren Sie das Kartenumdrehungs-Minispiel im WeChat-Miniprogramm

Wie lösche ich das angegebene Overlay mithilfe der Baidu Maps API? konkret machen?

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Wie konfiguriere ich den Loader in Vue?