首先按照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項目就完成了
效果如下: