1.目标

将找到的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

这里要注意一下。有些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安装）

bootstrap
jquery
popper
modernizr.custom
owl.carousel
wowjs
count-to
bootsnav

2.引入作者写的逻辑js

3.通过npm安装第三方js包（vuecli4)

安装jquery

npm 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的时候，会比较麻烦。本人这次还是比较顺利的。
但基本步骤也就是百度一下包名，查一下用法。然后一个一个试试引入。

如何将html模板资源转为vuecli项目相关推荐

vue-cli项目布署问题解决：空白页、静态资源文件404错误、refrenceError:promise未定义（部分浏览器不支持ES6语法）
(前言:文章记录vue-cli项目打包使用IIS布署遇到的几个错误及解决方式) 首先简单理解webpack打包: 个人理解:项目开发中我们构建 "低耦合高内聚" 的组件/模块来代码 ...
Vue-cli 项目优化归纳(打包、源码、用户体验)
前言:vue-cli项目开发打包部署后,存在问题有首次首页加载过慢,包括加载缓慢问题,需要进行vue项目优化.下面是对vue性能优化方法进行归纳,后面会对方法进行亲测. 主要包括:代码包打包优化.编码 ...
idea新建项目写html5,Intellij IDEA搭建vue-cli项目
1.安装/升级node环境 vue-cli对于node和npm的版本是有要求的. 可以通过 node -v (npm -v)查看当前版本,通过 where node (where npm)查看安装路径 ...
Intellij IDEA搭建vue-cli项目
1.安装/升级node环境 vue-cli对于node和npm的版本是有要求的. 可以通过 node -v (npm -v)查看当前版本,通过 where node (where npm)查看安装路径 ...
在vue-cli项目中，如何使用网易云信
在vue-cli项目中,如何使用网易云信做聊天功能你需要网易云信的key, account,token.请前往网易云信官网注册获取.不做过多解释下载SDK 将NIM_Web_NIM_v7.4.0. ...
SaltStack Formula是什么？它是预先编写的Salt States状态，是社区分享的状态配置模板资源
文章目录 SaltStack Formula是什么? Installation Adding a Formula as a GitFS remote Adding a Formula director ...
vue-cli项目引用外部CSS和JS
vue-cli项目引用外部css和js 引用外部CSS 全局引用css 单文件引入CSS 引用外部JS 全局引用JS 单页面引用JS 引用外部CSS 全局引用css 方法一: ①将公共css文件放到s ...
驱动、MFC项目改名、代码移植技巧，复制别人项目中的界面资源以及合并项目
驱动.MFC项目改名.代码移植技巧,复制别人项目中的界面资源以及合并项目驱动.MFC项目改名.代码移植技巧复制别人项目中的界面资源还有一种方法双击项目中的*.rc文件,打开vs后无反应,无法打 ...
th:text为null报错_小猿圈web前端之vue-cli项目打包完成后运行文件路径报错问题
学习前端的小伙伴越来越多,问题也就越多,前面基础部分还好一些,特别是一到框架的时候,难住了一大部分人,今天小猿圈web前端讲师就为大家总结了vue-cli项目打包完成后运行文件路径报错问题,有兴趣的小 ...

如何将html模板资源转为vuecli项目

1.目标

目标效果

2.具体步骤

1. 通过vueclie 创建项目

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

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

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

3.进阶JS效果

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

2.引入作者写的逻辑js

3.通过npm安装第三方js包（vuecli4)

安装jquery

4.总结

如何将html模板资源转为vuecli项目相关推荐

最新文章

热门文章

如何将html模板资源转为vuecli项目

1.目标

目标效果

2.具体步骤

1. 通过vueclie 创建项目

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

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

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

3.进阶JS效果

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

2.引入作者写的逻辑js

3.通过npm安装第三方js包（vuecli4)

安装jquery

4.总结

如何将html模板资源转为vuecli项目相关推荐

最新文章

热门文章

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