vue文件，分离样式模块和业务处理模块

最新推荐文章于 2024-01-29 18:12:25 发布

liyoro

最新推荐文章于 2024-01-29 18:12:25 发布

阅读量881

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端 Vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/liyoro/article/details/119581720

场景

1、这只是我的编程习惯，个人喜欢css、js代码独立放一个文件里面
2、写复杂界面的时候，界面、样式、业务代码都放.vue文件里面，代码量很大，几千上万行的，难受，割了吧
3、基于vue cli3项目

方法

挺简单的，就是利用下ES6的import和export

例如mockDataTest.vue文件，在views目录下新建一个mockDataTest目录，目录里新建index.vue（界面主文件）、index.scss（界面样式代码）、index.js（业务js代码），结构如下：

|-- src
    |-- views
        |-- mockDataTest
            |-- index.vue
            |-- index.scss
            |-- index.js

index.vue 基础代码

<!--界面代码-->
<template>
  <div class="mockDataTestView">
    mockDataTestView
  </div>
</template>

<!--这里引入分离的业务js代码-->
<script>
import indexjs from './index.js'
export default {
  ...indexjs,
}
</script>

<!--这里引入分离的界面样式代码-->
<sty