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

发布时间：2024-03-09 18:01

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'
    }])
  }
}