記錄-首個Nuxt項目

項目首頁

項目描述：招聘網站（易展翅）

預覽地址：new.izhanchi.com/

項目安裝

運行 create-nuxt-app 確保安裝了npx（npx在NPM版本5.2.0默認安裝了）

npx create-nuxt-app <項目名>
or
yarn create nuxt-app <項目名>
複製代碼

個人選項配置：Element-UI、Axios、ESLint

項目目錄

├── assets               未編譯的靜態資源如 css 和 圖片
    ── images            圖片資源
    ── style             css、scss 文件
├── components           組件，不會像頁面組件那樣有 asyncData 方法的特性
├── dataCommon           存放
├── layouts              佈局目錄 layouts 用於組織應用的佈局組件
    —— default           項目主佈局
    —— bingPhone         微信登陸綁定手機號佈局（主要是和主佈局不同）
├── middleware           用於存放應用的中間件
├── nuxt.config.js       用於組織Nuxt.js 應用的個性化配置，以便覆蓋默認配置
├── package.json         用於描述應用的依賴關係和對外暴露的腳本接口
├── pages                用於組織應用的路由及視圖
├── plugins              存放須要在根vue.js應用實例化以前須要運行的JS插件
├── static               用於存放應用的靜態文件(不會被webpack編譯處理)
├── store                應用的 Vuex 狀態樹
複製代碼

項目接口封裝 （Axios）

問題彙總：

• 網站的用戶中心登陸相關的接口與本站的接口地址是不相同的

  do: 想到的是由於用戶中心接口很少，因此在請求攔截裏作處理切換接口代理。在請求用戶中心接口的時候傳多個「hosttype」字段來鑑別是不是用戶中心接口。

  栗子：

// get 請求
   this.$axios.get('xxx',{
     params：{...}
     hosttype: 'uhost'
   })
   // post 請求
   this.$axios.post('xxx',data,{
     headers: {...},
     hosttype: 'uhost',
   })
複製代碼

登陸彈窗組件封裝

• 思路:由於這個登陸並非跳頁面登陸而是彈窗。因此當時考慮把登陸作成全局組件，經過全局函數方法去調用組件。

• 註冊全局代碼

• 判斷是否登陸彈出彈出

問題彙總

• 由於彈窗是由用戶主動觸發。因此沒放到服務器端而後就會出現組件內不存在 $axios，$cookies，$store 等方法。

  do: 想到的是由於全局組件是經過plugins文件插件的形式引入的。因此如上圖同樣經過傳參的形式‘ $axios,$cookies,$store傳到組件內（不知道還有沒有最優解，有待深究）。

• 微信二維碼登陸樣式修改

  do: 須要引入微信第三方插件生成二維碼，而後經過css-base64形式才能自定義二維碼樣式。

• 後端想經過登陸接口設置cookies不成功

  緣由：由於用戶中心的站點跟本站站點不一致。

  do: 在請求config裏添加 withCredentials參數並設爲true

  developer.mozilla.org/zh-CN/docs/…

withCredentials: true
複製代碼

頁面開發總結

1. 業務組件和頁面created生命週期內不能用window對象，這歸咎與nuxt的生命週期機制。

詳：紅色框的生命週期是運行在服務端的，黃色框的即運行在服務端又運行到客戶端。而window對象是客戶端纔有的。

2. 避免在asyncData個別異步請求失敗致使服務端報錯，從而使得頁面不能正常展現。

   do: 給異步請求加上以下：

try {
   //在此運行代碼
}
catch (err) {
   //在此處理錯誤
}
複製代碼

3. 項目中運用高德地圖

• 安裝依賴

npm install vue-amap --save
複製代碼

• 寫插件js，放到plugins目錄下

import Vue from 'vue'
    import VueAMap from 'vue-amap'
    Vue.use(VueAMap);

    VueAMap.initAMapApiLoader({
      key: 'xxxxxxx',
      plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', 'Geocoder', 'AMap.CitySearch']
    });
複製代碼

• nuxt.config.js中添加該js

{ src: '@/plugins/vue-map', ssr: false },
複製代碼

詳：注意在nuxt.config.js中引入插件的時候ssr要設成false--由於高德地圖源碼裏存在widow對象操做dome。

注：在引用組件的時候用客戶端標籤包住，我猜是組件裏的生命週期使用了window對象。

注：若是同個頁面使用多張地圖記得 vid 要不一樣，不然沒法顯示。

eg:

<client-only>
        <div class="company-map">
          <el-amap vid="amap"
            :center="['116.46' ,'39.92']"
            class="amap-container"
            :zoom="16">
            <el-amap-marker
              :position="['116.46' ,'39.92']"
              :visible="true"
              :clickable="false" />
          </el-amap>
        </div>
     </client-only>
複製代碼

4. 項目中使用vue-pdf預覽文件

• 安裝依賴

npm install --save vue-pdf
複製代碼

• 寫插件js，放到plugins目錄下

import Vue from 'vue'
    import pdf from 'vue-pdf'
    Vue.component('pdf', pdf)
複製代碼

• nuxt.config.js中添加該js

{ src: '@/plugins/vue-pdf.js', ssr: false }
複製代碼

同時在nuxt.config.js該js不然引用了也會報錯。

頁面引用：

<div v-for="i in numPages" :key="i">
      <pdf :src="pdfSrc" :page="i" style="width: 100%"></pdf>
    </div>
複製代碼

let pdf = require('vue-pdf')
      this.pdfSrc = pdf.default.createLoadingTask(this.url);
      // 加載pdf總頁數
      this.pdfSrc.then(pdf => {
        this.numPages = pdf.numPages;
      });
複製代碼

項目效果：

5. 首次打開頁面或者刷新頁面獲取定位。（需求要全局定位一次）

   do:在vuex的store文件中有個nuxtServerInit函數 這個函數會異步執行完才執行生命週期。

項目部署

①服務器安裝pm2軟件（用於管理運行node項目）

wget ‐qO‐ https://getpm2.com/install.sh | bash
複製代碼

②安裝完成後，執行命令，爲咱們的 pm2 添加開機自啓動

pm2 startup systemd
    pm2 save
複製代碼

③執行以下命令，來使用 pm2 來啓動咱們的 express

pm2 start /home/node_project/socket/bin/www ‐‐name "項目名稱"
複製代碼

查看pm2管理的列表

pm2 list
複製代碼

④運行npm run build打包nuxt項目
而後將.nuxt、static、nuxt.config.js、package.json四個文件放到服務器目錄中。

⑤服務器上運行npm install安裝依賴

npm install
複製代碼

⑥pm2託管項目

pm2 start npm ‐‐ start2pm2 start
    npm ‐‐name "my‐nuxt"‐‐ run starT
複製代碼

⑦訪問服務器連接。 pm2經常使用命令

1. pm2 list # 查看當前正在運行的進程
2. pm2 start all # 啓動全部應用
3. pm2 restart all # 重啓全部應用
4. pm2 stop all # 中止全部的應用程序
5. pm2 delete all # 關閉並刪除全部應用
6. pm2 logs # 控制檯顯示全部日誌
7. pm2 start 0 # 啓動 id爲 0的指定應用程序
8. pm2 restart 0 # 重啓 id爲 0的指定應用程序
9. pm2 stop 0 # 中止 id爲 0的指定應用程序
10. pm2 delete 0 # 刪除 id爲 0的指定應用程序
11. pm2 logs 0 # 控制檯顯示編號爲0的日誌
12. pm2 show 0 # 查看執行編號爲0的進程
13. pm2 monit my-nuxt # 監控名稱爲my-nuxt的進程

問題總結

1. 在版本迭代構建jenkins的期間會出現 nginx 404 致使服務器報錯。

   因：jekins構建時 會走pm2 restart 致使原有包丟失。

   do:

   1.構建時重啓應當使用pm2 reload 來重載

   2.pm2 支持fork與cluster啓動模式，生產環境中應用cluster方式啓動

   3.在nuxt項目根目錄添加ecosystem.config.js來配置pm2

-- END --