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