1、创建test1.vue文件
// test1.vue文件
<template>
<div class="test1">
Test1
{{message}} // 调用data数据
<button @click="countNum">{{count}}</button> // 调用js的方法
</div>
</template>
<script src="../pages/test1.js"></script> // 按路径引入js文件
// 按路径单独引入css文件 如果是sass文件或者是less文件。style标签要添加lang="less"/sass
<style scoped lang="less">@import "../pages/test1.less";</style>
2、创建对应的js文件和css文件
// js文件
export default {
name: "Test1",
data() {
return {
message: '我是test1',
count: 0
}
},
methods: {
countNum () {
this.count++
}
}
}
3、创建对应的css/less/sass文件
.test1 {
background: red;
}
效果图如下: