nuxt2项目 - 技术栈

nuxt2

创建项目

bash 复制代码

npx create-nuxt-app <project-name>

选择自己需要的配置，如服务器、UI框架、格式化工具、包管理器等，待创建完成即可进入项目目录启动查看项目

目录结构

csharp 复制代码

├── assets/ # 资源目录
├── components/ # 组件目录
├── layouts/ # 布局目录
├── middleware/ # 中间件目录
├── pages/ # 页面目录
├── plugins/ # 插件目录
├── static/ # 静态文件目录
├── store/ # 状态管理目录
├── nuxt.config.js # nuxt配置文件
└── package.json # 项目依赖

自定义路由

nuxt默认路由是根据 pages文件夹下的文件结构自动生成的，例如：在pages文件夹下创建一个 about.vue文件，那么在浏览器中访问 /about 就会渲染这个页面。

如何以vue-router 的形式自定义使用路由？：

在 nuxt.config.js 中配置 router 选项，例如：

js 复制代码

const { routes: pageRoutes } = require('./src/router/index.js');
export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.pop();
      routes.push(...pageRoutes);
    }
  }
}

在 src/router/index.js 中定义路由，例如：

js 复制代码

const { resolve } = require('path');
const Home = resolve(__dirname, '../views/home.vue');
const About = resolve(__dirname, '../views/about.vue');
export const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

在 src/views 目录下创建对应的组件文件，例如：home.vue 和 about.vue。
文件目录可以按照自己习惯和其他vue项目类似
npm run dev 启动项目，访问 /about

vuex的使用

nuxt内置了vuex，可以直接在 store 目录下创建 js 文件，每个 js 文件都会被转换为一个指定命名的字模块，模块名就是文件名，例如store/common.js 转换为 store/common 模块。在 .vue 中使用时和正常使用 vuex 一样，例如：

js 复制代码

import { mapState, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapState('common', ['count'])
  },
  methods: {
    ...mapMutations('common', ['increment'])
  }
}

api封装

nuxt有官方的 @nuxtjs/axios

安装：npm install @nuxtjs/axios -S
配置：在 nuxt.config.js 中的 modules 选项中添加 @nuxtjs/axios
添加好后，上下文 context, this中都会有 $axios 属性，可以直接使用

封装 api实例：在 plugins 文件夹下创建 request.js

js 复制代码

import getAllApi from '@/api';
const getInstanceConfig = (domain) => {
  const config = {
    baseURL: domain,
    timeout: 30000,
    withCredentials: true,
    headers: {
      post: {
        'Content-Type': 'application/json',
      },
      get: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
    },
    withCredentials: false
  };
  return config;
};
const errorHandler = (error) => {
  if (process.client) {
    if (error.response) {
      // 有的接口失败后返回的 message 为空
      const msg = error.response.data.message || '网络请求异常，请稍后重试!';
      if (error.response.status != 401) msg && Toast(msg);
    } else {
      console.log(error);
      Toast('网络请求异常，请稍后重试!');
    }
  }
  // eslint-disable-next-line
  if (error.response.status !== 405) {
    console.error(
      'error.response, status code ' + error.response.status,
      JSON.stringify(error.response?.data),
    );
  }
  return Promise.resolve();
};

function setjobsInterceptor($axios, context) {
  const { store, $base } = context;
  $axios.interceptors.request.use((config) => {
    //  添加一些自己的请求拦截配置
    return config;
  });

  $axios.interceptors.response.use((response) => {
    // handle response for interceptor set one
    return response.data;
  }, errorHandler);
}
function setblogsInterceptor($axios, context) {
  const { store, $base } = context;
  $axios.interceptors.request.use((config) => {
    //  添加一些自己的请求拦截配置
    return config;
  });

  $axios.interceptors.response.use((response) => {
    // handle response for interceptor set one
    return response.data;
  }, errorHandler);
}
export default function (context) {
  const { $axios } = context;
  const protocol = process.server ? 'http://' : 'https://';
  const jobs = $axios.create(getInstanceConfig(`${protocol}jobs.xxx.com`)); // 创建不同配置和域名的axios实例,
  const blogs = $axios.create(getInstanceConfig(`${protocol}blogs.xxx.com`)); // 创建不同配置和域名的axios实例,
  setjobsInterceptor(jobs, context); // 添加请求拦截和响应拦截
  setblogsInterceptor(blogs, context); // 添加请求拦截和响应拦截
  // 如果项目要用到多个不同域名的接口，可以继续添加
  return getAllApi({jobs, blogs}); // getAllApi: 所有axios实例传入获取所有api方法导出
}

创建不同api方法。上面用到的 getAllApi: 在 src 文件夹下创建 api 文件夹，并创建 index.js

js 复制代码

//  src/api/index.js
import jobs from './jobs';
// ...other apis模块
export default function (AxiosInstances) {
  return {
    jobs: jobs(AxiosInstances),
    // ...other apis
  };
}

api文件夹下可以创建不同的模块

js 复制代码

//  src/api/jobs.js
export default function ({ jobs, blogs }) {
  const getJobs = () => jobs.get('/jobs');
  const getblogDetail = (id) => blogs.get(`/blogs/${id}`);
  return {
    getJobs,
    getblogDetail
  }
}

为了方便将所有api挂在vue实例上，在 plugins 文件夹下创建 index.js, 并在 nuxt.config.js 的 plugins 选项中添加刚建的 index.js

js 复制代码

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
import createApi from './request.js';
Vue.use(Element, { locale })

export default function (context, inject) {
  const api = createApi(context);
  inject('api', api);
}

这样就可以在页面中直接使用 this.$api.jobs.getJobs() 调用接口了。

部署 nginx+pm2+centos7

构建项目 npm run build，输出在 .nuxt下
将 .nuxt, static, babel.config.js, nuxt.config.js, package.json,ecosystem.config.js 等文件上传到服务器自己想要放的位置
服务器安装 pm2 nginx node npm

bash 复制代码

yum install -y nginx
# 若是安装某些包的时候提示没有找到，则先安装epel-release
yum install -y epel-release
yum install -y nodejs # 按理nodejs中包含了npm，但是若是npm -v  查看版本时提示没有，就单独安装一下
npm install -g pm2

进入到放该项目的文件夹，启动项目

bash 复制代码

pm2 start ecosystem.config.js

ecosystem.config.js 配置文件是用于 pm2 启动项目的，可以参考官方文档

js 复制代码

module.exports = {
  apps: [
    {
      name: 'nuxtdemo',
      script: './node_modules/nuxt/bin/nuxt.js',
      args: 'start',
      watch: true,
      instances: 1,
      exec_mode: 'cluster',
      env: {
        NODE_ENV: 'production'
      }
    }
  ]
}

4.1 查看所有进程 pm2 list 4.2 查看某个进程 pm2 show nuxtdemo 4.3 停止某个进程 pm2 stop nuxtdemo 4.4 重启某个进程 pm2 restart nuxtdemo 4.5 删除某个进程 pm2 delete nuxtdemo 4.6 查看所有监听的端口 netstat -tlnp 或者 netstat -tlnp | grep 3000 单独查看3000端口。若是提示 netstat不存在，就安装一下 yum install net-tools

配置nginx

bash 复制代码

vi /etc/nginx/nginx.conf

nginx监听本地 80 端口，将所有请求代理到 3000 端口，这样就可以通过访问 nginx所载服务IP + 80 端口来访问项目了。

js 复制代码

// /etc/nginx/nginx.conf
server {
  listen 80; // 监听端口
  server_name localhost;
  location / {
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_pass http://127.0.0.1:3000; // 代理到3000端口
  }
}

5.1 、重启nginx

bash 复制代码

systemctl restart nginx

在虚拟机上部署出问题待解决： pm2启动项目后查不到启动的端口，待解决

nuxt3

官方文档中文文档抽空再看......