众所周知,我们写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. apue——读目录操作

    头文件: #define _POSIX_C_SOURCE 200809L #include <sys/types.h> #include <sys/stat.h> #inclu ...

  2. nginx 容器反向代理网址的设置

    先讲一下场景:  nginx 容器要和SpringBoot 容器部署在一台机器上, nginx 为 SpringBoot 提供反向代理, 需要在 nginx.conf 中写上 SpringBoot 的 ...

  3. java 根据经纬度坐标计算两点的距离算法

    /** * @Desc 根据经纬度坐标计算两点的距离算法<br> * @Author yangzhenlong <br> * @Data 2018/5/9 18:38 */ p ...

  4. mysql8.0卸载干净--win10

    本文介绍,在Windows10系统下,如何彻底删除卸载MySQL... 1>停止MySQL服务开始->所有应用->Windows管理工具->服务,将MySQL服务停止.2> ...

  5. AtCoder Grand Contest 030题解

    第一次套刷AtCoder 体验良好 传送门 Poisonous Cookies cout<<b+min(c,a+b+); Tree Burning 难度跨度有点大啊 可以证明当第一次转向之 ...

  6. 普通用户授予select any table 权限

    基于应用的需要,让普通用户有访问sys表的权限,于是就想到了select any table 的权限,可是当授权以后发现还是不能访问sys的表,经过查一系列资料,发现select any table不 ...

  7. 配置tensorflow和keras时教程及问题总结

    基本参数:(如何基本参数和我的电脑不一致,有可能会出意外的错误) 操作系统:Windows 10,64位 Anaconda版本:Python 3.6版本.关于Anaconda的介绍.安装及使用教程可查 ...

  8. java 日常学习记录

    前言:记录自己初学java 遇到的问题. 环境(win10  开始安装的IDEA,net 开发者  )学习网址:http://how2j.cn/stage/14.html (不是打广告) 特别是对初学 ...

  9. ROS启动多launch文件

    在ROS工程中经常需要启动好几个launch文件,比较不方便,有下面两种方法可以更高效些: 重写一个大型的launch文件,将所有的节点的启动配置信息都包含进去. 通过bash写一个xxx.sh文件, ...

  10. Spring Cloud配置中心搭建(集成Git)

    1. 在Github(或其他)创建配置中心仓库bounter-config-repo,然后在仓库创建两个配置文件:simon.properties.susan.properties,链接如下: htt ...