![]() |
---|
項目描述:招聘網站(易展翅)css
預覽地址:new.izhanchi.com/html
npx create-nuxt-app <項目名>
or
yarn create nuxt-app <項目名>
複製代碼
個人選項配置:Element-UI、Axios、ESLintvue
├── 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 狀態樹
複製代碼
![]() |
---|
網站的用戶中心登陸相關的接口與本站的接口地址是不相同的node
do: 想到的是由於用戶中心接口很少,因此在請求攔截裏作處理切換接口代理。在請求用戶中心接口的時候傳多個「hosttype」字段來鑑別是不是用戶中心接口。webpack
栗子:ios
// get 請求
this.$axios.get('xxx',{
params:{...}
hosttype: 'uhost'
})
// post 請求
this.$axios.post('xxx',data,{
headers: {...},
hosttype: 'uhost',
})
複製代碼
![]() |
---|
思路:由於這個登陸並非跳頁面登陸而是彈窗。因此當時考慮把登陸作成全局組件,經過全局函數方法去調用組件。nginx
註冊全局代碼web
![]() |
---|
由於彈窗是由用戶主動觸發。因此沒放到服務器端而後就會出現組件內不存在 cookies,$store 等方法。vuex
do: 想到的是由於全局組件是經過plugins文件插件的形式引入的。因此如上圖同樣經過傳參的形式‘ cookies,$store傳到組件內(不知道還有沒有最優解,有待深究)。express
微信二維碼登陸樣式修改
do: 須要引入微信第三方插件生成二維碼,而後經過css-base64形式才能自定義二維碼樣式。
後端想經過登陸接口設置cookies不成功
緣由:由於用戶中心的站點跟本站站點不一致。
do: 在請求config裏添加 withCredentials參數並設爲true
withCredentials: true
複製代碼
詳:紅色框的生命週期是運行在服務端的,黃色框的即運行在服務端又運行到客戶端。而window對象是客戶端纔有的。
避免在asyncData個別異步請求失敗致使服務端報錯,從而使得頁面不能正常展現。
do: 給異步請求加上以下:
try {
//在此運行代碼
}
catch (err) {
//在此處理錯誤
}
複製代碼
npm install vue-amap --save
複製代碼
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']
});
複製代碼
{ 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
複製代碼
import Vue from 'vue'
import pdf from 'vue-pdf'
Vue.component('pdf', pdf)
複製代碼
{ 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;
});
複製代碼
項目效果:
首次打開頁面或者刷新頁面獲取定位。(需求要全局定位一次)
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經常使用命令
在版本迭代構建jenkins的期間會出現 nginx 404 致使服務器報錯。
因:jekins構建時 會走pm2 restart 致使原有包丟失。
do:
1.構建時重啓應當使用pm2 reload 來重載
2.pm2 支持fork與cluster啓動模式,生產環境中應用cluster方式啓動
3.在nuxt項目根目錄添加ecosystem.config.js來配置pm2
-- END --