vue缩写路径及使用

最新推荐文章于 2024-07-17 20:15:29 发布
最新推荐文章于 2024-07-17 20:15:29 发布
阅读量1.4k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MapleDaXin/article/details/89875175
版权

vue路径缩写

    众所周知，在开发的过程中我们的项目中避免不了对于页面的图片进行加载，所以今天我就来讲解下一个简单的配置对于图片进行快速引用进行加载。

      首先我们打开我们的build文件 下面有一个webpack.base.conf.js文件我们打开它，在alias下面进行缩写路径。我配置的事imgin  指向的文件路径是src下面的assets

image.png

    上面配置好路径之后我们重新启动项目然后在打开我们所要编译的文件如图：

image.png

我们在此处进行如下配置使用'~' + 我们所配置的快捷路径查找我们的资源这样就可以进行我们所需要的图片快捷路径配置了。是不是很简单呢 

长按识别二维码，大鑫会为你时长更新更多的

 

 

 

MapleDaXin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
【vue】【vue.config.js】vue项目路径简写
qq_34838046的博客
10-05 797
const path = require('path'); const resolve = (dir) => path.join(__dirname, dir); module.exports = { //跨域代理设置 devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: {
vue：配置路径别名、路径简写
柒月小姐姐
05-31 1496
vue：配置路径别名、路径简写 在vue.config.js文件中做以下配置： const path=require('path') module.exports = { chainWebpack:config=>{ config.resolve.alias .set('cp',path.resolve(__dirname,'./src/components')) .set('as',path.resolve(__dirname,'./src/assets'))
vue3 快速入门 (三) : vue中的图片路径
最新发布
朱豪凯的博客
07-17 1253
介绍在Vue3中，引用图片路径的3种方式
vue链接后端的路径
abc516835137的博客
08-26 2105
vue 在url后面用？方式拼接与获取变量
LvFengQi的博客
04-18 884
拼接 this.$router.push({ path:"/thisUrl", query:{userId:row.sysUser.Uid} }) 获取 this.$router.query.userId
vue动态拼接图片路径、img地址拼接问题 [模板字符串]
mizuhokaga的博客
06-03 1万+
写vue写的不多,记录一下这个小坑 知识点:es6模板字符串${} (一)需求: 根据后端传的json数组的某一字段来拼接img的src路径,动态的绑定img标签的图片,图片来源本地文件夹,如果直接利用+和{{}}来拼接路径,该路径会被加载器解析成字符串 ↓json格式:根据不同的e_status拼接不同的图片 ↓本地文件夹的图片(titleicon.ico没有使用不用管) (二)解决方案 利用ES6的模板字符串进行拼接操作 模板字符串使用反引号 (`) 来代替普通字符串中的双引号和单引号。模板字
vue动态设置img的src路径实例
10-18
这通常意味着我们需要在Vue实例的data对象中定义一个变量来存储图片路径，并通过v-bind指令（或简写为：）来绑定这个变量到img的src属性上。 在Vue2.x版本中，可以使用require函数来动态加载图片资源。这要求你安装...
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
08-28
在处理图片时，我们可以使用`v-bind`（简写为`:`)来绑定`src`属性，使其与Vue实例的数据关联。 假设我们要动态显示图片，可以在HTML模板中这样写： ```html 动态图片"> ``` 这里的`imageUrl`是我们将在Vue实例的`...
经典vue面试题及答案
06-11
以下是对Vue面试题及答案的详细解析： 1. **Vue生命周期**：Vue实例在创建和销毁过程中有多个生命周期钩子，如`beforeCreate`（实例初始化后，数据观测之前）、`created`（实例创建完成，数据观测和事件配置已完成...
使用Vue实现学生信息管理
01-23
9. **构建工具**: 由于Vue通常结合Webpack等构建工具使用，`vue.config.js`可能包含了对Webpack的配置，如设置公共路径、调整输出目录、配置代理服务器等。 通过这个项目，开发者不仅可以学习Vue的基本用法，还可以...
Vue3中vue-router的使用学习代码
11-19
在本项目中，我们将探讨如何在Vue3环境中集成和使用Vue Router，以及它的一些核心概念和功能。 首先，我们看到压缩包内包含了一些常见的配置文件，如`.gitignore`用于指定在Git版本控制中忽略的文件类型，`vue....
vue src路径动态拼接小知识
qq_43541326的博客
03-12 3700
vue src路径动态拼接 我是新手 今天写vue 的时候 让这个src 给我弄的懵懵 本来打算弄个轮播图加路径 但是怎么也不显示 第一种 本地添加 如果需要很多图片 一直加div就很烦 所有我就把所有图片写在数组里面 注意 引入图片路径一定要加 require 一定要加 require 一定要加 require 然后我用了mint-ui里面的轮播组件 使用v-for 把图片路径循环...
Vue常见简写 “:“ , “@“ , “#“
xwnxwn的专栏
04-07 1985
首先需要了解一下v-bind,v-bind指令指示Vue将元素的id属性与组件的tabalData属性保持一致.如果绑定的值为null或undefined,那么该属性将从渲染的元素上移除.通常想要响应式的绑定一个属性,都会选择v-bind.而 : 就是v-bind的简写形式,可能看起来和一般的HTML属性长得不太一样,但它的确是合法合规的属性绑定字符,并且所有支持Vue的浏览器都可正常解析它.并且,它不会出现在最终渲染的Dom中,相信在你深入了解过它后,会喜欢这种写法的.label: "日期",
在vue-cli3中自定义全局的路径信息（配置路径别名alias）
沧笙踏歌的博客
05-14 8001
例子 在vue-cli3生成的初始项目中的iviews/Home.vue中可以看到这么一句话 // @ is an alias to /src import HelloWorld from "@/components/HelloWorld.vue"; 这里的@符号就是路径src的缩写，如果正常写应该是这样 import HelloWorld from "../components/HelloW...
Vue项目路径别名设置
m0_37828249的博客
06-23 8474
用vue-cli搭建好vue项目之后，进入正式开发过程，有时候会发现各种import路径中都存在长串的重复路径，比如：import 'src/assets/styles/reset.css' import 'src/assets/styles/border.css'为了方便维护，可以打开build文件下的webpack.base.conf.js文件，在module.exports中找到resolv...
Vue中路径的`@/`和`./`有何区别
热门推荐
有问题可关注公众号：前端研究院 后台输入问题回复
01-08 2万+
./表示相对路径，具体代表当前目录下的同级目录，遵从的是从后往前找文件 @/的意思： 表示的是相对路径(当然这也是简写啦)，因为这个在根目录/build/webpack.base.conf.js文件中@是配置的， 比如我的配置文件中@就代表src目录，遵从的是从前往后找，比如’@/components/login’ 就表示的是src/components/login文件 resolve: { ...
vue项目src文件夹简写方法，配置别名。@
weixin_52772897的博客
09-20 349
vue项目src文件夹简写方法，配置别名。@
Vue3配置路径简写以及组件通过插件形式引入
weixin_38992765的博客
01-31 907
环境： Vue3+Vite 1. 创建vite.config.js const path = require("path"); console.log(path.resolve(__dirname, "./src")); module.exports = { base: "/", outDir: "target", port: 3001, open: true, https: false, ssr: false, alias: { //路径简写配置 "/@/":
Vue项目中的文件/文件夹命名规范
weixin_34349320的博客
09-21 2065
文件或文件夹的命名遵循以下原则： index.js 或者 index.vue，统一使用小写字母开头的(kebab-case)命名规范 属于组件或类的，统一使用大写字母开头的(PascalCase)命名规范 其他非组件或类的，统一使用小写字母开头的(kebab-case)命名规范 1. Why？ 文...
vue 中 动态修改 background: url 路径
06-12
在 Vue 中，可以使用动态绑定的方式来修改 `background` 样式中的 `url` 路径。具体操作步骤如下： 1. 在模板中，使用 `v-bind` 或简写的 `:` 绑定 `style` 属性，并指定需要修改的 `background` 样式，例如： ```...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值