在具體使用的過程中，又碰到了些許問題

1. 利用 template 編譯時會整體覆蓋 el 所標識的div構造器，建立 vue 元件代替 js 檔案，（開發標準）

main.js
import Vue from 'vue'
import App from './vue/App.vue'
const app = new Vue({
    el: '#app',　　
    template:'<App/>',
    components: {
        App
     }
})

App.vue

 <template>     <div>         <h2>         {{message}}         </h2>         <Cpn></Cpn>     </div>  </template>
 <script>  import Cpn from './Cpn.vue'　　#巢狀元件匯入  export default {     name:"App",     components:{         Cpn　　#可巢狀元件     },     data(){         return {message:'123'         }     }  }  </script>  <style>...<style>

 

2. 但 webpack 不能直接編譯，需 vue-loader 與 vue-template-compiler 外掛, 對應npm安裝命令

npm install vue-loder vue-template-compiler --save-dev #開始時依賴

webpack.config.js 配置使用：
module:{
    rules:[
      {
        test: /\.vue$/,
        use: ['vue-loader']
      }
    ]
}

 

3. 再報錯就是 vue-loder 的版本問題了可在 package.json 中檢視其版本

錯誤1：需要另外安裝外掛才能執行vue-loder，根據提示上網搜安裝即可

不想安裝->

解決方法：package.json 修改 vue-loader 版本為 ^13.0.0   ，執行 npm install　　#注：package.json修改後要重新 npm install

錯誤2：執行後還有問題就是vue版本與 vue-template-compiler 版本不匹配，對此我們可以指定兩者版本後重新install

成功後的package.json程式碼 
----------------------
"devDependencies": {
    "vue-loader": "^13.0.0",
    
 
"vue-template-compiler": "^2.5.16",
    "webpack": "^3.6.0"
  },

  "dependencies": {
    "vue": "^2.6.12"
  }
----------------------

成功之後再npm run build 一下你就可以開始你的 .vue檔案 export default{ } 高效開發了

 

標註：npm run build 為自定義命令，設定請找度娘，很簡單的

拓展：webpack.config.js 配置項

resolve: {
    alias: {
      'vue$':'vue/dist/vue.esm.js'    #解決你的runtime-only 與runtime-template-compiler問題
    },
    extensions: ['.js','.vue','.css']    #新增後路徑可不填字尾
}