Comment configurer le chargeur dans vue ?

Cet article présente les chargeurs courants et les détails de configuration des projets vue. Maintenant, je les partage avec vous et leur donne une référence.

Cet article présente les chargeurs courants et les détails de configuration des projets vue et les partage avec tout le monde. Les détails sont les suivants :

Installez sass :

.

1.1 Due sass-loader dépend de node-sass, donc lors de l'installation de sass-loader, vous devez également installer node-sass

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

1.2 Une fois l'installation terminée, modifiez le

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

2. Installez axios :

axios est utilisé pour les demandes de données Dans Vue1.0, il existe un plug-in ajax officiellement recommandé. [vue-resource](https://github. com/pagekit/vue-resource), mais depuis que Vue a été mis à jour vers 2.0, vue-resource ne sera plus officiellement mis à jour et il est recommandé d'utiliser axios.

2.1 Installation :

npm install axios --save-dev

2.2. Introduction dans main.js :

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

2.3.

3. Installer mock :

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

3.1. Installer :

3.2. Utiliser : Créer un nouveau fichier mock.js sous src

npm install mockjs --save-dev

3.3. Introduire dans les composants qui nécessitent des données :

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

4. Installer lib-flexible : --réaliser l'adaptation mobile

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.1 Installation :

Dans le processus de développement actuel, lors de l'utilisation du plug-in flexible, les px seront automatiquement convertis en unités rem. Dans le projet vue, nous utilisons l'outil px2rem pour la conversion, nous devons donc installer le chargeur px2rem. :

npm install lib-flexible --save

4.2 Introduit dans main.js :

npm install px2rem-loader

4.3 Configurer px2rem-loader : (dans build/untils.js)

import 'lib-flexible'

remUnit signifie 1rem= Combien de pixels, combinés avec lib-flexible, nous définissons l'option.remUnit de px2remLoader à 1/10 de la largeur du brouillon de conception. Supposons que la largeur de notre brouillon de conception est de 750, puis remUnit est de 75, puis ajoutons un. px2remLoader après le cssLoader

5. Installez sass-resourses-loader

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

Si vous utilisez sass dans votre projet, vous utiliserez plus ou moins des variables globales, mixin/function, etc. Alors, comment puis-je en faire un état global pour éviter de l'introduire dans chaque fichier vue ?

5.1 Installer sass-resources-loader :

5.2 Introduire dans main.js

npm i sass-resources-loader

5.3 Configurer px2rem-loader : (dans build/untils . js)

import 'lib-flexible'

Retrouvez ce commentaire dans le fichier

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

Ajoutez la fonction suivante au dessus du commentaire :

et remplacez le code suivant

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

est remplacé par :

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

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

Articles connexes :

À propos de l'utilisation du modèle ejsExcel

Comment créer une carte logistique dans D3.js (tutoriel détaillé)

Comment obtenir les N principales valeurs de couleur principales d'une image en javascript

Comment utiliser trackBy pour améliorer les performances en Angular

Comment implémenter le mini-jeu de retournement de cartes dans le mini-programme WeChat

Comment effacer la superposition spécifiée à l'aide de l'API de carte Baidu Comment ? le faire spécifiquement ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!