VUE3（七）vue項目抽離.vue文件中的js、css代碼

平常再做開發的時候，一般情況下不會將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代碼的示例。

有好的建議，請在下方輸入你的評論。

歡迎訪問個人博客
https://guanchao.site

歡迎訪問小程序：