手把手教你如何將html模板資源轉(zhuǎn)為vuecli項目

更新時間：2023年04月25日 11:20:44 作者：何浩翔

Vue可以直接集成html,Vue就是前端框架,使用Vue做前端開發(fā)效率非常高,下面這篇文章主要給大家介紹了關(guān)于如何將html模板資源轉(zhuǎn)為vuecli項目的相關(guān)資料,需要的朋友可以參考下

1.目標

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

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

目標效果

2.具體步驟

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

vue create 項目名稱

然后把默認的樣式刪除了

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

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

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

4.修改css樣式引入的寫法

改成vue單文件的寫法

運行起來看一下

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

3.進階JS效果

html模板素材的效果

請?zhí)砑訄D片描述

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

請?zhí)砑訄D片描述

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

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

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

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

請?zhí)砑訄D片描述

這里要注意一下。有些js 是作者用于業(yè)務(wù)邏輯寫的，有些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文件的內(nèi)容。如果是壓縮成一行的，基本上就是第三方的js庫。

這些第三方的庫一般可以通過 npm install xxxx 來進行安裝整合到vue項目中

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

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

2.引入作者寫的邏輯js

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

npm install jquery --save

運行試試

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

手動添加 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

請?zhí)砑訄D片描述