vue中public的用法详解

最新推荐文章于 2024-04-30 15:14:57 发布
最新推荐文章于 2024-04-30 15:14:57 发布
阅读量8.3k 收藏 5
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KingRules/article/details/109725701
版权

首先要说的是，piblic属于用于存放公共js文件夹，在index.html中用script标签引入（一定要用原生的引入，不然打包可能会出错！！），在需要的页面使用就可以了，具体如下：

第一步建立文件夹

 

 

第二步js文件内容

 

第三步在index。html中引入

 

第四步直接拿js中的stylejson数据就可以了

 

焉知鱼之乐也
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue引用public目录下文件
X_W123的博客
05-27 1万+
vue引用public目录下文件 有时候我们在开发h5时候，会有需要绑卡授权操作，这个时候需要同意某些协议并且这些协议是可以点击打开的，这种该怎么做呢？ 其实这就是一个链接，前端能够打开链接并且常用的也就是a标签喝vue自带的router-link，当然其他还有，通常来说a标签就够了 关于协议的存储，这里简单说下，在实际开发中，协议存储有以下几种： 1、存放在前端，一种是直接放在public静态资源文件夹下，webpack打包不会对其处理，直接把文件复制到存放项目的工程目录下；还有一种就是托管在cdn上，类
vue项目js 公共js文件
01-02
一个vue项目的 js公共包 里面拥有很多 js封装好的方法 是一个工具类
Vue中public/assets目录区别
最新发布
m0_69497411的博客
04-30 1517
一直以来都有个疑问在vue的项目中有两个静态资源目录文件夹public和assets，在实际项目里如果有资源到底是放在哪个里面?两者有什么区别？
vue-public文件夹
东东爱编码博客
07-07 1万+
文章目录一、vue-public文件夹的认识 一、vue-public文件夹的认识 任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。 注意我们推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处： 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。
Vue如何访问Public文件夹
汪程序员
05-01 1万+
说明 为什么需要访问Public文件夹的内容？ 一般都是放在assets下面，但是无法实现动态访问，这就造成如果你要动态加载一个图片或者视频是不行的。 比如：我现在把testHuawei.mp4放在assets文件夹下面，那么他会被打包，这时候，运行，你找到这个图片，它的路径为： http://localhost:8081/media/testHuawei.c4367207.mp4 多出一个c4367207（这是内部为了安全），这样你在写代码无法动态加载，因为只要是文件不一样，生成的数值也是不一样。
vue 项目中的 public、static及指定不编译文件
weixin_43714836的博客
11-20 4066
vue 项目中 public、static 及自己指定不编译文件，原里都是通过插件 cope-webpack-plugin 来实现。当某些文件不需要 webpack 解析时，指定不编译的功能很有用！
Vue 获取 public图片
weixin_45849417的博客
09-21 1386
vue 获取public图片的路径
Vue-cli assets SubDirectory及PublicPath区别详解
10-14
`assetsSubDirectory` 和 `assetsPublicPath` 是 Vue CLI 中两个重要的配置选项，它们决定了应用中静态资源的组织和访问方式。 1. **assetsSubDirectory**： `assetsSubDirectory` 是配置在 `config/index.js` ...
vue全局组件与局部组件使用方法详解
11-29
main.js入口文件的一些常用配置， 在入口文件上定义的public.vue为全局组件，在这里用的是pug模版 .wraper 的形式相当于<div class=wraper></div> —main.js文件 **main.js入口文件的内容** import Vue from 'vue' ...
vue 插件的方法代码详解
12-02
在本文中，我们将深入探讨如何开发Vue插件，特别是关注`install`方法的使用。Vue插件的开发通常涉及创建一个对象或者函数，其中包含`install`方法，以便用户通过`Vue.use()`来加载和使用插件。 首先，为了开发Vue...
laravel-admin 与 vue 结合使用实例代码详解
01-19
所以理论上有2种方法解决： 重新绑定一下 vue 的映射关系 在某些页面禁止 pjax 1 太难搞，而且没啥资料，放弃。2 的话比较可行。 部分禁止 pjax 打开 public/vendor/laravel-admin/laravel-admin/la
Vue静态资源之public文件
Salange1的博客
10-21 5752
今天在看公司项目代码时，发现了一个比较有趣的动画，审查元素才发现是一个gif动图，查看相关代码发现图片路径写的是于是我按照之前的习惯向上找三级，找了半天没有找到那个文件，最后全局搜索发现文件是存在根目录的public文件夹下。
vue抽取公共方法———方法一
weixin_34409741的博客
11-13 1286
方法一：Vue插件 1.概述 作用：满足vue之外的需求，特定场景的需求 比如说，让你在每个单页面组件里，都可以调用某个方法（公共方法），或者共享某个变量等 2.使用方法 【声明插件】- 【写插件】-【注册插件】-【使用插件】 生命插肩和写插件是同时进行的，注册插件到Vue对象中，最后在Vue组件的时候使用写的插件 声明插件 插件的需求都是公共部分，所以会创建文件夹utils，里...
Vue引用public中的js文件
韦大人orz
12-01 1万+
背景 由于一些演示，需要对一些简单页面进行配置，由于打包build后的vue项目基本已经看不出原样，因此需要创建一个文件，并在打包的时候不会进行编译。所以文件放在public。 步骤 1.在public文件夹下创建config.js文件 用window.config 这样方式挂载也是可以的，或者直接定义变量。 let config = [ // window.config = [ { title: '智能指挥中心1', content: [ { .
34 vue 项目默认暴露出去的 public 文件夹 和 CopyWebpackPlugin
970655147的专栏
03-22 1456
拷贝的文件信息如下, 将 “node_modules/mars3d-cesium/Build/Cesium/” 下面的 “Workers”, “Assets”, “ThirdParty”, “Widgets” 文件夹分别拷贝到 “dist/mars3d-cesium” 的 “Workers”, “Assets”, “ThirdParty”, “Widgets”这样前端页面就可以通过 “http://localhost:8080/mars3d-cesium/” 来访问相关的服务了。
Vue 动态加载public图片和图片预览例子
漫—流的博客
07-11 6913
一、vue 静态资源文件夹 Vue 有两个存放静态资源的文件夹：assets和public。 1、 assets文件夹 使用require()方法加载静态资源，如： require('./assets/image/success.png') 这里的文件经过webpack处理过的，require方法的参数不支持变量，只能存文件的路径，因此加载图片时不能动态获取。 2、public文件夹（以前vue1.0版本叫static） public文件夹的文件是不经过webpack处理，打包时直接把public复制到打
vue.config.js中public是什么意思？
qq_42931285的博客
05-25 493
publicPath
vue中的public文件夹的作用，vue实例部署在index.html
SanOrintea的博客
02-08 3370
1.首先认识public文件夹的index.html 其中部署了vue实例 2、public文件夹下的内容不会被webpack打包，webpack打包的作用是相当于把多次用到的内容资源帮你分组分好。
vue.config.js 全局配置
热门推荐
轻风细雨_林木木
03-20 2万+
1.Webpack配置实例 参考：https://cli.vuejs.org/zh/config/ vue.config.js vue.config.js 是一个可选的配置文件，如果项目中存在这个文件，那么它会被 @vue/cli-service 自动加载，你也可以使用 package.json 中的 vue 字段配置，但是package.json中需要严格遵照 JSON 的格式来写。 文件初始值： /** * @type {import('@vue/cli-service').ProjectOpti
vue表单验证插件vue validator使用方法详解
09-08
Vue Validator是一个用于Vue.js的表单验证插件，可以方便地对表单进行验证。下面详细介绍一下Vue Validator的使用方法。 首先，我们需要在Vue项目中安装Vue Validator。可以通过命令`npm install vue-validator`来安装该插件。 安装完成后，在Vue组件中，需要先引入Vue Validator，并在`Vue.use(VueValidator)`中启用它。 接着，在需要进行验证的表单中，添加一个`validator`属性来指定验证规则。可以使用`v-validate`指令来设置验证规则。例如： ```html <input type="text" v-model="name" v-validate="'required|alpha'"> ``` 在上述代码中，我们使用`v-validate`指令来设置验证规则为必填（required）和只允许字母（alpha）。 然后，在表单中，可以使用`v-show`指令来根据验证结果来显示或隐藏错误信息。例如： ```html <div v-show="$validator.name.required">姓名不能为空</div> <div v-show="$validator.name.alpha">姓名只能包含字母</div> ``` 在上述代码中，使用`v-show="$validator.name.required"`来根据`name`字段的必填验证结果来显示或隐藏错误信息。 此外，还可以在Vue组件中定义自定义验证规则。可以使用`Vue.validator`方法来定义自定义验证规则。例如： ```javascript Vue.validator('customRule', function(val) { return val === 'validValue'; }); ``` 在上述代码中，我们自定义了一个验证规则`customRule`，它的值必须等于`'validValue'`。这样，我们就可以在表单中使用`v-validate="'customRule'"`来应用该自定义规则。 总结一下，Vue Validator的使用方法包括：安装插件、启用插件、设置验证规则、显示错误信息以及自定义验证规则。以上就是Vue Validator使用方法的详细解释。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值