使用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 裡面！