分离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>

巴特西

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

最新文章

热门文章