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

1.2 Ändern Sie nach Abschluss der Installation das Tag c9ccee2e6ea535a969eb3f532ad9fe89 :

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

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

2.2. Eingeführt in main.js:

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

2.3. Wird in Komponenten verwendet:

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

3 .Installieren Mock:

3.1. Installation:

npm install mockjs --save-dev

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":"进行中",
  }],
 }
})

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

4. lib-flexible installieren: --realize mobile terminal adaption

4.1 Installation:

npm install lib-flexible --save

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

4.2 Eingeführt in main .js:

import 'lib-flexible'

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

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

5.2

import 'lib-flexible'

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

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

durch:

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

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?

Das obige ist der detaillierte Inhalt vonWie konfiguriere ich den Loader in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!