vue项目直接引入vue.js的es6兼容

vue的使用一般有两种方式:一种是使用脚手架工具vue-cli;二是直接在项目引入vue.js;

最近写移动端项目直接在页面引入的vue.js,遇到一些问题,在此记录:

1、es6的使用问题

现象:使用import语法会报错

原因:普通项目不能识别es6语法

解决方法:1、不使用import语法,我和小伙伴用的extend,把组件的所有内容都包在里面,如下:

    const Home = Vue.extend({

    template: '这里是组件的内容',

    data: function() {

      return {}

    },

     methods: {   },

    mounted(){   },

    created(){

  })

然后配置路由:

const routes = [

    {path:'/xxx',component:xxx}

  ];

2、使用babel将es6转换为es5;

备注:使用vue-cli脚手架时,会自动配置babel,无需再进行配置。

2、es6的兼容问题(iOS9系统下测试):

现象:页面加载进来是空白,没有任何内容!!!

原因:iOS9不支持es6语法。

解决方法:箭头函数、let和const声明,改为es5的写法。

注意:将箭头函数改为普通函数之后,this的指向会改变,函数里面所有的this都需要重新定义(我是在函数最开始的时候定义了var _this = this;然后之前箭头函数里所有的this改为_this即可)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容