1.目標

將找到的html素材模板，轉換為vue的文件。

這個網上照了一圈，沒找到合適的方案，就自己嘗試弄了一下

目標效果

2.具體步驟

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

vue create 項目名稱

然后把默認的樣式刪除了

2. 將靜態(tài)資源放到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 是作者用于業(yè)務邏輯寫的，有些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

運行試試

會發(fā)現(xiàn)，他說找不到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

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

然后就發(fā)現(xiàn)其實沒啥變化。。。。

接下來就比較復雜了（對于我這種前端小白來說）

因為上面分析到的，除了jquery中，還有一些別的第三方庫。但是到目前，我都沒有通過npm來install。

但是運行的時候發(fā)現(xiàn) 控制臺 和chrome的F12里面，都沒有提示報錯

啥原因呢？

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

一下是猜測，不確定：

可能是vue里面的script 引用的是public文件夾下面的main.js 。而這個js把同目錄的其他第三方庫也成功引入了。所以就沒有報錯

那么問題來了，為啥效果還是沒有html模板素材的效果呢

這里就看下其他的第三方包。不懂的直接百度搜索名字，看下網絡上的想過說明

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

這個似乎就是我的目標需要的效果。于是手動引入試試？

手動引入成功，然后再瀏覽器看看效果。

控制臺和F12都沒有報錯。效果和目標一直，至此成功

4.總結

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

難點就是在引入js的時候，會比較麻煩。本人這次還是比較順利的。

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

到此這篇關于如何將html模板資源轉為vuecli項目的文章就介紹到這了,更多相關html模板轉vuecli項目內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論