vue文件template ,script, style 多文件写法小记

蜡台2026-03-17 12:53

当页面需求大代码量过多时，*.vue文件中包含很多的html，JS ，css 代码，对于后续的代码的维护管理非常的不便，这个时候就有必要把JS ，Template ,CSS 分开写，像微信小程序一样，这里记录几种方式减少上述情况存在，优化代码质量。

一、直接导入js文件并进行解构

复制代码

// sample.js文件
export default {
  data() {},
  methods: {}
}

//sample.vue 文件
import sample from './sample'

<script>
    export default {
        ...sample
    }
</script>

二、使用 src 引入

复制代码

// 这种方式模板文件无法定位到指定 变量属性
<template src="./template.html"></template>

// js
<script src="./script.js"></script>

//css
<style src="./style.css"></style>

三、使用Mixins

复制代码

// sample.js文件
export default {
  data() {},
  methods: {}
}


//sample.vue 文件
import sample from './sample'

<script>
    export default {
        mixins:[sample]
    }
</script>

四、使用组件

复制代码

// 组件1.vue
<template>
    <div>组件1</div>
</templtae>
<script>
    ...
</script>



// 组件2.vue
<template>
  <div>组件2</div>
</templtae>
<script>
    ...
</script>


// 使用者
<template>
    <组件1>1</组件1>
    <组件2>2</组件2>
    <!-- 或是 
    <components />
    -->
</templtae>
<script>
    import  组件1 from "./组件1"
     import  组件2 from "./组件2"
    export default{
        components:{
           组件1,
           组件2  
        }    
    }
</script>

✌如果本文对您有帮助，请您点个赞加个关注呗！✌(>‿◠)