Vue文件拆分css文件，js文件，html文件；Vue文件单独引入js，css文件

62 阅读 0 评论 41 点赞

我是靠谱客的博主疯狂火，最近开发中收集的这篇文章主要介绍Vue文件拆分css文件，js文件，html文件；Vue文件单独引入js，css文件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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文件