美文网首页
vue项目直接引入vue.js的es6兼容

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

作者: 书简虫子 | 来源:发表于2018-03-09 15:35 被阅读0次

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即可)。

相关文章

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

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

  • vue基础-第一个vue程序

    在script里直接引入vue.js无效。 最近在学vue,尝试在html里直接引入vue.js来用但是失败了,不...

  • vue相关

    vue相关 vue入门 下载vue.js 创建静态web项目 将vue.js导入项目 编写hello页面,引入vu...

  • 使用gulp+vue

    直接使用vue.js会因为es6编译失败,解决方法

  • Vue初体验

    Vue的引入 要使用 Vue,我们可以直接在 Vue.js 的官网直接下载 vue.min.js 文件,然后在 H...

  • Vue——初始Vue & Vue的响应式原理 & Vue常用指令

    一、初始Vue 1、准备一个容器 2、引入vue.js文件 方式(1)引入本地vue.js文件 vue.js文件官...

  • vue的安装

    1、下载独立版本 直接在Vue.js官网下载最新的版本。接着在项目中,引入 即可,开发项目尽量使用完整版,不...

  • vue

    一、vue的使用 直接用 引入开发版本:https://cn.vuejs.org/js/vue.js 二、生命...

  • Vue安装教程

    1:vue安装 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 标签引入。 http://...

  • Vue学习笔记之路由(一)

    Vue.js路由(Vue-router) 1.路由安装 (1)直接引入 (2)npm下载 npm install ...

网友评论

      本文标题:vue项目直接引入vue.js的es6兼容

      本文链接:https://www.haomeiwen.com/subject/rhfdtftx.html