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

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

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

猜你喜欢