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

张开发
• 2026/5/13 12:50:11 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

vue文件template ,script, style 多文件写法小记
当页面需求大代码量过多时*.vue文件中包含很多的htmlJS 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 组件11/组件1 组件22/组件2 !-- 或是 components / -- /templtae script import 组件1 from ./组件1 import 组件2 from ./组件2 export default{ components:{ 组件1, 组件2 } } /script✌如果本文对您有帮助请您点个赞加个关注呗✌(‿◠)

更多文章