欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue2.0 ES6語(yǔ)法降級(jí)ES5的操作

 更新時(shí)間:2020年10月30日 09:15:25   作者:左森  
這篇文章主要介紹了Vue2.0 ES6語(yǔ)法降級(jí)ES5的操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

由于部分低版本的手機(jī)還不支持ES6語(yǔ)法,將會(huì)導(dǎo)致vue報(bào)錯(cuò)。綜合了網(wǎng)上的各種辦法,我的項(xiàng)目現(xiàn)在終于成功降級(jí)ES5.

首先安裝插件

npm install -D babel-preset-es2015 babel-core babel-preset-stage-2 babel-loader

編輯配置文件

編輯/build/webpack.base.conf.js

編輯entry節(jié)點(diǎn),變成如下

entry: {
  app: ['babel-polyfill', './src/main.js']
}

替換module.rules數(shù)組中的

{
    test: /\.js$/,
     loader: 'babel-loader',
     include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
    }

{
    test: /\.js$/,
    exclude: /node_modules/, // 處理除了nodde_modules里的js文件
    loader: 'babel-loader'
}

再根目錄新建.babelrc內(nèi)容為

{
 "presets": [
  "es2015",
  "stage-2"
 ],
 "plugins": [

 ]
}

如果使用了URLSearchParams,需要安裝npm install url-search-params-polyfill --save,然后在使用了該對(duì)象的類(lèi)頭部引入import 'url-search-params-polyfill'

最后npm run build 編譯。

驗(yàn)證是否成功

查看dist目錄下編譯出來(lái)的js里面是否還有const/let等ES6的語(yǔ)法,沒(méi)有的話基本就成功了。

補(bǔ)充知識(shí):vue-cli3.x 組件es6 轉(zhuǎn)es5 失敗 導(dǎo)致低版本瀏覽器報(bào)錯(cuò)

錯(cuò)誤為 Uncaught SyntaxError: Unexpected token ...

這個(gè)問(wèn)題網(wǎng)上看了很多解決方式 都沒(méi)發(fā)實(shí)現(xiàn)這個(gè)組件轉(zhuǎn)化成ES5

這個(gè)坑爹的組件就是 vue-superslide

來(lái)看一下他入口文件的內(nèi)容

// 導(dǎo)入組件
import superslide from './superslide'
// import superSlide from "./slide";
// import SuperSlideItem from "./slide-item";
 
// 存儲(chǔ)組件列表
const components = [superslide]
 
// 定義 install 方法,接收 Vue 作為參數(shù)。如果使用 use 注冊(cè)插件,則所有的組件都將被注冊(cè)
const install = function(Vue) {
 // 判斷是否安裝
 if (install.installed) return
 // 遍歷注冊(cè)全局組件
 components.map(component => Vue.component(component.name, component))
}
 
// 判斷是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
 install(window.Vue)
}
 
export default {
 // 導(dǎo)出的對(duì)象必須具有 install,才能被 Vue.use() 方法安裝
 install,
 // 以下是具體的組件列表
 ...components
}

真的是有es6語(yǔ)法 悲傷 整個(gè)項(xiàng)目只有這個(gè)組件沒(méi)有轉(zhuǎn)義成ES5 不明所以 還是要解決啊 我并沒(méi)有放棄它

解決方式 去node_modules文件夾下面找到,把它當(dāng)一個(gè)靜態(tài)資源引入直接放在assets目錄下

原來(lái)插件的引入方式是

import VueSuperSlide from 'vue-superslide'

Vue.use(VueSuperSlide)

現(xiàn)在的引入方式是

import VueSuperSlide from './assets/js/vue-superslide/packages/index.js'

Vue.use(VueSuperSlide)

這簡(jiǎn)直的 LOW 到不行 但解決問(wèn)題了 我忍一忍。

以上這篇Vue2.0 ES6語(yǔ)法降級(jí)ES5的操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue3中簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)添加路由

    Vue3中簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)添加路由

    本文主要介紹了Vue3中簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)添加路由,,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • vue3中ref動(dòng)態(tài)綁定的技巧詳解

    vue3中ref動(dòng)態(tài)綁定的技巧詳解

    這篇文章主要為大家詳細(xì)介紹了vue3中ref動(dòng)態(tài)綁定的相關(guān)技巧,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解一下
    2024-01-01
  • Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁(yè)面

    Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁(yè)面

    這篇文章主要介紹了Vue實(shí)現(xiàn)路由跳轉(zhuǎn)至外界頁(yè)面方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vue和react等項(xiàng)目中更簡(jiǎn)單的實(shí)現(xiàn)展開(kāi)收起更多等效果示例

    vue和react等項(xiàng)目中更簡(jiǎn)單的實(shí)現(xiàn)展開(kāi)收起更多等效果示例

    這篇文章主要介紹了vue和react等項(xiàng)目中更簡(jiǎn)單的實(shí)現(xiàn)展開(kāi)收起更多等效果示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-02-02
  • echarts實(shí)現(xiàn)獲取datazoom的起始值(包括x軸和y軸)

    echarts實(shí)現(xiàn)獲取datazoom的起始值(包括x軸和y軸)

    這篇文章主要介紹了echarts實(shí)現(xiàn)獲取datazoom的起始值(包括x軸和y軸),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • ElementUI的this.$notify.close()調(diào)用不起作用的解決

    ElementUI的this.$notify.close()調(diào)用不起作用的解決

    本文主要介紹了ElementUI的this.$notify.close()調(diào)用不起作用的解決,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • Vue和React有哪些區(qū)別

    Vue和React有哪些區(qū)別

    這篇文章主要介紹了Vue和React有哪些區(qū)別,幫助大家更好的理解和學(xué)習(xí)JavaScript框架,感興趣的朋友可以了解下
    2020-09-09
  • vue使用echarts實(shí)現(xiàn)折線圖

    vue使用echarts實(shí)現(xiàn)折線圖

    這篇文章主要為大家詳細(xì)介紹了vue使用echarts實(shí)現(xiàn)折線圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue中使用和移除總線Bus的注意事項(xiàng)詳解

    Vue中使用和移除總線Bus的注意事項(xiàng)詳解

    Vue中的總線Bus是一種通信機(jī)制,可用于組件間的數(shù)據(jù)傳遞和事件觸發(fā)。使用時(shí)需要注意Bus的命名和定義、監(jiān)聽(tīng)和觸發(fā)事件的方法、移除和銷(xiāo)毀Bus的時(shí)機(jī)和方式等問(wèn)題。合理使用總線Bus可以提高組件的復(fù)用性和可維護(hù)性,但過(guò)度依賴(lài)可能會(huì)導(dǎo)致代碼耦合和難以維護(hù)
    2023-04-04
  • vue文件代碼縮進(jìn)以及格式化代碼方式[自定義]

    vue文件代碼縮進(jìn)以及格式化代碼方式[自定義]

    這篇文章主要介紹了vue文件代碼縮進(jìn)以及格式化代碼方式[自定義],具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03

最新評(píng)論