vue에서 로더를 구성하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

이 글에서는 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도 설치해야 합니다. 설치가 완료된 후 태그를 수정합니다:

로그인 후 복사 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 'axios' Vue.prototype.$http = axios 로그인 후 복사

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

this.$http({ method:'get', url:'http://breadoffer.com/api/artcile', params:{ platformCode:'pc' // 用于向后台传参 } }).then(response => { console.log(response) }) 로그인 후 복사 실제 개발 과정 중 , 유연한 플러그인을 사용하면 px가 자동으로 rem 단위로 변환됩니다. vue 프로젝트에서는 변환을 위해 px2rem 도구를 사용하므로 px2rem 로더를 설치해야 합니다.

npm install mockjs --save-dev 로그인 후 복사 4.2 main.js에 도입됨:

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.3 px2rem-loader 구성: (build/untils.js에서)

remUnit은 1rem = 픽셀 수를 의미하며 lib-flexible과 결합하여 px2remLoader의 option.remUnit을 너비의 1/10로 설정합니다. 디자인 초안. 디자인 초안의 너비가 750이고 remUnit이 75라고 가정하고 cssLoader 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) }) }, } 로그인 후 복사

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 'lib-flexible' 로그인 후 복사 다음 코드

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 }) }) } 로그인 후 복사 를

npm i sass-resources-loader 로그인 후 복사 로 바꾸세요. 위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.