Comment configurer le chargeur dans vue ?-js tutoriel-php.cn

Comment configurer le chargeur dans vue ?

亚连

Libérer： 2018-06-11 10:58:56

original

1507 Les gens l'ont consulté

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

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

2.2. Introduction dans main.js :

import axios from &#39;axios&#39;
Vue.prototype.$http = axios

Copier après la connexion

2.3.

3. Installer mock :

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

Copier après la connexion

3.1. Installer :

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

npm install mockjs --save-dev

Copier après la connexion

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

import Mock from &#39;mockjs&#39;;

export default Mock.mock(&#39;http://platform.breadoffer.com/api/oversea&#39;, {
 "data":{
  "breadActivities|9":[{
   "title":"@csentence(5,25)",
   "desc":"@paragraph(2)",
   "beiginTime":"@date",
   "endTime":"@date",
   "stateName":"进行中",
  }],
 }
})

Copier après la connexion

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

import datas from &#39;../mock&#39; // 根据自己实际目录引入

 methods: {
  request() {
  this.$http({
   method: &#39;get&#39;,
   url: &#39;http://platform.breadoffer.com/api/oversea&#39;,
   params: {
   courseMaxCount: 2,  //设置课程返回的数据为2条
   teacherMaxCount: 10, //设置导师返回的数据为10条
   }
  }).then(response => {
   console.log(response)
  }).catch(error => {
    console.log(error)
  })
  },
 }

Copier après la connexion

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

Copier après la connexion

4.2 Introduit dans main.js :

npm install px2rem-loader

Copier après la connexion

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

import &#39;lib-flexible&#39;

Copier après la connexion

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: &#39;px2rem-loader&#39;,
 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 + &#39;-loader&#39;,
  options: Object.assign({}, loaderOptions, {
   sourceMap: options.sourceMap
  })
  })
 }

Copier après la connexion

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

Copier après la connexion

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

import &#39;lib-flexible&#39;

Copier après la connexion

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, &#39;../src/sass/&#39; + name);  // sass文件所在目录
 }

 function generateSassResourceLoader() {
  var loaders = [
   cssLoader,
   // &#39;postcss-loader&#39;,
   &#39;sass-loader&#39;,
   {
    loader: &#39;sass-resources-loader&#39;,
    options: {
     // it need a absolute path
     resources: [resolveResouce(&#39;_mixin.scss&#39;)]
    }
   }
  ];
  if (options.extract) {
   return ExtractTextPlugin.extract({
    use: loaders,
    fallback: &#39;vue-style-loader&#39;
   })
  } else {
   return [&#39;vue-style-loader&#39;].concat(loaders)
  }
 }

Copier après la connexion

est remplacé par :

 // return {
 // css: generateLoaders(),
 // postcss: generateLoaders(),
 // less: generateLoaders(&#39;less&#39;),
 // sass: generateLoaders(&#39;sass&#39;, { indentedSyntax: true }),
 // scss: generateLoaders(&#39;sass&#39;),
 // stylus: generateLoaders(&#39;stylus&#39;),
 // styl: generateLoaders(&#39;stylus&#39;)
 // }

Copier après la connexion

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(&#39;less&#39;),
  sass: generateSassResourceLoader(),
  scss: generateSassResourceLoader(),
  stylus: generateLoaders(&#39;stylus&#39;),
  styl: generateLoaders(&#39;stylus&#39;)
 }

Copier après la connexion