집 > 기사 > 웹 프론트엔드 > vue에서 로더를 구성하는 방법은 무엇입니까?

vue에서 로더를 구성하는 방법은 무엇입니까?

亚连원래의: 2018-06-11 10:58:561482검색

이 글에서는 Vue 프로젝트의 공통 로더와 구성 세부 사항을 소개하고 참고할 수 있도록 하겠습니다.

이 글에서는 Vue 프로젝트의 공통 로더와 구성 세부 사항을 소개하고 이를 모든 사람과 공유합니다.

1 sass 설치:

1.1 sass-loader는 node-sass에 의존하므로 이전에는 sass-loader 설치 node-sass

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

1.2도 설치해야 합니다. 설치가 완료된 후 c9ccee2e6ea535a969eb3f532ad9fe89 태그를 수정합니다:

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

2. axios 설치:

axios는 데이터 요청에 사용됩니다. Vue1.0 ajax 플러그인 [vue-resource](https://github.com/pagekit/vue-resource)에 공식 권장 사항이 있지만 Vue가 2.0으로 업데이트된 이후 vue-resource는 더 이상 공식적으로 업데이트되지 않습니다. , axios를 사용하는 것이 좋습니다.

2.1 설치 : main.js src 아래의 새 mock.js 파일

npm install axios --save-dev

3.3. 데이터가 필요한 구성 요소에 도입:

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

4. lib-flexible 설치: --implement mobile Adaptation

4.1 설치:

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

실제 개발 과정 중 , 유연한 플러그인을 사용하면 px가 자동으로 rem 단위로 변환됩니다. vue 프로젝트에서는 변환을 위해 px2rem 도구를 사용하므로 px2rem 로더를 설치해야 합니다.

npm install mockjs --save-dev

4.2 main.js에 도입됨:

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

4.3 px2rem-loader 구성: (build/untils.js에서)

remUnit은 1rem = 픽셀 수를 의미하며 lib-flexible과 결합하여 px2remLoader의 option.remUnit을 너비의 1/10로 설정합니다. 디자인 초안. 디자인 초안의 너비가 750이고 remUnit이 75라고 가정하고 cssLoader

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

5 뒤에 px2remLoader를 추가합니다. 프로젝트에서 sass를 사용하는 경우 sass-resourses-loader

를 설치하세요. , 다소 전역 사용은 변수, mixin/함수 등을 사용합니다. 그런 다음 각 vue 파일에 도입되지 않도록 전역 상태로 설정하는 방법은 무엇입니까?

5.1 sass-resources-loader 설치:

npm install lib-flexible --save

5.2 main.js에

npm install px2rem-loader

소개

5.3 px2rem-loader 구성: (build/untils.js에서)

파일에서 이 주석을 찾으세요// [https //vue-loader.vuejs.org/en/configurations/extract-css.html](https://vue-loader.vuejs.org/en/configurations/extract-css.html)

댓글에 추가 위의 함수:

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

다음 코드

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

를

npm i sass-resources-loader

로 바꾸세요. 위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

vue에서 로더를 구성하는 방법은 무엇입니까?

관련 기사