平常再做开发的时候，一般情况下不会将html，js，css代码写到一个文件中。
基本上都会写在各自对应的文件中，然后再引入即可。
那么在VUE中我们如何抽离vue文件中的js，与css代码呢？
1：抽离javascript
Home.vue
<template> <div> <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }"> <h1>This is a home page</h1> <HelloWorld msg="Hello Vue 3.0 + Vite" /> </div> </div> </template> <script lang="ts"> import { defineComponent } from "vue"; // 引入js文件 import home from '/@/assets/js/admin/home'; // 使用js对象 export default defineComponent({ ...home, }); </script>
Home.ts
import { defineComponent } from "vue"; import HelloWorld from "/@/components/HelloWorld.vue"; export default defineComponent({ name: "Home", components: { HelloWorld, }, });
2：抽离css
Admin.vue
<template> <div id=”app”> <h1>This is a setting page</h1> <p>store count is: {{ count }}</p> </div> </template> <style lang="scss" scoped> @import "../../assets/css/components/pc/Admin.scss"; </style> Admin.scss #app { font-family: "Microsoft YaHei,微软雅黑,Arial,sans-serif,Helvetica Neue,Helvetica,Pingfang SC,Hiragino Sans GB"; .ant-layout-sider { .ant-layout-sider-children .ant-row-flex { border-bottom: 1px solid rgb(240, 240, 240); } .ant-layout-sider-trigger { border-top: 1px solid rgb(240, 240, 240); } } }
看到这里，你可能有疑问，为什么我能能在script标签中使用import标签引入scss呢？
具体请参照《Vite对TypeScript、CSS和JSON的支持》
以上就是抽离css，及js代码的示例。
