在实际开发中,通常index.html文件我们不做过多处理,所以要把el挂载的div中的内容抽离出来,而又不建议将其放入main.js文件中,所以通常新建一个vue文件夹,并创建.vue文件,用于存放组件,每个组件都是独立的
vue文件的loader配置
- 一般.vue文件的前缀要大写
- 当想使用.vue文件时,我们需要在终端利用npm工具下载一个loader
npm 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
}
})