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

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的话，是有各种问题的（最好别这么干）

本人是前端小白，没法知道哪些是作者写的，哪些是引用的怎么办

例如上图的

这些。一般来说说可以看下具体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’

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。