使用Vue遇到的问题

1.[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

原因：

vue有两种形式的代码 compiler（模板）模式和runtime模式（运行时），vue模块的package.json的main字段默认为runtime模式， 指向了"dist/vue.runtime.common.js"位置。

这是vue升级到2.0之后就有的特点。

在原本的webpack配置文件里有个别名配置：

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js' //内部为正则表达式  vue结尾的
    }
}      

View Code

解决方法：

①在vue.config.js文件里加上webpack的如下配置即可

configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js' 
      }
    }
}      

②引用vue时，直接写成如下即可

import Vue from 'vue/dist/vue.esm.js'      

2.Cannot set property 'render' of undefined

 原因：

本项目中由new vue了，需要改为用export default {}

将new vue写法换成export default

补充：

至于我的项目无法使用new vue是因为在main.js中有引入了app.vue，所以必须要使用export default形式暴露出去的。一个vue-cli项目只能有一个new Vue()实例，也就是main.js中创建的，其他的组件vue就得用export default，再通过将组件vue引入app.vue中就可以实现各种功能了。

关于$mount：

$mount()手动挂载

当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；

假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载。

关于render：

createElement 函数是用来生成 HTML DOM 元素的，也就是上文中的 generate HTML structures，也就是 Hyperscript，这样作者才把 createElement 简写成 h。

3.option "el" can only be used during instance creation with the `new` keyword.

原因:

在使用export就不能在定义el:来指向<template>中的顶层id,el指向指向<template>中的顶层id只能是在var vm = new Vue里面

不能在export default 里面！