引入方式很简单,就是在script下使用require()即可。 因为import 是import。。。from 的形式,所以是不需要的。

  1. <script>
  2. import {mapState, mapMutations} from "vuex"
  3. import DetailItem from "@components/detail"
  4. require('../assets/css/swiper-3.4.1.min.css')
  5.  
  6. export default {
  7. components: {
  8. DetailItem

  这样的好处在于只在这一个组件中使用,那么就在这一个组件中加载 。

  如果不用这种方式,我们也可以使用在index.html中加载cdn的方式,但是这种方式的缺点是很明显的,在进入首页时,我们并不需要他,但是却阻塞了页面的加载,影响性能。

如何在vue && webpack 项目中的单文件组件中引入css的更多相关文章

  1. vue中的单文件组件

    之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为 ...

  2. 在单文件组件中,引入安装模块里的css的2种方式:script中引入、style中引入

    在单文件组件中,引入安装模块里的css的2种方式:script中引入.style中引入 1.script中引入 <script> import 'bulma/css/bulma.css' ...

  3. vue 单文件组件中样式加载

    在写单文件组件时,一般都是把标签.脚本.样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去. 采用import加载样式 在局部作用域(scoped)采用@import加载进来的样式文件 ...

  4. vue生命周期及使用 && 单文件组件下的生命周期

    生命周期钩子 这篇文章主要记录与生命周期相关的问题. 之前,我们讲到过生命周期,如下所示: 根据图示我们很容易理解vue的生命周期: js执行到new Vue() 后,即进入vue的beforeCre ...

  5. Vue中创建单文件组件 注册组件 以及组件的使用

    <template> <div id="app"> <v-home></v-home> <hr > <br> ...

  6. Vue知识整理16:单文件组件

    过程较为复杂,这里直接写出视频地址,可以直接查看 https://learning.dcloud.io/#/?vid=14

  7. webpack打包vue单文件组件

    一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...

  8. 【原】vue单文件组件互相通讯

    在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...

  9. vue单文件组件互相通讯

    在vue中,我们可以把一个页面各个部分单独封装起来,做成各种小组件,然后加载,这样的好处是代码维护起来比较容易,重复的代码多处调用! 在一个vue项目中,单文件组件以.vue形式文件命名 每个组件之间 ...

随机推荐

  1. [转]android中最好的瀑布流控件PinterestLikeAdapterView

    PinterestLikeAdapterView 项目地址:https://github.com/GDG-Korea/PinterestLikeAdapterView 使用方法类似于ListView下 ...

  2. C# 属性与字段

    属性和字段的区别: 属性是逻辑字段,是字段的扩展,并不占用实际的内存:而字段占用内存空间. 属性可以被其他类访问:而非public的字段不能被直接访问. 属性可以对接受的数据在范围上做限定:而字段不能 ...

  3. git you need to resolve your current index first 解决办法

    当使用git checkout 切换分支时会提示you need to resolve your current index first,使用如下命令即可解决. $ git reset --merge

  4. 20165219第4次实验《Android程序设计》实验报告

    20165219第4次实验<Android程序设计>实验报告 一.实验内容及步骤 (一)Android Stuidio的安装Hello world测试 要求 参考http://www.cn ...

  5. 移动端头部适配 meta基础知识

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  6. 并不能来一发50AC

    本来想来一发50AC嗨一下 然后发现只有40+ 算了放弃了..

  7. luoguP2982 [USACO10FEB]慢下来Slowing down

    https://www.luogu.org/problemnew/show/P2982 这题你写个树剖当然可以做,但是我们还有一种更简单的方法,使用 dfs 序 + 树状数组即可 考虑一只牛到了自己的 ...

  8. Git 合并两个不同的仓库

    目录 第一步. 下载需要合并的分支 第二步. 添加需要合并远程仓库 第三步. 把base远程仓库中数据抓取到本仓库 第四步. checkount切换到base分支上,命名为 asf 第五步. 合并 总 ...

  9. [转][Unity3D]引擎崩溃、异常、警告、BUG与提示总结及解决方法

    1.U3D经常莫名奇妙崩溃.   一般是由于空异常造成的,多多检查自己的引用是否空指针.   2.编码切换警告提示.   警告提示:Some are Mac OS X (UNIX) and some ...

  10. Nuclear Power Plant ZOJ - 3840 树形dp

    There are N (1 ≤ N ≤ 105) cities on land, and there are N - 1 wires connecting the cities. Therefore ...