webpack配置VUE

要使用vue就要安装VUE 安装VUE的话应该是

npm install vue --save
注意 这个地方就不加 -dev 因为生产环境的时候也是需要vue的

//使用vue进行开发
import  Vue from 'vue'
//直接把app里面的代码都放到了 app.js里面
import App from './vue/APP'

const  app = new Vue({
    el:'#app',
    template:'<App/>',
    //往组件里面注册APP
    components:{
        App
    }
})

vue.vue

<template>
    <div><h2>{{message}}</h2>
        <button>按钮</button>
        <h2>{{name}}</h2></div>
</template>

<script>
    export default {
        name: "APP",
        data() {
            return {
                message: 'hello webpack',
                name: 'codewhy'
            }
        }
    }
</script>

<style scoped>

</style>

这样就把app内容提取出来成为了一个.vue文件

template:'<App/>',  这个编译的时候是直接替代el里面的内容

当然是用.vue文件得需要添加loader

npm install vue-loader vue-template-compiler --save-dev

配置文件里面添加
  {
                test:/\.vue$/,
                use:['vue-loader']

            }

总vue-loader 14之后的版本要想使用这个必须要给他配置一个插件

当然也可以不用引入 直接在package.json里面把vue-loader的版本改为13.0.0之后再npm instal就行了
下面引入插件概念