在vue脚手架中写项目技巧（一）路径简写

最新推荐文章于 2023-02-16 18:24:21 发布
最新推荐文章于 2023-02-16 18:24:21 发布
阅读量254 收藏
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/manitoyayaya/article/details/115201807
版权

在vue脚手架中写项目之技巧（一）


vuecli中的build/webpack.base.conf.js中alias里面添加路径设置，如下图所示：
在这里插入图片描述
配置后使用如下：
在这里插入图片描述
注：src调用时必须使用~前缀哦！

这样在使用时候可以不必过分在意现在在哪一层，使用多少个 (../)了，而是直接使用冒号左边设置好的名称代替即可。

manitolalala
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-cli构建脚手架import路径中@的意思
aliven1的博客
05-18 2841
webpack.base.conf.js中resolve: {    extensions: ['.js', '.vue', '.json'],    alias: {      'vue$': 'vue/dist/vue.esm.js',      '@': resolve('src'),    }  }这是webpack的路径别名，免得写麻烦又易错的相对路径...
Vue中关于图片路径的写法问题
mercurialmush的博客
01-13 5719
vue里面关于图片路径的小坑！
RuoYi-Vue搭建(若依)
tongxin_tongmeng的博客
02-16 1094
项目简介、拉取代码、建库建表、修改配置、后端启动、前端启动、项目访问
Vue路径写法：./ 和 @/
Wind的博客
04-12 1873
Vue路径写法：./ 和 @/
vue项目图片路径问题
weixin_30438813的博客
06-17 4964
一般情况下我们为了能在本地显示效果，写图片路径会直接这样写，但是在实际中图片一般都是动态上传的， 所以，在vue中一般是这样的： 但是这样你会发现，图片根本显示不出来，只是显示了个图片的图标。 后来发现通过require了路径之后可以正常显示。 但是这样感觉还是不太好，因为我不想声明怎么多变量。于是就成了这样： 先把图片通过import导入，前面的../../直...
在vue脚手架上写第一个组件
最新发布
04-18
Vue脚手架（Vue CLI）提供了一个快速设置的开发环境，使得这个过程变得简单高效。让我们深入了解一下如何在Vue CLI上创建并使用你的第一个组件。 首先，确保你已经安装了Vue CLI。如果还没有，可以通过以下命令全局...
vue2，vue3已经生成好的脚手架（空项目包）
07-19
vue脚手架 vue项目包包含vue2，vue3 所包含的环境：Router路由 Vuex CSS Pre-processors CSS预处理程序（sass）vue脚手架 vue项目包包含vue2，vue3 所包含的环境：Router路由 Vuex CSS Pre-processors CSS预处理程序...
分享一个vue项目“脚手架”项目的实现步骤
10-16
首先，搭建Vue项目脚手架的初衷是解决团队在新项目启动时，每次都需要负责人手动初始化项目，然后其他人再从版本库拉取，这会导致初始化过程中的不一致性和后期的代码冲突。通过创建一个统一的脚手架，可以规范化...
Electron-vue脚手架改造vue项目的方法
10-17
Electron-vue是由SimulatedGREG创建的一个项目，它提供了基于Vue.js和Electron的脚手架，简化了构建Electron应用的过程。项目地址在<https://github.com/SimulatedGREG/electron-vue>，文档可在...
使用vue脚手架（vue-cli）搭建一个项目详解
11-28
1.首先得下载node.js。方法可自行百度。...以上所述是小编给大家介绍的vue脚手架（vue-cli）搭建项目详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对
Vue——自定义项目访问路径
小欣儿的专栏
08-02 2万+
默认情况下，Vue项目的访问路径以 /#/，但我们有时候可能需要给项目定义一个明确的访问路径，如 /my_vue/ 等，这时我们需要修改配置，自定义项目的访问路径，方法如下： 1. 在index.html添加 <meta base=”/pay/”> (pay自定义的名称) <!DOCTYPE html> <html> <head> &...
vue路径写法：./和@/的区别
一入前端深似海
07-09 4万+
vue在引用路径的时候可以用 ./ 的形势引用如下： import './api/index' 这个代表在相同文件下绝对路径的意思。项目中还有常见的@用法： import util from '@/assets/js/util' 这个@是在 webpack.base.conf.js 文件里配置的，找到下面这段话 resolve: { extensions: ['.js', '.vu...
vue中本地静态图片的路径应该如何写
热门推荐
开心大表哥
03-06 6万+
需求：如何components里面的index.vue怎样能把assets里面的图片拿出来。 1.在img标签里面直接写上路径： &lt;img src="../assets/a1.png" class="" width="100%"/&gt; 2.利用数组保存再循环输出： &lt;el-carousel-item v-for="item in carouselData" :k...
vue-cli3.0设置静态文件简写路径
qq_40816649的博客
11-22 875
经常在项目中层次比较深的vue文件需要引用一张静态图片的时候会有很多的../../../这样看起来很不舒服，vue的脚手架正好有这相关的配置。 const path = require('path') module.exports = { chainWebpack:(config)=>{ config.resolve.alias .set('@assets',path...
【vue】【vue.config.js】vue项目路径简写
qq_34838046的博客
10-05 773
const path = require('path'); const resolve = (dir) => path.join(__dirname, dir); module.exports = { //跨域代理设置 devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: {
vue脚手架配置路径别名
weixin_45805570的博客
03-25 862
vue-cli 项目配置路径别名 vue-cli 2.x配置方式 在vue-cli 2.x项目中，进入build文件夹，找到webpack.base.conf.js，编辑文件 ，并找到resolve字段的配置项。 resolve: { extensions: ['.js', '.vue', '.json'], //这个是匹配扩展名的 alias: { '@': resolve('src'), //src解析成@
vue缩写路径及使用
MapleDaXin的博客
05-06 1448
vue路径缩写 众所周知，在开发的过程中我们的项目中避免不了对于页面的图片进行加载，所以今天我就来讲解下一个简单的配置对于图片进行快速引用进行加载。 首先我们打开我们的build文件 下面有一个webpack.base.conf.js文件我们打开它，在alias下面进行缩写路径。我配置的事imgin 指向的文件路径是src下面的assets 上面配置好路...
Vue手脚架的配置以及使用
BLUESKYHOST的博客
05-26 462
安装-使用 安装注意事项 下面两个方法都可以 npm install -g vue-cli npm install –global vue-cli 安装完查看是否安装成功 vue --version //必须这样子查看不能省略，具体可以百度因为可以很快查到 Vue手脚架创建Webpack项目 vue init webpack test //test 创建项目的名字· vu...
vue脚手架中data，methods，created应该写在哪个文件
06-09
在Vue脚手架中，`data`、`methods`、`created`等选项应该写在`.vue`文件中的`<script>`标签中的`export default`对象中。 例如，一个包含`data`、`methods`和`created`选项的Vue组件的示例代码如下： ``` <template> <div> <!-- 这里是模板部分 --> </div> </template> <script> export default { name: 'MyComponent', data() { return { message: 'Hello, World!' } }, methods: { showMessage() { alert(this.message) } }, created() { console.log('Component created.') } } </script> <style> /* 这里是组件的样式部分 */ </style> ``` 在这个示例代码中，`data`选项定义了一个名为`message`的数据属性，在模板中可以通过`{{ message }}`来访问它；`methods`选项定义了一个名为`showMessage`的方法，在模板中可以通过`@click="showMessage"`来调用它；`created`选项则定义了一个钩子函数，用于在组件被创建时执行一些初始化操作。这些选项都写在了`.vue`文件中的`<script>`标签中的`export default`对象中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值