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