如何将 css 从 vue 中分离

已于 2024-03-30 11:25:48 修改
阅读量375 收藏 1
点赞数 6
文章标签： css vue.js 前端
于 2024-03-30 09:10:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sjy8593457/article/details/137163702
版权

当我们在书写 vue 的 CSS 文件时，常常会出现这样的尴尬情况.
在这里插入图片描述
每次当要修改 css 布局和样式时，老是要一直往下翻，这样十分的麻烦。这时候我们会想，如何将 HTML 和 js 的核心代码放在 vue 文件中，而将 CSS 代码单独分离出去呢。

这里我们以 less 语法举例。
新建一个文件夹，存放 vue 文件和 LES 文件。
在这里插入图片描述

将样式内容内容书写在 less 文件中
在这里插入图片描述

然后导入到 vue 文件中, @import './test.less'; (后面分号一定要加)
在这里插入图片描述

这样我们就可以实现分屏书写了, 不用一直在翻动屏幕，影响我们打代码的思路
在这里插入图片描述

觉得有用的话, 就给博主点个赞吧

帅气的小苏
关注
  • 6
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 实现 js css html分离
weixin_43966635的博客
10-19 1545
方法一 分别创建 index.js, index.css index.vue 代码 <template> .... </template> <script> //index.js 的相对路径 import index from "./index.js";// 名字可以任取 export default index; </script> <style scoped> //index.css 的相对路径 @import "./index.cs
vue中CSS与JS代码分离
偷得浮生半日闲
03-16 1805
前言 一个vue页面有着 HTML、CSS和JS代码，看起来代码过多，不好管理，所以就需要分开写CSS和JS 教程 在 assets 下创建 css 和 js 文件夹，在页面中引入 <script src="@/assets/js/home.js"/> <style lang="less" src="@/assets/css/home.less"/> 或者 <script src="../assets/js/home.js"/> <style lang="
vue将js和css单独拆分出来
Hero_rong的博客
11-06 9936
这里用的是vue-element-admin框架 一 新建一个文件夹webManage ，里面放css和js文件夹 二 拆分把需要拆分的文件直接剪切到对应的文件夹里就可以了 三 在vue页面上调用对应的 js和css <script> import login from "../../webManage/js/login/logi...
Vue2之页面 、js 、css分离
weixin_30593443的博客
04-14 909
在编写vue的时候，页面数据少的时候，可以将所有的js和css都可以直接写在页面上，但是页面数据多，js、css的方法和样式多的时候，都放在一个页面的时候，就显得页面vue十分的臃肿。 所以写项目的时候，还是将其分离会比较合适，这样别的页面也可以引用该方法和样式。 直接上代码： 页面引用js（TestJs.js）和css（Test.css） <script> ...
vue中html、css、js 分离
weixin_30762087的博客
12-26 727
在正常的创建和引用vue文件都是html、css、js三者在一起的，这样写起来虽然方便了，但是页面比较大或者代码比较多的情况下，即使使用组件有时代码也比较多，简单来说查找不变不利于编程，大的来说影像优化性能。将代码中的html、css、js分离出来是个很好的选择。 首先，在 .vue文件中设置如下： <template src="./record.html"></temp...
详解Vue CLI3配置解析之css.extract
10-18
`css.extract` 配置选项决定了是否将 CSS 从 JavaScript 文件中提取出来，生成独立的 CSS 文件。默认情况下，当环境变量 `NODE_ENV` 设置为 `'production'` 时，即在生产环境中，Vue CLI3 会自动将 CSS 提取出来。...
基于vue前后端分离手机销售商城系统
最新发布
11-07
在这个基于Vue.js的前后端分离手机销售商城系统中，我们将深入探讨其核心技术和实现方式。 一、Vue.js 框架 Vue.js 提供了声明式的数据绑定和组件系统，使得开发者可以轻松地构建用户界面。它的核心特性包括虚拟DOM...
springboot+vue前后端分离开发项目源码
01-02
在现代Web应用开发中，"SpringBoot+Vue"是一个非常流行的组合，用于构建高效、可扩展的前后端分离项目。SpringBoot是Java生态系统中的一个框架，主要用于简化Spring应用的初始搭建以及开发过程，而Vue.js则是一个轻...
vue中配置mint-ui报css错误问题的解决方法
11-28
在Vue.js项目中，尤其是基于Vue 2.0的项目，使用第三方库如Mint-UI时，可能会遇到CSS加载的问题。这个问题通常出现在尝试引入Mint-UI时，尽管已经配置了`css-loader`和`style-loader`，并且在`webpack.config.js`中...
SpringBoot+Vue前后端分离项目
03-28
【SpringBoot+Vue前后端分离项目】是一种现代Web应用程序开发的常见架构模式，它将后端业务逻辑与前端用户界面相分离，提高了开发效率和应用性能。在这个项目中，SpringBoot作为后端框架，Vue.js作为前端框架，两者...
webpack打包vue时提取css
hbnight的专栏
05-04 8009
webpack打包vue项目的时候默认会把vue里的css打包到页面上。 webpack.config.js里的plugins加上以下配置 new webpack.LoaderOptionsPlugin({ test:/\.vue$/, options: { vue: { loaders: {
webpack + vue之抽离css方法
m0_38073829的博客
05-16 7737
大部分使用过webpack的朋友都知道，抽离css需要使用到webpack的插件extract-text-webpack-plugin，vue也不例外。官方给的vue-loader的文档里面有这样的描述 module: { rules: [ { //处理js中引入的css test: /\.css$/,
Vue文件拆分css文件，js文件，html文件；Vue文件单独引入js，css文件
Sunny_lxm的博客
01-31 1698
Vue文件拆分css文件，js文件，html文件；Vue文件单独引入js，css文件
vue项目单独剥离css文件并在项目中进行引入
rainbowyx的博客
03-11 1502
【1】自己项目中的css文件 1)新建一个css文件，把所有的css都写到里面。注意里面不用写<style></style> 2)在需要引入vue里面的<script></script>里面写入引入路径即可
初识 Webpack (四) 解析stylus文件，将css内容单独分离（loader和plugs配置）
Sicily_winner的博客
01-27 1236
目录 ✦ 前言 ✦ 文章 ➬ 文档 ➬ 遇到的问题 ➬ 配置和实战 ✦本章节学习内容 ✔ 基本代码和目录结构 ➊模块安装 ➋ 添加html-webpack-plugin打包 ➌添加extract-text-webpack-plugin打包 ✦ 整体代码 ✦ 总结 ✦ 前言 普通webpack的打包css被打包到了js文件中，以字符串的形式存在，并且整...
webpack + vue之抽离style样式css方法
追梦猪的博客
05-21 1526
大部分使用过webpack的朋友都知道，抽离css需要使用到webpack的插件extract-text-webpack-plugin，vue也不例外。官方给的vue-loader的文档里面有这样的描述不要在style上添加scss或者less，否则你要去配置他们的抽离我们现在抽离....
vue 动态引入和移除第三方js 和 css文件
qq_37656005的博客
04-13 2236
vue 动态引入和移除第三方js 和 css文件 页面中经常会引入第三方库的情况，有些组件有vue版本，直接安装依赖引入就可以，但是有一些组件不支持vue，就需要单独在页面中引入js和css，如果直接全局在index.html中引入会造成资源浪费，下面是使用Vue3语言讲解如何局部引入和移除的代码示例：
vue.config.js基本配置，包括配置不打包的模块vue,elementui，通过cdn引入，提取css到单独的css文件，css、js添加hash值，修改端口号，配置跨域代理
艾小逗
02-24 2162
vue.config.js基本配置，包括配置不打包的模块vue,elementui，通过cdn引入，提取css到单独的css文件，css、js添加hash值，修改端口号，配置跨域代理 配置文件vue.config.js // 配置通过CDN引入的js/css const cdn = { externals: { 'vue': 'Vue', 'element-ui': 'ELEMENT' }, js: [ 'https://cdn.bootcss.com/vue/2.5.2
css js写在一起 vue_Vue模板、JS、CSS分离实现
06-10
在Vue项目中，我们通常会将模板、JS、CSS分离开来，这样可以更好地管理代码，并且方便维护和修改。下面是一个简单的示例： 1. 分离模板 在Vue中，我们通常使用单文件组件（.vue文件）来管理模板、JS和CSS。在单文件组件中，我们可以使用template标签来定义模板，如下所示： ``` <template> <div> <h1>{{ title }}</h1> <p>{{ content }}</p> </div> </template> ``` 2. 分离JS 在单文件组件中，我们可以使用<script>标签来定义JS代码，如下所示： ``` <script> export default { data() { return { title: 'Hello World', content: 'This is a demo.' } } } </script> ``` 3. 分离CSS 在单文件组件中，我们可以使用<style>标签来定义CSS样式，如下所示： ``` <style scoped> h1 { font-size: 24px; color: red; } p { font-size: 16px; color: #333; } </style> ``` 注意，这里的scoped属性表示该CSS样式只作用于当前组件内部。 以上就是在Vue中分离模板、JS和CSS的简单示例。当然，在实际项目中，我们还需要使用Webpack等工具来打包和管理代码。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值