记录一次nuxt项目的创建

一、创建项目

我是官方文档的搬运工https://zh.nuxtjs.org/docs/2.x/get-started/installation，一点要好好读，或者多去github里面的issue里面去查一查~

npm init nuxt-app <你的项目名称>

 已经创建好的项目长这样，在各个文件夹中都有对当前部分的注释，很好理解，这里我不做赘述，直接npm run dev ，就可以起跑起来了，现在你已经拥有一个初步的nuxt项目了

二、原有内容迁移

因为我是修改旧项目的架构，所以我在项目结构保持的同时，增加了一些自己需要的文件，组件和页面分别放置在components和pages文件夹下面， 按之前的前端项目拉了assets文件夹下面的图片，并没有迁移到static下面，接下来开始迁移其他部分

【问题】app.js导入的插件等，附加在vue原型上的方法等，借助nuxt的plugins插件附加

1. 原有app.js中设置的如echarts和附加在vue原型中的插件等，在nuxt项目中我们需要借助plugins插件附加到Vue当中，在plugins文件夹下新建插件js，我命名的入口插件叫main.js

2. import Vue from "vue";
   import echarts from 'echarts' // 引入echarts
   Vue.prototype.$echarts = echarts; 
   

    

3. 在nuxt.confix.js中配置插件

   plugins: [ { src: "@/plugins/main", ssr: true } ]

   
   

【问题】之前的项目用yaml文件进行了许多静态配置文字的应用，需要配置yaml解析

需要配置webpack解析规则，在nuxt.config.js的build中补充解析规则，如下，需要先安装js-yaml-loader

npm i js-yaml-loader --save

之后在nuxt.config.js中补充webpack打包配置 ，yaml文件可以正常解析啦

build: {
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.ya?ml$/,
        use: "js-yaml-loader"
      });
    }
  }

【问题】附加在window上的比如jquery、和一些全局方法如何设置

可以通过nuxt的head标签直接引入比如,远程路径见1，本地路径见2

head: {
    title: "xxxx",
    script: [
      {
        src: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"
      }{
        src:'/js/xxx.js'
      }
    ]
  },

还可以在webpack中设置，在build中补充plugins

build: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery"
      })
    ],
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.ya?ml$/,
        use: "js-yaml-loader"
      });
    }
  }

【问题】设置页面模板，并选择不同的模板

在layouts文件夹下创建模板，默认是default.vue文件，不设置模板时会使用它，我新增了一个模板

mobile.vue

<template>
  <div>
    <div>我是头部</div>
    <Nuxt />
    <div>我是底部</div>
  </div>
</template>

<script>
</script>

在页面中使用时

在pages下面的vue文件中设置  layout:"mobile",会自动使用此模板 

【问题】怎么在一个项目同时集成web端和移动端，通过不同的路由跳转

此处我用到了nuxt中的中间件，判断是web端还是移动端后，进行指定路由的跳转

（1）在middleware文件夹下新增了middleware.js

export default function({ isServer, req, redirect, route }) {
  let isMobile = ua => {
    var sUserAgent = ua.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    if (
      bIsIpad ||
      bIsIphoneOs ||
      bIsMidp ||
      bIsUc7 ||
      bIsUc ||
      bIsAndroid ||
      bIsCE ||
      bIsWM
    ) {
      return true;
    } else {
      return false;
    }
  };
  let userAgent = req ? req.headers["user-agent"] : navigator.userAgent || "";
  //pc跳转pc端
  if ( route.fullPath.indexOf("/m") > -1 &&
    !isMobile(userAgent)
  ) {
    let url = route.fullPath.substring(2);
    redirect(url);
  }
  //移动端
  if (route.fullPath.indexOf("/m") == -1 &&
    isMobile(userAgent)
  ) {
    redirect("/m" + route.fullPath);
  }
}

（2）在nuxt.config.js中配置middleware，此处配置在路由设置中

  router: {
    middleware: "middleware" //路由执行前中间件
  },

 

【问题】如何设置axios请求及代理访问，并且对获得结果做统一过滤

这里我直接用了nuxt自带的axios，当然也可以自己安装axios然后单独封装服务

（1）安装"@nuxtjs/axios", "@nuxtjs/proxy" 

npm i @nuxtjs/axios @nuxtjs/proxy --save

（2）在nuxt.config.js中配置他俩到modules 

modules: ["@nuxtjs/axios", "@nuxtjs/proxy"]

（3）在nuxt.config.js中配置axios和proxy

axios: {
    // See https://github.com/nuxt-community/axios-module#options
    proxy: true,
    prefix: "/web", // 前缀，可统一转发管理
    credentials: true
  },
  proxy: {
    "/api": {
      target: "https://xxxxxxxxx",
      changeOrigin: true,
      pathRewrite: {
        //是否需要替换前缀
        "^/web": "" // 把 /web 替换成‘’
      }
    }
  },

(4)页面上可以用啦，给个示例

          this.$axios
          .post("xxxx接口名", {参数})
          .then(res => {
                //拿到res.data处理结果
           })
          .catch(e => {
            console.log(e);
          });

    （5）想统一处理$axios的请求、返回、报错的话，我们还需要加一个axios的插件，在plugins文件夹下创建axios.js

export default function({ $axios, redirect }) {
  //统一处理请求
  $axios.onRequest(config => {
  //TODO:统一处理请求
  });
  //统一处理返回值
  $axios.onResponse(res => {
    return res.data;
  });
  //统一处理报错
  $axios.onError(error => {
    console.log(error, "console.error();");
  });
}

并如法炮制的在nuxt.config.js中配置上

plugins: [
    { src: "@/plugins/main"},
    { src: "@/plugins/axios" } //设置$axios请求，统一过滤
],

 

暂时就这些，新想到的随时补充~其实过程中遇到了很多问题，但是很多没记下来，想起来再补充啦，欢迎批评指正~ 

 

 

 

本文地址：https://blog.csdn.net/u012439689/article/details/112544589