成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

[新手坑] 03.Vue-CLI用ES6編碼仍需要手動安裝一些Babel插件

lwx12525 / 2897人閱讀

摘要：用編碼仍需要手動安裝一些插件這五一幾天沒什么事情想著再深入研究下然后又找了些教程結(jié)合官方文檔研究卻遇到了一個坑爹的問題在安裝完成后如果需要用到一些語法編寫代碼有時候報錯的話可能是缺少編譯插件比如我在看文檔和部分教程的時候有類似這樣的代碼

Vue-CLI用ES6編碼仍需要手動安裝一些Babel插件 
這五一幾天, 沒什么事情, 想著再深入研究下Vuex, 然后又找了些教程, 結(jié)合官方文檔研究. 卻遇到了一個坑爹的問題...

在Vue-CLI安裝完成后, 如果需要用到一些ES6語法編寫代碼, 有時候報錯的話, 可能是缺少編譯插件, 比如我在看Vuex文檔和部分教程的時候, 有類似這樣的代碼

methods: mapActions([
  "increment",
  "decrement",
  "incrementIfOdd",
  "incrementAsync"
])

這段代碼就是借用Vuex的輔助函數(shù)mapActions來使代碼更簡潔.

問題現(xiàn)象

而我一個組件中, 不可能只有這些mapActions的方法啊. 于是需要改寫這個methods, 很多教程也有提到使用擴(kuò)展運(yùn)算符. 于是我就試著改寫成如下:

methods: {
  ...mapActions([
    "increment",
    "decrement",
    "incrementIfOdd",
    "incrementAsync"
  ]),
  doSth() {
    console.log("doSth")
  }
}

這樣看起來挺不錯的. 編輯器內(nèi)也沒有提示存在語法錯誤. 但是按Ctrl+S的時候, 項目報錯- -. 這下就懵逼了.

由于過于信任Vue-CLI默認(rèn)配好的Babel環(huán)境可以編譯改代碼, 花了好長時間反復(fù)檢查代碼錯誤, 查擴(kuò)展運(yùn)算符的語法等等...
問題原因

由于ES6語法還不夠熟悉, 東改改西改改, 弄了很長時間沒有弄出來, 心想難道是真的不支持? 于是不爽的去找到Vuex官方Exaples - Counter的代碼復(fù)制到自己項目來測試.

也就是上面我改寫的那段, 居然還報錯. 這下內(nèi)心涼涼... 看樣子折騰了很久的我, 意識到, 官方運(yùn)行OK, 我這里一樣的代碼還是報錯, 應(yīng)該不是js代碼的鍋... 可能真的是Babel沒有裝好, 又想起之前看過的一篇文章好像有提到ES6的babel插件的問題. 只是我沒有注意到... 文章在此:　vuex 源碼：深入 vuex 之輔助函數(shù) mapState

解決方案

那么接下來我們在Vue-CLI項目安裝Object rest spread transform插件:

npm install --save-dev babel-plugin-transform-object-rest-spread

接著修改.babelrc文件, 例如

{
  "presets": [["env", { "modules": false }]],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    "transform-object-rest-spread",
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

接著重新運(yùn)行項目. 總算正常了!

總結(jié)

有時候還是要自信一點(diǎn), 看了視頻和一些教程這樣寫都沒報錯, 唯獨(dú)我報錯了. 一般來說大概都是環(huán)境問題, 甩鍋給Vue-CLI

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107713.html

相關(guān)文章

  • Next.js踩坑入門系列（二）— 添加Antd && CSS

    摘要：踩坑入門系列一二添加三目錄重構(gòu)再談路由陸續(xù)更新個人對于腳手架的有一種執(zhí)念，如果搭建出來就是一個首頁標(biāo)簽跳轉(zhuǎn)，實在不是我這個處女座的風(fēng)格，因此第二步我就想引用框架，相信很多使用的開發(fā)者用的也都是這個框架吧。 Next.js踩坑入門系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目錄重構(gòu)&&再談路由 陸續(xù)更新... 個人對于腳手架的UI有一種執(zhí)...

    lifesimple 評論0 收藏0

  • 使用webpack和babel搭建react開發(fā)環(huán)境

    摘要：譯文原文來自寫在前面使用已經(jīng)蠻長一段時間但是在新項目開始之際都是東拼西湊其他項目的配置來使用如果要自己從零開始寫一個完整項目的配置估計得費(fèi)死勁所以在發(fā)布版本之際正是時候來認(rèn)真從零開始學(xué)習(xí)了是一個出自的庫用于構(gòu)建用戶交互界面是一個非常厲害的有 譯文,原文來自https://scotch.io/tutorials/s...寫在前面,使用webpack已經(jīng)蠻長一段時間,但是在新項目開始之際,...

    AZmake 評論0 收藏0

  • 在 React-CRA 應(yīng)用中配合 VSCode 使用 ESLint 實踐前端代碼規(guī)范

    摘要：編碼規(guī)范是獨(dú)角獸公司內(nèi)部的編碼規(guī)范，該項目是上很受歡迎的一個開源項目，在前端開發(fā)中使用廣泛，本文的配置規(guī)則就是以編碼規(guī)范和編碼規(guī)范作為基礎(chǔ)的。 更新時間：2019-01-22React.js create-react-app 項目 + VSCode 編輯器 + ESLint 代碼檢查工具 + Airbnb 編碼規(guī)范 前言 為什么要使用 ESLint 在項目開發(fā)過程中，編寫符合團(tuán)隊編碼規(guī)...

    Hujiawei 評論0 收藏0

  • 一份關(guān)于webpack2和模塊打包的新手指南

    摘要：使用讓從打包文件中刪除未使用的導(dǎo)出項以減少文件大小。最后，用以下內(nèi)容替換的部分在命令行中運(yùn)行將以監(jiān)視模式啟動，當(dāng)目錄中的文件更改時，它將重新編譯。這種轉(zhuǎn)換涉及三個單獨(dú)的加載器和庫在配置文件中為文件添加新規(guī)則。 webpack已成為現(xiàn)代Web開發(fā)中最重要的工具之一。它是一個用于JavaScript的模塊打包工具，但是它也可以轉(zhuǎn)換所有的前端資源，例如HTML和CSS，甚至是圖片。它可以讓你...

    tianren124 評論0 收藏0

  • 配置React開發(fā)環(huán)境教程

    摘要：這是一篇新手向文章，主要是記錄一下使用過程，希望能給予別人一些幫助和提示用做包管理用做和語法編譯器做模塊管理和打包教程是基于的，得提前安裝好。 這是一篇新手向文章，主要是記錄一下使用過程，希望能給予別人一些幫助和提示 用 Yarn 做包管理用 Babel 做jsx和es6語法編譯器Webpack 做模塊管理和打包 教程是基于macOS的，Nodejs得提前安裝好。我的Nodejs和np...

    explorer_ddf 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<