亲宝软件园·资讯

展开

vue文件中css js代码

liyoro2 人气:0

场景

方法

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

例如mockDataTest.vue文件,在views目录下新建一个mockDataTest</font>目录,目录里新建**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>

<!--这里引入分离的界面样式代码-->
<style lang="scss" scoped>
@import './index.scss';
</style>

index.scss 基础代码

.mockDataTestView {
    padding: 10px;
}

index.js 基础代码

export default {
  name: 'mockDataTestView',
  data() {
    return {

    }
  },
  mounted() {
  },
  created() {},
  methods: {
  },
  watch: {
  }
}

纯粹为了让一个文件里面代码量尽量少而已,便于阅读、编辑

拓展

上述是针对vue2、js、scss的方式,vue3、typescript也是可以的

代码

没什么好看的,上面的够了。

代码,参考 views 里面的 mockDataTest

总结

加载全部内容

相关教程
猜你喜欢
用户评论