分离vue文件，方便后期维护

参考：

https://www.cnblogs.com/wy120/p/10179901.html

https://blog.csdn.net/sinat_36146776/article/details/89918302

我的习惯是，分离js和css，html写在vue文件中

js：

// -- NAME --

const name = 'record';

// -- DATA --

const data = function () {
  return {

  };
};

// -- COMPUTED --

const computed = {

};

// -- COMPONENTS -- 

const components = {
}

// -- WATCH --

const watch = {

};

// -- METHODS --

const methods = { 

};

// -- HOOKS --

function mounted() {
}

// == EXPORT ==

export default {
  name: name,

  data: data,

  components: components,

  computed: computed,

  watch: watch,

  methods: methods,

  mounted: mounted
};
css：

.block {
    width: 200px;
    height: 220px;
  }
.describe {
    margin-left: 40%;
}
/* .el-row {
    margin-bottom: 20px;
    &:last-child {
    margin-bottom: 0;
    }
} */
.el-col {
    border-radius: 4px;
    margin-left: 38px;
    margin-right: 38px;
    margin-top: 60px;
    margin-bottom: 40px;
}

.box-card {
    width: 250px;
}

css:

.block {
    width: 200px;
    height: 220px;
  }
.describe {
    margin-left: 40%;
}
/* .el-row {
    margin-bottom: 20px;
    &:last-child {
    margin-bottom: 0;
    }
} */
.el-col {
    border-radius: 4px;
    margin-left: 38px;
    margin-right: 38px;
    margin-top: 60px;
    margin-bottom: 40px;
}

.box-card {
    width: 250px;
}

在vue文件中引用：

<script src="./zyview.js"></script>
<style src="./zyview.css" scoped></style>