小謝第58問：nuxt搭建企業官網

優雅的小謝發表於2020-11-17
UX

　　最近公司要重構公司官網，jq+bootstrap 改為了vue，剛開始我以為用vue不是挺好的嘛，後來才發現，有於vue單頁面的特性，不利於搜尋引擎的抓取，因此在seo方面需要另外想辦法，於是乎，就找到了nuxt,然後在專案應用的過程中，發現網上有各式各樣的講解，但是很多是過時的坑，於是。。。

　　1、nuxt:是服務端渲染，並且具有生成靜態檔案的功能，這就大大提高了seo,

　　2、安裝：官網給了兩種方法，一種從零開始建立，一種是用npx或者yarn直接建立，我用npx裝的時候可能是網速原因，一直報錯，因此用了yarn安裝

　　3、安裝完成後進入目錄，npm run dev啟動

　　4、我在這裡是在layout資料夾下default頁面裡講做好的的header和foote塞進去,然後在page下寫的頁面可以直接構建頁面的

　　5、plugin為引入外掛時候使用，比如swiper\animate\wowjs等等，以nuxt中使用swiper為例：

　　先裝swiper外掛npm install --save vue-awesome-swiper

　　引入第三方外掛一般放置到plugins目錄下

　　建立swiper.js  （注意swiper的css樣式因為版本的原因可能會變 ，這裡引入如果不成功可以去node_module檔案下看一下此路徑下

/swiper/dist/css/swiper.css有無css檔案，animate其他外掛同理，樓主為此踩了好久的坑）
import Vue from 'vue'
import css from 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
export default () => {
Vue.use(VueAwesomeSwiper,{css})
}

　　接著在nuxt.config.js的plugins裡配置

plugins: [
    { src: "~/plugins/swiper.js", ssr: false }
  ],

　　之後就可以按照文件使用了

     6、另一個是vuex的使用，注意常用的經典模式已經不能使用了，要按照nuxt上面格式下，因為沒有仔細看文件差點把我逼瘋，

 

 

 其他的會在之後繼續寫的，今天先這樣了

　　

相關文章