webpack中vue终极使用方法

在实际开发中，通常index.html文件我们不做过多处理，所以要把el挂载的div中的内容抽离出来，而又不建议将其放入main.js文件中，所以通常新建一个vue文件夹，并创建.vue文件，用于存放组件，每个组件都是独立的

vue文件的loader配置

• 一般.vue文件的前缀要大写
• 当想使用.vue文件时，我们需要在终端利用npm工具下载一个loadernpm install vue-loader vue-template-compiler --save-dev
• 在webpack.config.js文件中进行配置

{
	test: /\.vue$/,
	loader: ['vue-loader'],
}

• 如果终端下载完成且配置完成后，报错，则需要在package.json文件中找到vue-loader的版本信息，将其改为**"^13.0.0",并在终端重新npm install**,目的是更新node_module里的信息
• 改动版本信息的原因是，当 版本信息大于14时，需要在额外配置插件，所以将版本信息改小

在App.vue中，大致的书写模式如下：

<template>
    <div>
        <h2 class="title">{{message}}</h2>
        <button @click="btnclick">按钮</button>
        <h2>{{name}}</h2>
    </div>
</template>

<script>
export default{
    name:'App',
    data(){
        return{
            name:"Bpp",
            message:"你好啊"
        }
    },
    methods:{
       btnclick(){

       } 
    }
}
</script>

<style>  // 可写可不写
.title{
    color:green;
}
</style>

当我们将App.vue文件抽离出来之后，就可以简化main.js中的内容了：

import App from '../vue/App.vue' // 首先需要导入

new Vue({
    el: "#app",
    template:'<App/>',
    components:{
        App
    }
})