众所周知,我们写vue项目的时候都会创建很多个文件,尤其是一些中大型项目,会有很深的文件夹,当你去引入的时候,要写很长的路径比如我要引入一个css文件,

必须得  import  '../../../styles/iconfont.css'  ,文件放的越深,路径就越长,所以我来说一个小技巧。

  当我们刚开始创建好vue项目的时候看到一些文件引入的前面有一个@符号,这个符号的意义是什么呢?

  我们打开build文件下的webpack.base.conf.js,用Ctrl+f搜索@,找到之后你会看到  '@': resolve('src'),这个@就是自定义的别名,保存的是src路径,所以@就是src路径,

看到这里,小伙伴们应该知道接下来这么做了吧,'自定义别名' : resolve('你经常引用的路径'),  就以我的路径为例子,我创建的别名是styles,所以我要引入iconfont.css

就得这么写,import 'styles/iconfont.css',然后再从新启动项目,记得,一定要重新启动项目,不然会报错的!!!!!!!!!

  

vue小技巧之偷懒的文件路径——减少不必要的代码的更多相关文章

  1. Mac 苹果OS X小技巧:如何更改文件的默认打开方式

    OS X小技巧:如何更改文件的默认打开方式 1.command + i 打开简介 2.选择合适的软件打开方式 3.选择全部更改 如图: 转自:http://digi.tech.qq.com/a/201 ...

  2. 10个小技巧助您写出高性能的ASP.NET Core代码

    今天这篇文章我们来聊一聊如何提升并优化ASP.NET Core应用程序的性能,本文的大部分内容来自翻译,当然中间穿插着自己的理解,希望对大家有所帮助!话不多说开始今天的主题吧! 我们都知道性能是公共网 ...

  3. Vue小技巧,如何导入普通JS文件

    最近在开发一个展示3D模型的WEB程序,在工程中使用了VUE和ThreeJS库.Three.js本身是支持CommonJS的,但我们还用到了OBJLoader模块,此模块不支持CommonJS,改成C ...

  4. Vue小技巧-懒加载

    Vue懒加载包括图片懒加载与路由懒加载 1.图片懒加载: 首先安装 vue-lazyload包 然后导入并加载事先下载好的加载图片 import VueLazyLoad from 'vue-lazyl ...

  5. Cadence Allegro小技巧之指定Gerber生成路径

    Allegro生成Gerber数据时,默认会保存在与pcb文件相同目录路径下,Gerber数据本身就会生成好几个文件,然后与pcb文件,log文件,临时文件等混杂在一起,不易整理打包Gerber数据, ...

  6. 教你一个vue小技巧,一般人我不说的

    本文由云+社区发表 1. 需求 最近的项目中,需要实现在vue框架中动态渲染带提示框的单选/多选文本框,具体的效果如下图所示,在输入框聚焦时,前端组件通过接收的kv参数渲染出选项,用户点击选项,可以将 ...

  7. 小技巧之“将Text文件中的数据导入到Excel中,这里空格为分割符为例”

    1.使用场景 将数据以文本导出后,想录入到Excel中,的简便方案, 起因:对于Excel的导出,Text导出明显会更方便些 2.将Text文件中的数据导入到Excel中,这里空格为分割符为例的步骤 ...

  8. 【Android Studio 小技巧】一键查看文件方法结构目录File Structure

    看源代码的时候,如果可以查看class中的所有方法,可以提高效率.Android Studio 中可以使用快捷键一键显示所有方法的目录. Mac: command + fn + F12 (在mac中的 ...

  9. jenkins使用小技巧:pom.xml文件里的版本随着每次发布变化怎么办?

    针对这个问题,构建方法不变, 变化在动态去获取每次打出来的包名, 比如说,本次打出来的报名mypackage-1.0.3-SNAPSHOT.jar 那么,先进入target目录 #先进入target目 ...

随机推荐

  1. 为vue添加公用方法,vue添加通用方法

    common.js var common =function() { return{ f1:function(){ console.log("this is common f1().&quo ...

  2. JN_0007:微信昵称设置小数字

    请复制下面背景色里面的数字符号 上标: ℡º ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁺ ⁻ ⁼ ⁽ ⁾ ⁿ ′ ½ 下标: ℡.₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ₊ ₋ ₌ ₍ ₎ 复制上面那串数 ...

  3. 定时调度系列之Quartz.Net详解

    一. 背景 我们在日常开发中,可能你会遇到这样的需求:"每个月的3号给用户发信息,提醒用户XXX "."每天的0点需要统计前一天的考勤记录"."每个月 ...

  4. further configuration avilable 不见了

    Dynameic Web Module的further configuration avilable  不见了 打开目录下的 org.eclipse.wst.common.project.facet. ...

  5. The SetStack Computer UVA - 12096

    题意:初始状态的栈内包含一个空集,对栈进行一下操作: PUSH:向栈内压入一个空集 DUP:复制栈顶,并压入栈内 UNION:将栈顶端两个集合出栈,并将两个元素的并集入栈 INTERSECT:将栈顶端 ...

  6. 深度探索C++对象模型

    深度探索C++对象模型 什么是C++对象模型: 语言中直接支持面向对象程序设计的部分. 对于各个支持的底层实现机制. 抽象性与实际性之间找出平衡点, 需要知识, 经验以及许多思考. 导读 这本书是C+ ...

  7. Filebeat 启动关闭流程

    启动阶段: instance/beat.go #打印home路径.配置路径.数据路径和日志路径 seccomp #Syscall filter检查 instance/beat.go #beat inf ...

  8. nginx的location配置详解

    语法规则: location [=|~|~*|^~] /uri/ { … } =开头表示精确匹配 ^~开头表示uri以某个常规字符串开头,理解为匹配url路径即可.nginx不对url做编码,因此请求 ...

  9. 创建Git 仓库及 克隆、拉取、和推送操作

    打开网址:     https://github.com/ 登录上自己创建的 Git账号   一. 创建Git 仓库          start  a project--->     输入仓库 ...

  10. 基于用户的协同过滤电影推荐user-CF python

    协同过滤包括基于物品的协同过滤和基于用户的协同过滤,本文基于电影评分数据做基于用户的推荐 主要做三个部分:1.读取数据:2.构建用户与用户的相似度矩阵:3.进行推荐: 查看数据u.data 主要用到前 ...