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

Chase620 等级 574 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.jianshu.com/p/2101e84a7faf,如有侵权,请联系删除。

收藏
评论区

相关推荐

教你用200行代码写一个爱豆拼拼乐H5小游戏(附源码)
前言 本文将带大家一步步实现一个H5拼图小游戏,考虑到H5游戏的轻量级和代码体积,我没有使用react或vue这些框架,而采用我自己写的dom库和原生javascript来实现业务功能,具体库代码可见我的文章如何用不到200行代码写一款属于自己的js类库(https://juejin.im/post/6844903880707293198),构建工具我采
前端高效开发必备的 js 库梳理
前端高效开发必备的 js 库梳理 之前有很多人问学好前端需要学习哪些 js 库, 主流框架应该学 vue 还是 react ? 针对这些问题, 笔者来说说自己的看法和学习总结. 首先我觉得在学习任何知识之前必须要有一个明确的学习目标, 知道自己为什么要学它, 而不是看网上说的一股脑的给你灌输各种知识, 让你学习各种库, 从而不断的制造大家的焦虑感.
2. web前端开发分享-css,js进阶篇
2. web前端开发分享css,js进阶篇 一,css进阶篇:   等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后
Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。 本文将对这两种情况分别讲解,H5 端用 vue 实现。 一、前期准备(Vue项目准备) 本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。 项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令
js + css实现点击 波纹效果
有时候我们为了增加用户体验,可能会有一些点击样式 类似框架中的haverclass 这里简单用 jscss 实现一个点击效果(类似水波纹) 大体思路 1.获取点击时 鼠标坐标(相对于父元素) 2.在当前点 创建 节点(设置对应的样式) 3.设置定时器,移除节点Ok js dom <div class"box" <button
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。 5.1. Vue实例初始
VUE3(七)vue项目抽离.vue文件中的js、css代码
平常再做开发的时候,一般情况下不会将html,js,css代码写到一个文件中。基本上都会写在各自对应的文件中,然后再引入即可。那么在VUE中我们如何抽离vue文件中的js,与css代码呢? 1:抽离javascriptHome.vue<template <div <div :style"{ padding: '24px', back
Vue进阶(幺陆柒):Vue项目调试技能
前言在Vue项目开发过程中,当你遇到应用逻辑出现错误,但又无法准确定位的时候,知晓Vue项目调试技巧至关重要。同后台项目开发一样,可以在JS实现的应用逻辑中设置断点,并进行单步、进入方法内、跳出方法等调试,从而准确定位问题根源
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
Fower: 一个可在 Vue 和 React 方便使用的 CSS in JS 库
一年多没写过文章了,今天给大家介绍一个我断断续续花了半年开发的 CSS 项目: . Fower 是什么?Fower 是一个让你高效开发 UI 的样式工具库,目标是让你写 CSS 不再痛苦。Fower 的核心特点是原子化(Atomic/utilityfirst)、类型安全(Type Safe)、CSS in JS,它非常注重开发体验,让你快速且开心的开发界面。
uni-app/vue 引入 Animate.css (好看且实用的动画库)
开发一个程序的时候,我们总想着程序能有各种各样的组件效果比如弹跳的球等等,像ppt动画那样的效果整合了Animate.css我们程序的逼格会高很多的,相信我Animate.css官网 这个网站也是整合了Animate.css 引入执行 npm install animate.css save在main.js中import 'animate.css'; 如何使
天哪!几行js代码就可以实现拳皇小游戏
前言今天,我们用原生JS实现一个拳皇人物位置控制的小效果。话不多说,我们赶紧来看下如何实现吧!效果(非静止八神)分别按W、S、A、D键可实现位置移动,并且效果真实。源码html与css很简单,主要是js中有几点需要注意的。<!DOCTYPE html <html lang"en" <head  <meta charset"UTF8"  <title游
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择?先看看市面上都有哪些可用的富文本编辑器: (插件式的,支持 Vue,React,Angular 框架) (Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费,支持 JS 直接引入使用,或者 Vue2/3,React) (开源,插件多,功能齐全,支持