位置: 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标定教程(什么叫相机标定)

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

  • 小度如何连接手机作为音响(小度如何连接手机热点网络)

    小度如何连接手机作为音响(小度如何连接手机热点网络)

  • 荣耀magic3怎么录屏(荣耀magic3怎样录屏)

    荣耀magic3怎么录屏(荣耀magic3怎样录屏)

  • 华为nove7与nove7se的区别在哪里(华为nove7与nove10对比)

    华为nove7与nove7se的区别在哪里(华为nove7与nove10对比)

  • 抖音赞多的好处有哪些(抖音里面赞多有什么好处)

    抖音赞多的好处有哪些(抖音里面赞多有什么好处)

  • 苹果xs如何关闭后台(苹果xs如何关闭屏幕自动亮度)

    苹果xs如何关闭后台(苹果xs如何关闭屏幕自动亮度)

  • qq怎么隐身在线(qq怎么设置在线隐身时间)

    qq怎么隐身在线(qq怎么设置在线隐身时间)

  • 手机位置信息是什么(手机位置信息是什么功能)

    手机位置信息是什么(手机位置信息是什么功能)

  • 苹果x没有原彩重要吗(苹果x没有原彩有什么影响)

    苹果x没有原彩重要吗(苹果x没有原彩有什么影响)

  • 微信怎么设黑色效果(微信怎么设黑色的)

    微信怎么设黑色效果(微信怎么设黑色的)

  • 抖音为什么看不见别人在线(抖音为什么看不到别人的点赞)

    抖音为什么看不见别人在线(抖音为什么看不到别人的点赞)

  • 世界上的第一台计算机多大(世界上的第一台电子计算机诞生于( ))

    世界上的第一台计算机多大(世界上的第一台电子计算机诞生于( ))

  • 信号接收器有辐射吗(信号接收器有辐射吗,辐射范围是多少备孕的人有影响吗)

    信号接收器有辐射吗(信号接收器有辐射吗,辐射范围是多少备孕的人有影响吗)

  • 华为荣耀9x可不可以隐藏应用(荣耀9x支持emui10吗)

    华为荣耀9x可不可以隐藏应用(荣耀9x支持emui10吗)

  • 苹果的暗黑模式怎么开(苹果的暗黑模式是什么)

    苹果的暗黑模式怎么开(苹果的暗黑模式是什么)

  • 手机号码过期什么意思(手机号码过期是怎么回事,还能用吗)

    手机号码过期什么意思(手机号码过期是怎么回事,还能用吗)

  • 苹果11手机信号不好怎么办(苹果11手机信号下面四个点怎么设置的)

    苹果11手机信号不好怎么办(苹果11手机信号下面四个点怎么设置的)

  • 手机卡停机了还扣费吗(手机卡停机了还能补回来吗)

    手机卡停机了还扣费吗(手机卡停机了还能补回来吗)

  • vivo月亮标志怎么去除(vivo手机月亮标志怎么去掉)

    vivo月亮标志怎么去除(vivo手机月亮标志怎么去掉)

  • 苹果手机怎么显示节日壁纸(苹果手机怎么显示sim卡联系人)

    苹果手机怎么显示节日壁纸(苹果手机怎么显示sim卡联系人)

  • 快手直播不推送怎么办(快手直播没推送是什么意思)

    快手直播不推送怎么办(快手直播没推送是什么意思)

  • 华为荣耀9x呼吸灯在哪里设置(荣耀9x呼吸灯在哪设置)

    华为荣耀9x呼吸灯在哪里设置(荣耀9x呼吸灯在哪设置)

  • 手机恢复出厂设置后数据还能恢复吗(手机恢复出厂设置是不是彻底干净)

    手机恢复出厂设置后数据还能恢复吗(手机恢复出厂设置是不是彻底干净)

  • 华为Nova2s电池容量是多少(华为nova2s电池容量在哪里看)

    华为Nova2s电池容量是多少(华为nova2s电池容量在哪里看)

  • 手机反向充电怎么关闭(手机反向充电怎么弄)

    手机反向充电怎么关闭(手机反向充电怎么弄)

  • 2019年的个税现在还可以退吗
  • 职工福利费计税税率
  • 税前扣除什么意思
  • 建筑发票开具与土增税扣有什么关系?
  • 财务报表怎么重新做
  • 注册公司工贸和商贸哪个更好一些
  • 增值税申报时有0.1元差额,怎么申报
  • 有会计从业资格证还有用吗
  • 一次性就业补助金的领取条件
  • 普通发票不能抵扣进项税额怎么做账
  • 建筑公司核定征收是什么意思
  • 滴滴出行发票可以抵扣进项税吗
  • 增值税采用
  • 置换新房产支付资金怎么纳税?
  • 盈余公积转增资本有限制吗
  • 农产品初加工免征企业所得税
  • 普票冲红需要收回全部联次吗
  • 会计明细账簿包括哪些
  • 增值税附表一免税项目金额填不上
  • 个体工商户需要做账吗
  • 增值税 附加税
  • 工程预算费用会计怎么做
  • 文件类型有几种分类
  • 授课培训公司免责协议
  • linux系统文件压缩命令
  • 冲减预付款
  • 购物卡怎么给
  • 开发票时,一张发票上不同税率要符合哪些要求?
  • wordpress注册界面
  • 建筑企业安装费计入什么科目
  • 何为租赁合同
  • 若依框架前后端分离手机号登录
  • 详解九章算法
  • 简述税款征收的基本原则
  • vue 百度地图 移动端
  • stable diffusion webul
  • 普通发票被退回怎么处理
  • 保安行业税率是多少
  • 尚硅谷百度贴吧
  • 银行代发工资当天改工资卡来得及吗
  • 实行营改增后,税金计算应注意哪些问题
  • 年终奖要计入工资吗
  • 网上报税优点与缺点
  • 帝国cms怎么调用文章随机段落
  • 帝国cms安装教程
  • 增值税进项发票勾选认证流程
  • 财政部关于印发财政专户管理办法的通知
  • 印花税会计处理办法
  • 企业做账的流程图
  • 发行股票时支付的手续费
  • 建筑业营改增的主要内容
  • 营改增后土地出让增值税
  • 应纳税额和已缴税额一样
  • 应交税金期末为负数
  • 现金往来款怎么做账
  • 销售货物的价外费用如何开票
  • 行政单位 预算会计
  • 如何降低未分配利润的方法
  • 公司招待费用会计分录
  • 收到退回多付的材料退款
  • 税金及附加科目借贷方向
  • 季度申报表弥补以前年度亏损
  • mysql格式化日期yyyy/mm/dd
  • ubuntu /opt
  • 无法打开vmx86
  • 在系统注册表中注册
  • mac连不上无线网络
  • win10系统怎么关闭自动更新
  • 怎样让xp系统变得更加流畅
  • centos安装编译环境
  • win7手动更新在哪里设置
  • win7系统登录QQ失败提示QQ软件已被破坏或部分文件已经丢失的解决方法
  • win8怎么创建宽带连接
  • linux网络设备有哪些
  • win8怎么更新到win8.1
  • OpenGL Tutorial: (2) Creating an OpenGL Window
  • unitystudio手机版
  • cdn ajax
  • python whiletrue循环语句
  • 广西发票查询平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设