欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

记录一次nuxt项目的创建

程序员文章站 2024-01-14 12:23:28
一、创建项目我是官方文档的搬运工https://zh.nuxtjs.org/docs/2.x/get-started/installation,一点要好好读,或者多去github里面的issue里面去查一查~npm init nuxt-app <你的项目名称>已经创建好的项目长这样,在各个文件夹中都有对当前部分的注释,很好理解,这里我不做赘述,直接npm run dev ,就可以起跑起来了,现在你已经拥有一个初步的nuxt项目了二、原有内容迁移因为我是修改旧项目的架构....

一、创建项目

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

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

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

记录一次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