1.目標(biāo)

將找到的html素材模板，轉(zhuǎn)換為vue的文件。

這個(gè)網(wǎng)上照了一圈，沒(méi)找到合適的方案，就自己嘗試弄了一下

目標(biāo)效果

2.具體步驟

1. 通過(guò)vueclie 創(chuàng)建項(xiàng)目

vue create 項(xiàng)目名稱

然后把默認(rèn)的樣式刪除了

2. 將靜態(tài)資源放到vue項(xiàng)目的 public 文件夾中

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

一般是將body 的內(nèi)容 放置template即可
這里只是copy paste ，就不寫(xiě)了

4.修改css樣式引入的寫(xiě)法

改成vue單文件的寫(xiě)法

運(yùn)行起來(lái)看一下

可以看到這里，樣式就完成了。效果和html模板素材基本一致了

3.進(jìn)階JS效果

html模板素材的效果

目前轉(zhuǎn)換vue的效果

可以看到 頂部導(dǎo)航欄這里，html素材中是有js效果的。

如果只是css樣式的使用，上面已經(jīng)說(shuō)完了。

但是通常html模板的素材一般都有一些js的特效 過(guò)度動(dòng)畫(huà)等等，使用起來(lái)非常好看。所以接下來(lái)要做的，就是把這些js功能也使用起來(lái)

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

這里要注意一下。有些js 是作者用于業(yè)務(wù)邏輯寫(xiě)的，有些js則是引入的成熟的第三方的js文件。

如果直接也在vue中script處 import這些js的話，是有各種問(wèn)題的（最好別這么干）

本人是前端小白，沒(méi)法知道哪些是作者寫(xiě)的，哪些是引用的怎么辦

例如上圖的

 <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>

這些。一般來(lái)說(shuō)說(shuō)可以看下具體js文件的內(nèi)容。如果是壓縮成一行的，基本上就是第三方的js庫(kù)。

這些第三方的庫(kù)一般可以通過(guò) npm install xxxx 來(lái)進(jìn)行安裝整合到vue項(xiàng)目中

上面這里只有<script src="static/js/main.js"></script> 這個(gè)是作者寫(xiě)的邏輯js。所以在轉(zhuǎn)換代碼的時(shí)候，只需要處理這個(gè)即可.接下來(lái)先處理一下第三方庫(kù)（不一定每個(gè)都要通過(guò)npm安裝）

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

2.引入作者寫(xiě)的邏輯js

3.通過(guò)npm安裝第三方j(luò)s包（vuecli4) 安裝jquery

npm install jquery --save

運(yùn)行試試

會(huì)發(fā)現(xiàn)，他說(shuō)找不到j(luò)query，這里還要配置一下

手動(dòng)添加 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

然后就可以了。看看效果。

然后就發(fā)現(xiàn)其實(shí)沒(méi)啥變化。。。。

接下來(lái)就比較復(fù)雜了（對(duì)于我這種前端小白來(lái)說(shuō)）

因?yàn)樯厦娣治龅降?，除了jquery中，還有一些別的第三方庫(kù)。但是到目前，我都沒(méi)有通過(guò)npm來(lái)install。

但是運(yùn)行的時(shí)候發(fā)現(xiàn) 控制臺(tái) 和chrome的F12里面，都沒(méi)有提示報(bào)錯(cuò)

啥原因呢？

回想一下，自己最開(kāi)始的操作是把html模板素材的整個(gè)static靜態(tài)資源文件，都copy到了vue項(xiàng)目的public里面。

一下是猜測(cè)，不確定：

可能是vue里面的script 引用的是public文件夾下面的main.js 。而這個(gè)js把同目錄的其他第三方庫(kù)也成功引入了。所以就沒(méi)有報(bào)錯(cuò)

那么問(wèn)題來(lái)了，為啥效果還是沒(méi)有html模板素材的效果呢

這里就看下其他的第三方包。不懂的直接百度搜索名字，看下網(wǎng)絡(luò)上的想過(guò)說(shuō)明

當(dāng)我搜索到jquery.appear 和bootsnav這兩個(gè)包的時(shí)候發(fā)現(xiàn)了

這個(gè)似乎就是我的目標(biāo)需要的效果。于是手動(dòng)引入試試？

手動(dòng)引入成功，然后再瀏覽器看看效果。

控制臺(tái)和F12都沒(méi)有報(bào)錯(cuò)。效果和目標(biāo)一直，至此成功

4.總結(jié)

html素材有很多，但是vue的素材，似乎很難找到。碰到喜歡的html素材可以參照類似的方法來(lái)轉(zhuǎn)換成vue使用

難點(diǎn)就是在引入js的時(shí)候，會(huì)比較麻煩。本人這次還是比較順利的。

但基本步驟也就是百度一下包名，查一下用法。然后一個(gè)一個(gè)試試引入。

到此這篇關(guān)于如何將html模板資源轉(zhuǎn)為vuecli項(xiàng)目的文章就介紹到這了,更多相關(guān)html模板轉(zhuǎn)vuecli項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論