vue项目引入自定义.css的样式文件

时间:2022-10-19 01:07:19

ES6的引入方式:

.vue文件中

css文件引入

<template></template>
<style scoped> @import "../assets/common/common.css";//自定义.css的样式路径 </style>

js文件的引入

在main.js中:
import API from './assets/api/api.config.js'
Vue.prototype.$API = API;

P.S.:传统上,引入css样式的三种方法:
1.使用link来调用外部的css文件

在head放置<link rel="stylesheet" href="wcss.css" type="text/css" />来调用外部的wcss.css文件来实现html引用css文件

vue项目引入自定义.css的样式文件

2.直接在标签使用style,如<div style=''>

3.使用style自带式,如vue项目中的每个XX.vue文件最后都有

<style></style>

https://blog.csdn.net/wojiaomaxiaoqi/article/details/78050501

http://www.divcss5.com/rumen/r56.shtml

vue项目引入自定义.css的样式文件的更多相关文章

  1. vue 项目引入字体报错

    vue 项目引入特殊字体,总是提示有问题 原因是,在webpack 里面的配置有问题 在项目文件里面引入字体的时候,应该写url-loader 而不能是url

  2. vue-cli构建的vue项目打包后css引入的背景图路径不对的问题

    使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...

  3. vue项目 引入js文件

    例如我想将laydate.js引到vue项目中 将用到的js文件放到static文件夹内,在项目的根目录下的index.html内引入 <script src="static/js/l ...

  4. 在vue项目引入阿里巴巴矢量图标

    1.在阿里矢量图标库将想要的图标加入购物车,然后在购物车中将图标添加到项目: 2.到我的项目中,将图标下载到本地 3.在vue项目的assets文件夹下新建一个iconfont文件夹(名字自定义),将 ...

  5. vue项目引入bootstrap、jquery

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  6. vue项目引入element

    前提工作-安装并配置好以下环境: 1.安装node  2.安装git 1.初始化项目 vue init webpack vue-elementui npm run dev 2.安装element np ...

  7. vue项目引入社交分享插件

    vshare 基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点.github地址:https://github. ...

  8. vue项目引入bootstrap正确姿势

    vue如何引入bootstrap 最近在玩全栈,自然少不了vue的使用.使用vue-cli生成的项目想引入bootstrap,需要先安装相应的npm包,然后在代码中显示引入. 1.安装依赖包: cnp ...

  9. Vue项目引入sass

    最近两天手头的事情暂时搞完了,可以抽出空来学习一下东西,之前项目都是鹏哥搭建好了,我们在直接在里面写代码,sass语法用来写样式还是比较方便常用的,今天就来试试怎么引入和配置sass 参考文章:Vue ...

随机推荐

  1. HTML和CSS的复习总结

    HTML(Hypertext Markup Language)超文本标记语言:其核心就是各种标记!<html> HTML页面中的所有内容,都在该标签之内:它主要含<head>和 ...

  2. WPF QuickStart系列之附加属性&lpar;Attached Property&rpar;

    这一篇博客是关于如何使用附加属性和创建自定义附加属性的. 1. 附加属性使用, WPF中对附加属性使用最多的莫过于对控件布局时设置控件的位置,例如在Canvas中有一个Rectangle, Ellip ...

  3. boost 源码编译 的 Makefile&period;am写法备份

    include $(top_srcdir)/common.mk bin_PROGRAMS= lib_LIBRARIES= lib_LTLIBRARIES= lib_LTLIBRARIES+=libSt ...

  4. SQL Server的三种物理连接之Loop Join(一)

    Sql Server有三种物理连接Loop Join,Merge Join,Hash Join, 当表之间连接的时候会选择其中之一,不同的连接产生的性能不同,理解这三种物理连接对性能调优有很大帮助. ...

  5. IIS配置不正确可能导致&OpenCurlyDoubleQuote;远程服务器返回错误&colon; &lpar;404&rpar; 未找到&quot&semi;错误一例。

    今天上传附件出现了下图所示的问题: 查找百度发现http://www.cnblogs.com/chuncn/archive/2009/09/08/1562759.html 文中提的比较靠谱. 但是,设 ...

  6. signal()函数说明

    表头文件#include<signal.h> 功 能:设置某一信号的对应动作 函数原型:void (*signal(int signum,void(* handler)(int)))(in ...

  7. 方法的标签&lowbar;With携带

    方法中参数的标签: 标签的由来:1.标签也是方法名的一部分:2.为了提高程序的阅读性:OC方法允许我们给每个参数添加一个标签来说明当前参数的含义: 标签的作用:标签是为了标识变量的,因此标签名和变量名 ...

  8. HTTP常见状态码

    1.100状态码 1xx:临时响应,表示临时相应并需要请求者继续操作的状态码 100   (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分.   101 ...

  9. 关于java的Synchronized,你可能需要知道这些(下)

    上一篇文章介绍了synchronized的基本使用方法和实现,在实现部分说明了synchronized的底层实现依赖系统互斥锁mutex,但是这个一个重型锁,竞争导致线程阻塞挂起,后续拿到锁后再恢复线 ...

  10. rabbit入门教程

    简介 rabbitmq是一个消息代理系统,为应用提供一个通用得消息发布,接受平台,为应用提供非阻塞的消息系统,方便进行异步处理. 优点 消息的可靠性.持久化消息,消息接受确认,消息重传等可靠机制. 灵 ...