vue的js html和css可以分开写吗

Question

代码太多了，应该怎么分开引入，小白求解

Answer 1

//index.vue

<script> 

import template from './index.html'

export default {

  template

}

</script>

<style  scoped> 

@import './index.css';

</style>

//index.html

<input type="text" class="input">

//index.css

.input {

  width: 100%;

  padding: 8px 10px;

  border: 1px solid blue;

}

Answer 2

<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>