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

Chase620 等级 883 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,如有侵权,请联系删除。

收藏
评论区

相关推荐

Android webview 与 js(Vue) 交互
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。 本文将对这两种情况分别讲解,H5 端用 vue 实现。 一、前期准备(Vue项目准备) 本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。 项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令
【Electron】electron-vue 借助 element-ui UI 库助力桌面应用开发
前面文章我们讲过 electron 让可以用 HTML、JS、CSS 开发桌面应用程序。而 electronvue 是一个结合了 electron 与 vue 的套件。这样我们就能方便地使用 vue 快速开发桌面应用。但是,vue 只是在 js 这层面做了大量的便捷的操作。对 UI 并未过多涉及。此时如果您在开发过程中自己实现一套统一主题的 UI 视觉效果
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中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
项目中的富文本编辑器该如何选择?
项目中经常需要用到富文本编辑器的时候,而常见的富文本编辑器都有哪些?该如何选择?先看看市面上都有哪些可用的富文本编辑器: (插件式的,支持 Vue,React,Angular 框架) (Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费,支持 JS 直接引入使用,或者 Vue2/3,React) (开源,插件多,功能齐全,支持
127个常用的JS代码片段,每段代码花30秒就能看懂(下)
关注  Vue中文社区 ,回复“ 加群 ” 加入我们一起学习,天天进步 ![](https://oscimg.oschina.net/oscnet/d9b66c0e296e90a7ce0c7f1abedb76aa52b.jpg) 大家好,在前两篇文章里 [127个常用的JS代码片段,每段代码花30秒就能看懂(一)](https://
127个常用的JS代码片段,每段代码花30秒就能看懂(中)
关注  Vue中文社区 ,回复“ 加群 ” 加入我们一起学习,天天进步 ![](https://oscimg.oschina.net/oscnet/f93646b0e4f19182cde0bc0ac433358b8dd.jpg) 大家好,在上一篇文章 [127个常用的JS代码片段,每段代码花30秒就能看懂(上)](htt
JS和CSS加载(渲染)机制不同
一、结论 ==== CSS可以在页面加载完成后随时渲染。举个例子:通过js给某个元素加一个id或者css,只要这个id或者css有对应的样式,此元素的样式就会自动生效。 JS不可以在页面加载完成后生效。最明显的例子就是使用EasyUI的时候,iframe中哪些样式无效(EasyUi是依靠JS进行样式处理的,所以无法运行JS,那么样式也就无法设置。简单点说
Go 1.16 embed特性的简单应用
项目结构如下: └─ui └─embed_ui.go └─dist └─index.html └─static ├─css └─ ... ├─fonts
JTopo + Vue 实现自定义拖拽流程图
JTopo + Vue 实现自定义拖拽流程图 ====================== 市场上做流程图的插件比较多,这里介绍一种基于canvas编写的js插件,结合vue框架做出精美的流程图 首先搭建vue框架,这里就不做介绍,由于jtopo官方demo里用到了jquery,所以我的项目里也引用了jquery插件,鉴于这里用到了很多的dom操作,所
Subime使用笔记(持续跟进)
Subime使用笔记 ---------- ### 常用插件 * Package Control * Emmet * CSS Format * 格式化CSS代码插件 * DocBlockr * 快速添加代码注释插件 * Side Bar * 增强侧边
Vue 3 组件开发:搭建基于SpreadJS的表格编辑系统(环境搭建)
![image.png](https://upload-images.jianshu.io/upload_images/17056223-960fe5cf787f603c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) Vue是一套用于构建用户界面的渐进式框架,与其它大型 JS 框架不同,Vu
uniapp引入vue
首先目录结构是这样的 ![目录](https://oscimg.oschina.net/oscnet/up-c38df71b7be4ebcdafdc248216aa3f69e64.png "目录") > lib文件夹里面存放四个js文件,ch(存放中文语言)、en(存放英文语言)、index(设置语言)、vue-i18n(vue-i18n插件);同时在m