yii2 bower部分使用

2024-03-25 11:58
文章标签 使用 部分 yii2 bower

本文主要是介绍yii2 bower部分使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在yii2中,如果js  css文件等不存在,会到vendor/bower文件夹下面找,找到后加载到当前目录的web下面

如果我们的yii2的扩展需要用到js css,就需要加入js css这些文件

方法如下:

1.在github下面开一个项目:譬如:

https://github.com/zqy234/my.js

2.在http://bower.io/ 中进行注册

首先在linux 下面执行

yum install npm

sudo npm install -g bower

linux 设置sudo可以到网络搜索如何设置

安装log如下:

[terry@iZ942k2d5ezZ ~]$ sudo npm install -g bower
[sudo] password for terry: 
npm http GET https://registry.npmjs.org/bower
npm http 304 https://registry.npmjs.org/bower
npm http GET https://registry.npmjs.org/semver-utils
npm http 304 https://registry.npmjs.org/semver-utils
/usr/bin/bower -> /usr/lib/node_modules/bower/bin/bower
npm WARN unmet dependency /usr/lib/node_modules/block-stream requires inherits@'~2.0.0' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /usr/lib/node_modules/fstream requires inherits@'~2.0.0' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /usr/lib/node_modules/fstream-ignore requires inherits@'2' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /usr/lib/node_modules/fstream-npm requires inherits@'2' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /usr/lib/node_modules/glob requires inherits@'2' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /usr/lib/node_modules/npmconf requires inherits@'~2.0.0' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /usr/lib/node_modules/tar requires inherits@'2' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
bower@1.7.2 /usr/lib/node_modules/bower
?..?€ semver-utils@1.1.1
[terry@iZ942k2d5ezZ ~]$ 

创建bower.json

bower init
[terry@iZ942k2d5ezZ tt]$ bower init
? name terry
? description water
? main file my.js
? what types of modules does this package expose? 
? keywords js
? authors terry
? license MIT
? homepage https://github.com/zqy234/my.js
? set currently installed components as dependencies? Yes
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? No{name: 'terry',description: 'water',main: 'my.js',moduleType: [],keywords: ['js'],authors: ['terry'],license: 'MIT',homepage: 'https://github.com/zqy234/my.js',ignore: ['**/.*','node_modules','bower_components','test','tests'],dependencies: {'my.js': 'https://github.com/zqy234/my.js.git#~1.0.0'}
}? Looks good? Yes
[terry@iZ942k2d5ezZ tt]$ ls
bower_components  bower.json

完成后里面有一个bower.json文件,吧这个文件上传到github对应的项目目录 下面

3注册到bower

bower register terryjs git://github.com/zqy234/my.js.git

[terry@iZ942k2d5ezZ tt]$ bower register terryjstest  git://github.com/zqy234/my.js.git
bower terryjstest#*            resolve git://github.com/zqy234/my.js.git#*
bower terryjstest#*           download https://github.com/zqy234/my.js/archive/1.0.0.tar.gz
bower terryjstest#*            extract archive.tar.gz
bower terryjstest#*       invalid-meta terryjstest is missing "main" entry in bower.json
bower terryjstest#*       invalid-meta terryjstest is missing "ignore" entry in bower.json
bower terryjstest#*           resolved git://github.com/zqy234/my.js.git#1.0.0
? Registering a package will make it installable via the registry (https://bower.herokuapp.com), continue? Yes
bower terryjstest             register git://github.com/zqy234/my.js.gitPackage terryjstest registered successfully!
All valid semver tags on git://github.com/zqy234/my.js.git will be available as versions.
To publish a new version, just release a valid semver tag.Run bower info terryjstest to list the available versions.
[terry@iZ942k2d5ezZ tt]$

查看信息:
[terry@iZ942k2d5ezZ tt]$ bower info terryjstest
bower terryjstest#*             cached git://github.com/zqy234/my.js.git#1.0.0
bower terryjstest#*           validate 1.0.0 against git://github.com/zqy234/my.js.git#*{name: 'terryjs',homepage: 'https://github.com/zqy234/my.js',version: '1.0.0'
}Available versions:- 1.0.0You can request info for a specific version with 'bower info terryjstest#<version>'
[terry@iZ942k2d5ezZ tt]$ 


搜索:

[terry@iZ942k2d5ezZ tt]$ bower search terryjstest
Search results:terryjstest git://github.com/zqy234/my.js.git
[terry@iZ942k2d5ezZ tt]$ 

然后可以在

http://bower.io/search/

中搜索到

譬如搜索:http://bower.io/search/?q=terryjstest

就找到我关联的包了。

4.在文件中加入依赖:

{"name": "zqy234/logtest","description": "Yii2 zqy234 test","keywords": ["yii2","logtest"],"homepage": "https://github.com/zqy234/logtest","type": "yii2-extension","license": "MIT","support": {"source": "https://github.com/zqy234/logtest"},"authors": [{"name": "terry water","email": "zqy234@126.com"}],"minimum-stability": "stable","require": {"php": ">=5.4.0","yiisoft/yii2": ">=2.0.6","bower-asset/terryjstest": "~1.0"},"autoload": {"psr-4": {"terry\\": ""}},"config": {"process-timeout": 1800}
}

5

到yii跟目录下执行:

[root@iZ942k2d5ezZ fancyecommerce.com]# composer require --prefer-dist zqy234/logtest
Using version ^1.2 for zqy234/logtest
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)- Installing bower-asset/terryjstest (1.0.0)             Downloading: 100%         - Removing zqy234/logtest (1.0.0)- Installing zqy234/logtest (1.2.0)Downloading: 100%         Writing lock file
Generating autoload files
[root@iZ942k2d5ezZ fancyecommerce.com]#

[root@iZ942k2d5ezZ fancyecommerce.com]# ls vendor/bower/
bootstrap    jquery  jquery.inputmask  punycode  terryjstest  typeahead.js  yii2-pjax

可以看到terryjstest被加载到vendor/bower包下面了、


注意:在执行前,需要先运行asset的插件:

composer global require "fxp/composer-asset-plugin:~1.1.1"

















这篇关于yii2 bower部分使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/844939

相关文章

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,:本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP

C#中Guid类使用小结

《C#中Guid类使用小结》本文主要介绍了C#中Guid类用于生成和操作128位的唯一标识符,用于数据库主键及分布式系统,支持通过NewGuid、Parse等方法生成,感兴趣的可以了解一下... 目录前言一、什么是 Guid二、生成 Guid1. 使用 Guid.NewGuid() 方法2. 从字符串创建

Python使用python-can实现合并BLF文件

《Python使用python-can实现合并BLF文件》python-can库是Python生态中专注于CAN总线通信与数据处理的强大工具,本文将使用python-can为BLF文件合并提供高效灵活... 目录一、python-can 库:CAN 数据处理的利器二、BLF 文件合并核心代码解析1. 基础合

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压:数据存储与传输的优化核心1. zip/unzip:通用压缩格式的便捷操作2.

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传:从崩溃边缘抢救进度二、多线程加速:榨干网络带宽三、速度控制:做网络的好邻居四、终端交互

Python中注释使用方法举例详解

《Python中注释使用方法举例详解》在Python编程语言中注释是必不可少的一部分,它有助于提高代码的可读性和维护性,:本文主要介绍Python中注释使用方法的相关资料,需要的朋友可以参考下... 目录一、前言二、什么是注释?示例:三、单行注释语法:以 China编程# 开头,后面的内容为注释内容示例:示例:四