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