vue 項目使用 nuxt 做服務端渲染


 

 

 

 

 

 

首先按照nuxt官網從頭搭建項目:

1.新建一個項目目錄:

2.在當前項目下新建package.json,設定如何運行nuxt:

3.安裝nuxt, npm install --save nuxt

4.下面是我們項目的目錄結構:

分別說下每個文件對應的作用

pages 是每個頁面也是對應路由

components 目錄是封裝的組件,我這里封裝了公共頭和公共底部和輪播圖插件。

在這里遇到了nuxt引入第三方插件時和vue的不同,我們需要在plugins和nuxt.config.js做如下操作:

 在plugins里新建vue-swiper.js

然后在nuzt.config.js中配置要使用的插件

然后在組件中可以使用swiper

layouts 是布局,我們項目是公共頭和底部,中間是view

這樣一個nuxt項目就完成了

效果如下:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM