位置: IT常识 - 正文

如何将html模板资源转为vuecli项目(怎么把html转成图片)

编辑:rootadmin
如何将html模板资源转为vuecli项目 1.目标

推荐整理分享如何将html模板资源转为vuecli项目(怎么把html转成图片),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:html模板怎么用,如何将html转为jpg,如何把html文件转化成word,怎么把html变成word,html模板怎么用,如何将html模板资源转为vuecli项目_html转vue,如何把html变成文档,如何把html变成文档,内容如对您有帮助,希望把文章链接给更多的朋友!

将找到的html素材模板,转换为vue的文件。 这个网上照了一圈,没找到合适的方案,就自己尝试弄了一下

目标效果

2.具体步骤1. 通过vueclie 创建项目vue create 项目名称

然后把默认的样式删除了

2. 将静态资源放到vue项目的 public 文件夹中

3.将html部分 ,copy至template里面

一般是将body 的内容 放置template即可 这里只是copy paste ,就不写了

4.修改css样式引入的写法

改成vue单文件的写法

运行起来看一下 可以看到这里,样式就完成了。效果和html模板素材基本一致了

3.进阶JS效果

html模板素材的效果

目前转换vue的效果

可以看到 顶部导航栏这里,html素材中是有js效果的。

如果只是css样式的使用,上面已经说完了。 但是通常html模板的素材一般都有一些js的特效 过度动画等等,使用起来非常好看。所以接下来要做的,就是把这些js功能也使用起来

1.分析html模板用了哪些js

如何将html模板资源转为vuecli项目(怎么把html转成图片)

这里要注意一下。有些js 是作者用于业务逻辑写的,有些js则是引入的成熟的第三方的js文件。 如果直接也在vue中script处 import这些js的话,是有各种问题的(最好别这么干)

本人是前端小白,没法知道哪些是作者写的,哪些是引用的怎么办 例如上图的

<script src="static/js/jquery-1.12.4.min.js"></script> <script src="static/js/bootstrap.min.js"></script> <script src="static/js/popper.min.js"></script> <script src="static/js/jquery.appear.js"></script> <script src="static/js/jquery.easing.min.js"></script> <script src="static/js/jquery.magnific-popup.min.js"></script> <script src="static/js/modernizr.custom.13711.js"></script>

这些。一般来说说可以看下具体js文件的内容。如果是压缩成一行的,基本上就是第三方的js库。 这些第三方的库一般可以通过 npm install xxxx 来进行安装整合到vue项目中

上面这里只有<script src="static/js/main.js"></script> 这个是作者写的逻辑js。所以在转换代码的时候,只需要处理这个即可.接下来先处理一下第三方库(不一定每个都要通过npm安装)

bootstrapjquerypoppermodernizr.customowl.carouselwowjscount-tobootsnav2.引入作者写的逻辑js

3.通过npm安装第三方js包(vuecli4)安装jquerynpm install jquery --save

运行试试

会发现,他说找不到jquery,这里还要配置一下 手动添加 vue.config.js文件,然后放入下列代码

const webpack = require('webpack')module.exports = { chainWebpack: config => { config.plugin('provide').use(webpack.ProvidePlugin, [{ $: 'jquery', jquery: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }]) }}

然后需要全局引入jquery

然后就可以了。看看效果。 然后就发现其实没啥变化。。。。 接下来就比较复杂了(对于我这种前端小白来说) 因为上面分析到的,除了jquery中,还有一些别的第三方库。但是到目前,我都没有通过npm来install。 但是运行的时候发现 控制台 和chrome的F12里面,都没有提示报错

啥原因呢? 回想一下,自己最开始的操作是把html模板素材的整个static静态资源文件,都copy到了vue项目的public里面。 一下是猜测,不确定:

可能是vue里面的script 引用的是public文件夹下面的main.js 。而这个js把同目录的其他第三方库也成功引入了。所以就没有报错

那么问题来了,为啥效果还是没有html模板素材的效果呢 这里就看下其他的第三方包。不懂的直接百度搜索名字,看下网络上的想过说明 当我搜索到jquery.appear 和bootsnav这两个包的时候发现了

这个似乎就是我的目标需要的效果。于是手动引入试试?

手动引入成功,然后再浏览器看看效果。

控制台和F12都没有报错。效果和目标一直,至此成功

4.总结

html素材有很多,但是vue的素材,似乎很难找到。碰到喜欢的html素材可以参照类似的方法来转换成vue使用 难点就是在引入js的时候,会比较麻烦。本人这次还是比较顺利的。 但基本步骤也就是百度一下包名,查一下用法。然后一个一个试试引入。

本文链接地址:https://www.jiuchutong.com/zhishi/297313.html 转载请保留说明!

上一篇:相机与IMU标定教程(什么叫相机标定)

下一篇:实验七 视图(视图的定义和操作实验报告)

  • 取得投资款属于什么过程
  • 一般纳税人发生特定应税销售行为
  • 全成本核算优缺点
  • 废铁回收行业前景怎么样
  • 哪个会计科目必须对全部项目发函证
  • 直接计入当期损益的利得和损失,是指( )的利得或损失
  • 饮料工业发展前景如何
  • 合伙做生意账目
  • 教育费附加计费单位
  • 专用发票可以下账吗
  • 招聘发票可以抵扣吗
  • 个体工商户给员工交社保流程
  • 加计扣除农产品包括哪些
  • 燃油税改革了谁的钱包
  • 营改增后房产税计税依据及计算方式
  • 怎么通过合并弥补亏损,使得利益最大化?
  • 电子银行承兑如何背书给别人
  • 对公账户开通网银有什么好处
  • 金融性负债总额是什么
  • 企业所得税汇算清缴退税怎么做账务处理
  • 年所得12万元以上的纳税人,在纳税年度终了后
  • 银行手续费抵扣税率是多少
  • 本月无收入怎样申报?
  • linux 数字
  • 航天信息服务费是什么费用
  • 广告牌费用会计分录
  • linux的用法
  • 0x0000000a蓝屏代码怎么解决
  • frameworkservic.exe是什么进程 有什么作用 frameworkservic进程查询
  • macbook panic cpu caller
  • 计提劳务派遣人数怎么算
  • 拍卖本人文字作品原稿
  • 资产减值损失在贷方表示什么意思
  • yii gridview
  • 报销差旅费会计凭证
  • 在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
  • 结转本月完工产品的成本
  • BEV(Bird’s-eye-view)三部曲之二:方法详解
  • php数据的提交与采集实验报告
  • linux rm 命令
  • vue的路由器
  • ChatGPT 被大面积封号,到底发生什么了?
  • 微信小程序开发一个多少钱
  • 表单验证方法一般有哪几种
  • svn命令行拉取代码
  • python中列表的索引用法
  • 缴纳税款滞纳金怎么算
  • 个人注册公司是否可以免税
  • 员工误餐费是否缴纳个人所得税
  • 固定资产清理的含义
  • 变动成本法是指什么
  • 什么叫同级财政收支
  • 公司年度汇算清缴费用多少
  • 其他收益会计科目解释
  • 老板自己的钱给公司
  • 固定资产不动产有哪些
  • 税收滞纳金的问题有哪些
  • 企业签发转账支票
  • 多收发票会计分录
  • 内部交易内部交易收益造成的当期折旧的多计额
  • windows server2014 安装 Mysql Applying Security出错的完美解决方法
  • 批量修改 sql
  • centos 安装
  • win8怎么格式化硬盘
  • windows10x预览版
  • 阿里云电脑系统
  • windows8任务栏在下面怎么不显示
  • lnmp一键安装包是什么
  • 正在进行设备安装 win10安装打印机
  • 表单验证插件
  • cocos2dx游戏开发教程
  • unity3d脚本参考手册
  • js怎么删除
  • nodejs全局异常监听
  • 彻底解决老鼠进发动机舱
  • 深圳如何打印个人参保证明
  • 县税务局可以去市里吗
  • 党建工作领导小组会议
  • 公对私转账怎么开票
  • 北京税务迁址流程是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设