Vue系列之 => webpack結合vue使用

安裝 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>