vue中如何分离css

vue中分离css的方法:首先在vue文件中设置“”;然后新建index.js文件;最后建立相对应的html、js和css文件即可。

vue中如何分离css

本教程操作环境:windows7系统、Vue2.9.6版,该方法适用于所有品牌电脑。

相关文章推荐:vue.js

在正常的创建和引用vue文件都是html、css、js三者在一起的,这样写起来虽然方便了,但是页面比较大或者代码比较多的情况下,即使使用组件有时代码也比较多,简单来说查找不变不利于编程,大的来说影像优化性能。将代码中的html、css、js分离出来是个很好的选择。

首先,在 .vue文件中设置如下:

立即学习“前端免费学习笔记(深入)”;


登录后复制

新建index.js文件,如下:

import record from './record.vue';export default record;

登录后复制

建立相对应的record.html、record.js、record.scss的文件,就可以了,拿.js来说:

// -- NAME --const name = 'record';// -- DATA --const data = function () {  return {      };};// -- COMPUTED --const computed = { };// -- COMPONENTS -- const components = {}// -- WATCH --const watch = {  };// -- METHODS --const methods = {   };// -- HOOKS --function mounted() {}// == EXPORT ==export default {  name: name,  data: data,  components: components,  computed: computed,  watch: watch,  methods: methods,  mounted: mounted};

登录后复制

另一种方法可以直接引用:

  
html

登录后复制

形式多样,但根本思想都是分离独立文件,引入加载

以上就是vue中如何分离css的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3021029.html

(0)
上一篇 2025年3月13日 05:41:56
下一篇 2025年3月1日 11:20:06

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • .vue文件乱码怎么解决

    vue文件乱码的解决办法:1、设置使用utf8格式打开和保存文件;2、依次打开“文件->首选项->设置”,然后搜索“encode”并设置“utf-8”即可。 本教程操作环境:windows7系统、vue2.0&&…

    2025年3月13日
    200
  • 如何解决vue $index报错问题

    vue $index报错是因为vue已经移除了原来的$index和$key用法,变成了index和key,其解决办法就是修改$index和$key为index和key即可。 本教程操作环境:windows7系统、Vue.js v2.5.16…

    2025年3月13日
    200
  • vue使用import()提示语法错误怎么办

    vue使用import()提示语法错误的解决办法:首先在package json的【”devDependencies”】下增加【”babel-plugin-syntax-dynamic…】;然…

    2025年3月13日 编程技术
    200
  • 单独引入vue.js文件怎么写组件

    单独引入vue.js文件写组件的方法:首先引入vue.js文件;然后使用“Vue.component”方法创建一个card组件;最后使父页面调用该组件即可。 本教程操作环境:windows7系统、vue2.5.17版本,Dell G3电脑。…

    2025年3月13日
    200
  • 如何解决vue $refs报错问题

    vue $refs报错的解决办法:1、打开相应的代码文件,然后加上“this.$nextTick();”;2、在mounted()钩子函数中调用即可。 本教程操作环境:windows7系统、vue2.5.17版,DELL G3电脑。 【相关…

    2025年3月13日
    200
  • 如何解决vue文件里使用背景报错问题

    vue文件里使用背景报错的解决办法:1、在webpack.prod.conf.js文件中output里添加“publicPath:’./’”;2、在utils.js文件里添加“publicPath:’..…

    2025年3月13日 编程技术
    200
  • 什么是 vue

    vue是Vue.js的简称,是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架;vue所关注的核心是MVC模式中的视图层,同时它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。 …

    2025年3月13日
    200
  • 如何解决vue中layui报错问题

    vue中layui报错的解决办法:首先把layui文件放在static文件下;然后在html文件中用link和script标签的方式引入layui即可在vue中正常使用layui。 本教程操作环境:windows7系统、vue2.0版,DE…

    2025年3月13日
    200
  • .vue文件可以写注释吗

    vue文件可以写注释;在每个代码块内,注释的时候,需要使用各自语言的注释语法去注释;比如在文件最顶部注释的时候用HTML的注释语法“”即可。 本教程操作环境:windows7系统、vue2.0版,DELL G3电脑。 【相关文章推荐:vue…

    2025年3月13日
    200
  • vue.use中发生了什么

    vue.use为注册全局插件所用,接收函数或者一个包含install属性的对象为参数;如果参数带有install就执行install,如果没有就直接将参数当install执行;并且第一个参数始终为vue对象,注册过的插件不会重新注册。 本教…

    2025年3月13日
    200

发表回复

登录后才能评论