项目首页

项目描述：招聘网站（易展翅）css

预览地址：new.izhanchi.com/html

项目安装

运行 create-nuxt-app 确保安装了npx（npx在NPM版本5.2.0默认安装了）

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 状态树
复制代码

项目接口封装（Axios）

问题汇总：

网站的用户中心登陆相关的接口与本站的接口地址是不相同的node

do: 想到的是由于用户中心接口很少，因此在请求拦截里作处理切换接口代理。在请求用户中心接口的时候传多个“hosttype”字段来鉴别是不是用户中心接口。webpack

栗子：ios

// get 请求
   this.$axios.get('xxx',{
     params：{...}
     hosttype: 'uhost'
   })
   // post 请求
   this.$axios.post('xxx',data,{
     headers: {...},
     hosttype: 'uhost',
   })
复制代码

登陆弹窗组件封装

思路:由于这个登陆并非跳页面登陆而是弹窗。因此当时考虑把登陆作成全局组件，经过全局函数方法去调用组件。nginx
注册全局代码web

判断是否登陆弹出弹出

问题汇总

由于弹窗是由用户主动触发。因此没放到服务器端而后就会出现组件内不存在 $axios，$ cookies，$store 等方法。vuex

do: 想到的是由于全局组件是经过plugins文件插件的形式引入的。因此如上图同样经过传参的形式‘ $axios,$ cookies,$store传到组件内（不知道还有没有最优解，有待深究）。express
微信二维码登陆样式修改

do: 须要引入微信第三方插件生成二维码，而后经过css-base64形式才能自定义二维码样式。

后端想经过登陆接口设置cookies不成功

缘由：由于用户中心的站点跟本站站点不一致。

do: 在请求config里添加 withCredentials参数并设为true

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

withCredentials: true
复制代码

页面开发总结

业务组件和页面created生命周期内不能用window对象，这归咎与nuxt的生命周期机制。

详：红色框的生命周期是运行在服务端的，黄色框的即运行在服务端又运行到客户端。而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']
    });
复制代码

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
复制代码

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;
      });
复制代码

项目效果：

首次打开页面或者刷新页面获取定位。（需求要全局定位一次）

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经常使用命令

pm2 list # 查看当前正在运行的进程
pm2 start all # 启动全部应用
pm2 restart all # 重启全部应用
pm2 stop all # 中止全部的应用程序
pm2 delete all # 关闭并删除全部应用
pm2 logs # 控制台显示全部日志
pm2 start 0 # 启动 id为 0的指定应用程序
pm2 restart 0 # 重启 id为 0的指定应用程序
pm2 stop 0 # 中止 id为 0的指定应用程序
pm2 delete 0 # 删除 id为 0的指定应用程序
pm2 logs 0 # 控制台显示编号为0的日志
pm2 show 0 # 查看执行编号为0的进程
pm2 monit my-nuxt # 监控名称为my-nuxt的进程

问题总结

在版本迭代构建jenkins的期间会出现 nginx 404 致使服务器报错。

因：jekins构建时会走pm2 restart 致使原有包丢失。

do:

1.构建时重启应当使用pm2 reload 来重载

2.pm2 支持fork与cluster启动模式，生产环境中应用cluster方式启动

3.在nuxt项目根目录添加ecosystem.config.js来配置pm2

-- END --

记录-首个Nuxt项目