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

简介: 平常再做开发的时候,一般情况下不会将html,js,css代码写到一个文件中。基本上都会写在各自对应的文件中,然后再引入即可。

QQ图片20220423163639.jpg

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



目录
相关文章
|
11天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
26 3
|
11天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
22 3
|
6天前
|
前端开发 文件存储 Python
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
11 1
|
12天前
|
监控 JavaScript 前端开发
如何在现有的 JavaScript 项目中渐进式地采用 TypeScript
【6月更文挑战第13天】TypeScript,JavaScript的超集,引入静态类型和更多特性,提升代码安全性和可读性。在JavaScript项目中渐进式采用TypeScript可从新模块开始,逐步转换代码,编写.d.ts文件支持第三方库,配置编译选项,并编写测试用例。通过监控和评估,改善项目质量和效率。大型项目尤其受益于TypeScript的类型安全、社区支持和工具兼容性。
26 3
|
5天前
|
JavaScript 前端开发 Java
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ&插件项目
|
6天前
|
XML 数据采集 前端开发
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
|
JavaScript Java 物联网
现有vue项目seo优化
现有vue项目seo优化
|
JavaScript 前端开发
重读vue电商网站45之项目优化上线
重读vue电商网站45之项目优化上线
103 0
重读vue电商网站45之项目优化上线
|
4天前
|
前端开发 JavaScript
Vue底层实现原理总结
Vue底层实现原理总结
|
9天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
70 7
使用 Vue CLI 脚手架生成 Vue 项目