VUE3(七)vue项目抽离.vue文件中的js、css代码

Chase620 等级 400 0 0

平常再做开发的时候,一般情况下不会将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

本文转自 https://www.helloworld.net/redirect?target=https://www.jianshu.com/p/2101e84a7faf,如有侵权,请联系删除。

收藏
评论区