安裝 npm i vue -S ，  在html頁面中放一個容器繫結到el上。

修改webpack.config.js ， 在與entry , output節點平級加上 resolve 節點。

  resolve : { alias : { //配置vue被匯入時別名的指向 'vue$':'vue/dist/vue.js' } } 

webpack支援vue單檔案。

安裝 loader  => cnpm i vue-loader vue-template-compiler -D

踩坑注意點： 如果安裝vue-loader版本高於15.0 需要在webpack.config.js配置外掛

const vueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
        plugins : [
        new vueLoaderPlugin()
    ]  
}

-------------------------------

main.js檔案 ， login.vue 檔案內容跟vue的元件一樣，只是拆分出來放單獨檔案裡。

import $ from 'jquery'
import Vue from 'vue'
// import Vue from 'vue/dist/vue'
 

// 匯入login元件，webpack無法打包vue檔案，需要安裝 cnpm i vue-loader vue-template-compiler -D
import login from './components/login.vue'

$(function(){
   
    var vm = new Vue({
        el : '#app',
        data : {
            msg : '111123'
        },
        // render : function(createElements){
        //     return createElements(login)
 

        // }
        // render 簡寫
        render : c => c(login)
        // components : { //components方式不適用於vue單檔案,在vue的run-time模式下會報錯，不建議使用
        //     login : login
        // }
    })
})

export default 和 export  

login.vue

<template>
    <div>
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
// 這是node中向外暴露成員的形式
// 匯入模組 var 名稱 = require('模組識別符號')
// 匯出模組 module.exports = {} 和 exports

// 在es6中，也有規範的形式規定了如果匯入和匯出模組
// es6中匯入模組，使用 import 模組名稱 from '模組識別符號' import '表示路徑'
// 在es6中，使用export default 和 export 向外暴露成員。
export default {
    data(){
        return {
            msg : 'vue模板中的資料'
        }
    },
    methods: {
        show(){
            console.log('呼叫了vue模板中的方法');           
        }
    },
}
// var info = { name : 'az' age : 20}; export default info
// export var title = '標題1'
// export var content = '這是內容'

// 注意:export default 向外暴露的成員，可以使用任意的變數來接收。
// 注意：在一個模組中，export default只允許向外暴露一次。
// 注意：在一個模組中，可以同時使用 export default 和 export 向外暴露成員
// 注意：使用export向外暴露的成員只能使用 {} 的形式來接收，這種形式叫做按需匯出
// 注意：export可以向外暴露多個成員。接收時變數必須要統一。
// 例 import {title , content} from './test.js'
// 另一種寫法 import { title as t , content as a} from './test.js' 可以直接使用t 和 a
</script>