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 安裝完成后修改 <style>標(biāo)簽:

 <style lang="scss"></style>
2.安裝axios:

axios用于數(shù)據(jù)請求劝赔,在Vue1.0的時候有一個官方推薦的 ajax 插件 [vue-resource](https://github.com/pagekit/vue-resource)誓焦,但是自從 Vue 更新到 2.0 之后,官方就不再更新 vue-resource,推薦使用axios杂伟。

2.1 安裝:

npm install axios --save-dev

2.2. 在main.js中引入:

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

2.3. 在組件中使用:

this.$http({
     method:'get',
     url:'http://breadoffer.com/api/artcile',
     params:{
          platformCode:'pc'         // 用于向后臺傳參
     }
}).then(response => {
     console.log(response)
})
3.安裝mock:

3.1. 安裝:

npm install mockjs --save-dev

3.2. 使用:在src下新建mock.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":"進行中",
        }],
    }
})

3.3. 在需要數(shù)據(jù)的組件中引入:

import datas from '../mock'  // 根據(jù)自己實際目錄引入

  methods: {
      request() {
        this.$http({
          method: 'get',
          url: 'http://platform.breadoffer.com/api/oversea',
          params: {
            courseMaxCount: 2,     //設(shè)置課程返回的數(shù)據(jù)為2條
            teacherMaxCount: 10,   //設(shè)置導(dǎo)師返回的數(shù)據(jù)為10條
          }
        }).then(response => {
            console.log(response)
        }).catch(error => {
             console.log(error)
        })
      },
    }
4.安裝 lib-flexible: --實現(xiàn)移動端自適應(yīng)

4.1 安裝:

npm install lib-flexible --save

在實際開發(fā)過程中移层,使用flexible插件時會自動把px轉(zhuǎn)換成rem單位,在vue項目中我們使用px2rem這個工具進行轉(zhuǎn)換赫粥,所以需要安裝px2rem加載器:

npm install px2rem-loader 

4.2 在main.js中引入:

import 'lib-flexible'

4.3 配置px2rem-loader: (在build/untils.js)

remUnit 的意思是1rem=多少像素观话, 結(jié)合lib-flexible,我們將px2remLoader的option.remUnit 設(shè)置成設(shè)計稿寬度的1/10越平,假設(shè)我們的設(shè)計稿寬度是750频蛔,則remUnit為75,然后在cssLoader后面加一個px2remLoader即可

 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.安裝 sass-resourses-loader

如果在項目中使用sass秦叛,或多或少會用到全局的變量晦溪,mixin/function等,那么如何將其設(shè)為全局狀態(tài)挣跋,以避免在每個vue文件中引入三圆?

5.1 安裝 sass-resources-loader:

npm i sass-resources-loader

5.2 在main.js中引入

import 'lib-flexible'

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)

在注釋上面添加如下函數(shù):

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

并且將以下代碼

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

替換為:

  return {
      css: generateLoaders(),
      postcss: generateLoaders(),
      less: generateLoaders('less'),
      sass: generateSassResourceLoader(),
      scss: generateSassResourceLoader(),
      stylus: generateLoaders('stylus'),
      styl: generateLoaders('stylus')
    }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市避咆,隨后出現(xiàn)的幾起案子嫌术,更是在濱河造成了極大的恐慌,老刑警劉巖牌借,帶你破解...
    沈念sama閱讀 211,743評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件度气,死亡現(xiàn)場離奇詭異,居然都是意外死亡膨报,警方通過查閱死者的電腦和手機磷籍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來现柠,“玉大人院领,你說我怎么就攤上這事」环裕” “怎么了比然?”我有些...
    開封第一講書人閱讀 157,285評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長周循。 經(jīng)常有香客問我强法,道長,這世上最難降的妖魔是什么湾笛? 我笑而不...
    開封第一講書人閱讀 56,485評論 1 283
  • 正文 為了忘掉前任饮怯,我火速辦了婚禮,結(jié)果婚禮上嚎研,老公的妹妹穿的比我還像新娘蓖墅。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,581評論 6 386
  • 文/花漫 我一把揭開白布论矾。 她就那樣靜靜地躺著教翩,像睡著了一般。 火紅的嫁衣襯著肌膚如雪贪壳。 梳的紋絲不亂的頭發(fā)上饱亿,一...
    開封第一講書人閱讀 49,821評論 1 290
  • 那天,我揣著相機與錄音寥袭,去河邊找鬼。 笑死关霸,一個胖子當(dāng)著我的面吹牛传黄,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播队寇,決...
    沈念sama閱讀 38,960評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼膘掰,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了佳遣?” 一聲冷哼從身側(cè)響起识埋,我...
    開封第一講書人閱讀 37,719評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎零渐,沒想到半個月后窒舟,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡诵盼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,516評論 2 327
  • 正文 我和宋清朗相戀三年惠豺,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片风宁。...
    茶點故事閱讀 38,650評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡洁墙,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出戒财,到底是詐尸還是另有隱情热监,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布饮寞,位于F島的核電站孝扛,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏幽崩。R本人自食惡果不足惜疗琉,卻給世界環(huán)境...
    茶點故事閱讀 39,936評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望歉铝。 院中可真熱鬧盈简,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,757評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至臼勉,卻和暖如春邻吭,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背宴霸。 一陣腳步聲響...
    開封第一講書人閱讀 31,991評論 1 266
  • 我被黑心中介騙來泰國打工囱晴, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人瓢谢。 一個月前我還...
    沈念sama閱讀 46,370評論 2 360
  • 正文 我出身青樓畸写,卻偏偏與公主長得像,于是被迫代替她去往敵國和親氓扛。 傳聞我的和親對象是個殘疾皇子枯芬,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,527評論 2 349