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