zoukankan      html  css  js  c++  java
  • nuxt:从零开始一个移动端项目(持续更新)

    有关ssr的概念和优点的相关理论可以参考我的另外一篇博客

    这篇主要记录一下如何从零创建一个nuxt项目

    参考:nuxt.js官网

    P1.项目创建

    nuxt.js官网有推荐使用create-nuxt-app命令一步创建一个nuxt项目,windows的话这里推荐使用cmd,不要使用git bash(因为使用git bash时一些需要方向键进行选择的时候根本看不到你现在选择的是哪项,比较难受)

    我选的配置如下:

    如果npx不可用,可能时npm版本过低,可以使用npm init nuxt-app <你的项目名> 

    等安装完成依赖,初始化的项目结构如下:

    运行npm run dev就可以运行起来,如果初始化的项目都跑不起来,建议检查一下自己的node或者npm版本是不是太低

    P2. 路由

     nuxt.js内置vue-router,不需要修改router.js文件,只需要在pages目录下创建对应文件夹,nuxt.js会自动生成路由配置。

    pages/test/index.vue 对应的路由为 /test

    pages/test/_testName.vue 是动态路由,nuxt.js里_开头的为动态路由,可以由params中接收传参,对应路由为 /test/xx ,其中xx为传递的数据

    跳转至动态路由的代码如下

        testRoute() {
          this.$router.push({
            name: 'test-testName',  // 动态拼接name
            params: {
              testName: Math.ceil(Math.random() * 10)   // 参数key与路由名对应
            }
          })
        }

     P3.数据请求

    nuxt.js内置axios插件,在nuxt.js中配置使用 。对请求的配置可以参考官网文档

      modules: [
        '@nuxtjs/axios'
      ]

    可以在nuxt实例中访问到它,即window.$nuxt.$axios

    但注意window对象在服务端渲染期间是无法访问到的,如果想在服务端渲染期间进行请求,axios对象还会在asyncData与fetch中的参数上下文对象context中访问到,如

    asyncData({ $axios }) {
        // ...
    }
    
    fetch({ $axios, store }) {
       // ...  
    }

    P4.fetch与asyncData

    均在服务端渲染期间调用,支持请求完成后再展示首屏页面

    不同:

    fetch用于更新vuex的state数据,asyncData可以更新组件内部数据。

    相同:

    1.都只在页面组件(pages目录下)下才会被调用,子组件的这两个方法是没用的。

    2.都无法访问到this,window,document

    3.第一个参数都是上下文对象context,context 变量的可用属性一览:

    属性字段类型可用描述
    app Vue 根实例 客户端 & 服务端 包含所有插件的 Vue 根实例。例如:在使用 axios 的时候,你想获取 $axios 可以直接通过 context.app.$axios 来获取
    isClient Boolean 客户端 & 服务端 是否来自客户端渲染(废弃。请使用 process.client )
    isServer Boolean 客户端 & 服务端 是否来自服务端渲染(废弃。请使用 process.server )
    isStatic Boolean 客户端 & 服务端 是否来自 nuxt generate 静态化(预渲染)(废弃。请使用 process.static )
    isDev Boolean 客户端 & 服务端 是否是开发 dev 模式,在生产环境的数据缓存中用到
    isHMR Boolean 客户端 & 服务端 是否是通过模块热替换 webpack hot module replacement (仅在客户端以 dev 模式)
    route Vue Router 路由 客户端 & 服务端 Vue Router 路由实例
    store Vuex 数据 客户端 & 服务端 Vuex.Store 实例。只有vuex 数据流存在相关配置时可用
    env Object 客户端 & 服务端 nuxt.config.js 中配置的环境变量,见 环境变量 api
    params Object 客户端 & 服务端 route.params 的别名
    query Object 客户端 & 服务端 route.query 的别名
    req http.Request 服务端 Node.js API 的 Request 对象。如果 Nuxt 以中间件形式使用的话,这个对象就根据你所使用的框架而定。nuxt generate 不可用
    res http.Response 服务端 Node.js API 的 Response 对象。如果 Nuxt 以中间件形式使用的话,这个对象就根据你所使用的框架而定。nuxt generate 不可用
    redirect Function 客户端 & 服务端 用这个方法重定向用户请求到另一个路由。状态码在服务端被使用,默认 302 redirect([status,] path [, query])
    error Function 客户端 & 服务端 用这个方法展示错误页:error(params) 。params 参数应该包含 statusCode 和 message 字段
    nuxtState Object 客户端 Nuxt 状态,在使用 beforeNuxtRender 之前,用于客户端获取 Nuxt 状态,仅在 universal 模式下可用
    beforeNuxtRender(fn) Function 服务端 使用此方法更新 __NUXT__ 在客户端呈现的变量,fn 调用 (可以是异步) { Components, nuxtState } ,参考 示例

    两个方法都必须做好错误捕获,如果在执行过程中出现了错误,页面会直接渲染失败

    P5.Plugins

     plugins是在app实例化之前加载完成的插件库,包括第三方插件或者自制插件,在nuxt.config.js中配置,通过ssr属性设置是在服务端时加载还是在客户端时加载(服务端加载时无window和document)。

    配置参考如下:

     plugins: [{
        src: './node_modules/lib-flexible/flexible.js', // 移动端适配
        ssr: false
      }, {
        src: '@/plugins/mint-ui.js',
        ssr: false
      }, {
        src: '@/plugins/lazyload.js',
        ssr: false
      }, {
        src: '@/plugins/vconsole.js',
        ssr: false
      }],

    需要在plugins目录下创建对应的文件,注意配置ssr为true时是无window对象的,因此如果需要window对象,需要将ssr设置为false

      

    以引入vconsole为例

    1.安装vconsole依赖项

    2.在plugins下创建vconsole.js,内容如下

    import VConsole from 'vconsole'
    
    const vc = process.env.NODE_ENV === 'development' ? new VConsole() : ''
    
    export default vc

    3.在nuxt.config.js中plugins下配置如上,注意配置ssr为false,因为vconsole需要检查和创建dom

    P6.全局css与sass的全局样式变量如何引入

    nuxt.config.js中css属性可以引入全局样式文件、 模块、第三方库,如下

      css: [{
        src: 'mint-ui/lib/style.css',
        lang: 'css'
      }, {
        src: '~/assets/css/global.css',
        lang: 'css'
      }],

    如果想引入sass的全局变量,需要启用和配置styleResource:

        /**
       * 全局引入的其他样式文件
       * 路径不能使用~和@
       * See https://zh.nuxtjs.org/api/configuration-build/#styleresources
       */
      styleResources: {
        scss: './assets/css/index.scss',
        // less: ...
        // sass: ...
      },
      modules: [
        '@nuxtjs/style-resources'     // 支持引入全局scss
       ],

    P7.移动端适配

    简单粗暴的话,可以考虑引入lib-flexible和postcss-px2rem插件

    lib-flexible或者amfe-flexible可以考虑npm安装,也可以直接将它们的构建结果的js直接引入到项目中,然后在plugins中引入,ssr设为false,可以参考上面plugins配置

    postcss-px2rem或者pxcss-pxtorem安装之后,在nuxt.config.js中设置如下

     build: {
        postcss: [
          require('postcss-px2rem')({
            remUnit: 75,    // 以设计稿750为参考
            propList: ['*']
          }),
        ],
      }

    如果考虑自己实现,还需要处理nuxt的error页面,不然报错的时候emmmm

    P8.部署

    部署内容比较多,后续有时间了另整理一篇讲部署的。

    P9.缓存

    提升nuxt项目性能的重要手段之一就是使用缓存。缓存是指在一段时间内不用重复计算,直接从缓存中取出来使用。可以分为几个方面:组件数据缓存、api接口缓存、页面缓存,参考下面那条链接,这一part主要实践一下api接口缓存。

    这一part记录使用在现有nuxt项目中接入缓存,预计使用io-redis,参考资料如下:

    https://juejin.cn/post/6844903623483195399

  • 相关阅读:
    Sending post
    <<the not so short introduction to Latex2e >> 读书笔记
    Latex 书签中文乱码解决方案
    VisualSVN迁移到其他服务器 子曰
    C#遍历DataSet中数据的几种方法总结 子曰
    Extjs formpanel加载数据的两种方式 子曰
    向老销售取经,学来的一点软件销售技巧 子曰
    extjs 实现 NumberField 即时计算 子曰
    Ext.form.DateField简单用法及日期范围控制 子曰
    解决.aspx中插入浮动广告不滚动问题 子曰
  • 原文地址:https://www.cnblogs.com/sue7/p/14007458.html
Copyright © 2011-2022 走看看