vue 分离html 、js 、css代码
vue角首架组件 默认是将 html 、js 、css 堆在一个页面的,这样代码一旦多了,很不好维护,
所以将js 、css代码 代码进行分离
默认
<template> html代码 </template> <script> js代码 </script> <style> csscss代码 </style>
分离js、css
<script src="../assets/skin/test.js"></script> <style src="../assets/skin/test.css" scoped></style>
全部分离
<template src="./record.html"></template> <script src="./record.js"></script> <style src="./record.scss"></style>
demo
html文件
<template> <div class="hello"> 11111111 </div> </template> <!-- Add "scoped" attribute to limit CSS to this component only --> <script src="../assets/skin/test.js"></script> <style src="../assets/skin/test.css"></style>
css文件
.hello{ color:red; font-size:25px; }
js 文件
import $ from 'jquery' export default { name: 'Test', data () { return { msg: 'Welcome to Your Vue.js App' } }, created() { $('.loading').show(); alert(111); }, }
注意,分离后,之前 import 路径是否正确