• Nuxt3使用初体验


    1.官网下载

    npx nuxi@latest init nuxt(有墙),也可以到这个地方下载:git clone https://gitee.com/pmx600/nuxt3.git

    2.找到app.vue文件

    将里面的代码修改为:,NuxtPage 的作用相当于vue中的

    3.同级新建pages目录

    分别新建index.vue、login/index.vue、mine/index.vue,其中index.vue是进入此项目的默认文件,相当于vue的router.js中的path:'/'的路径。nuxt项目不需要自己配置路由,默认会把pages里面的换成路由。比如这里,你直接访问:http://192.168.100.87:3000,http://192.168.100.87:3000/login,http://192.168.100.87:3000/mine 即可

    4.环境变量

    在app.vue的同级目录下,新建.env、.env.local、.env.dev、env.prod,变量命名没用规则,建议统一用NUXT_PUBLIC_XXX的书写规范。

    5.启动命令修改

    修改package.json的启动命令,如本地启动,在scripts添加一行:"local": "nuxt dev --dotenv .env.local",那么启动后,就会去读取.env.local的配置。

    6.获取环境变量的值

    首先先去nuxt.config.ts,添加: runtimeConfig: { public: { baseUrl: process.env.NUXT_PUBLIC_BASE_URL, appId: process.env.NUXT_PUBLIC_APPID } },

    假设我们在.env或者.env.local配置了NUXT_PUBLIC_BASE_URL = xxxx,NUXT_PUBLIC_APPID=xxx的两个环境变量。
    获取变量的方法,调用nuxt提供的API: const config = useRuntimeConfig();console.log(config)就可以拿到对应的变量。

    7.路由跳转

    调用nuxt的api:navigateTo({ path: url },query: {id: 1})

    8.nuxt.config.ts常用配置:

    // https://nuxt.com/docs/api/configuration/nuxt-config
    export default defineNuxtConfig({
      css: [
        './assets/css/reset.css',
      ],
      app: {
        head: {
          title: 'Nuxt',
          meta: [
            { name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover' }
          ],
          script: [
            // 
            // { src: 'https://awesome-lib.js' }
          ],
          link: [
            // 
            // { rel: 'stylesheet', href: '@/assets/reset.css' }
          ],
          // please note that this is an area that is likely to change
          style: [
            // 
            // { children: ':root { color: red }', type: 'text/css' }
          ],
          noscript: [
            // 
            { children: 'JavaScript is required' }
          ]
        }
      },
      runtimeConfig: {
        // Keys within public are also exposed client-side
        public: {
          baseUrl: process.env.NUXT_PUBLIC_BASE_URL,
          appId: process.env.NUXT_PUBLIC_APPID
        }
      },
      modules: ['@vant/nuxt'],
      devtools: { enabled: false },
      postcss: {
        plugins: {
          // 这个工具可以实现自动添加CSS3前缀
          "autoprefixer": {
            overrideBrowserslist: ["last 5 version", ">1%", "ie >=8"]
          },
          'postcss-pxtorem': {
            rootValue: 37.5, // 指定转换倍率,我现在设置这个表示1rem=37.5px;
            propList: ['*'], // 属性列表,表示你要把哪些css属性的px转换成rem,这个*表示所有
            mediaQuery: false, // 是否允许使用媒体查询,false媒体查询的代码可用,true不可用
            exclude: 'ignore',
            replace: true, // 替换包含rem的规则,而不是添加回退
            minPixelValue: 1, // 需要转换的最小值,一般1px像素不转换,以上才转换
            unitPrecision: 6, // 转换成rem单位的小数点后的保留位数
            // selectorBalckList: ["van"], // 匹配不被转换为rem的选择器
          },
        }
      },
      alias: {
        "~": "/",
        "@": "/",
        "~~": "/",
        "@@": "/",
        // "assets": "//assets",
        "public": "//public"
      }
    })
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67

    9.plugins

    相当于在vue项目,在main.js引入xxx.js。比如在移动端做适配,引入lib-flexible.js。如果我们在vue的项目,直接在main.js: import ('@/utils/lib-flexible.js'),在nuxt项目中,我们只需要按照以下格式,即可自动引入:

    import { defineNuxtPlugin } from '#app'
    
    export default defineNuxtPlugin(() => {
      if (process.client) {
        (function flexible(window, document) {
          var docEl = document.documentElement
          var dpr = window.devicePixelRatio || 1
      
          // adjust body font size
          function setBodyFontSize() {
              if (document.body) {
                  document.body.style.fontSize = (12 * dpr) + 'px'
              }
              else {
                  document.addEventListener('DOMContentLoaded', setBodyFontSize)
              }
          }
          setBodyFontSize();
      
          // set 1rem = viewWidth / 10
          function setRemUnit() {
              var rem = docEl.clientWidth / 10
              docEl.style.fontSize = rem + 'px'
          }
      
          setRemUnit()
      
          // reset rem unit on page resize
          window.addEventListener('resize', setRemUnit)
          window.addEventListener('pageshow', function (e) {
              if (e.persisted) {
                  setRemUnit()
              }
          })
      
          // detect 0.5px supports
          if (dpr >= 2) {
              var fakeBody = document.createElement('body')
              var testElement = document.createElement('div')
              testElement.style.border = '.5px solid transparent'
              fakeBody.appendChild(testElement)
              docEl.appendChild(fakeBody)
              if (testElement.offsetHeight === 1) {
                  docEl.classList.add('hairlines')
              }
              docEl.removeChild(fakeBody)
          }
      }(window, document))
      }
    })
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51

    10.部署问题

    默认的packge.json文件中的scripts里面,有默认的:“build”: “nuxt build”,我们需要修改:

    "build": "nuxt build --dotenv .env.prod && node .output/server/index.mjs",
    
    • 1

    执行完 npm run build,打包输出.output,里面是没用index.html,因为这个是服务端渲染原理,就相当于是一个node.js的后端项目,而.output/server/index.mjs是我们要启动的文件,用过node.js开发的童鞋肯定知道的,这个地方就是相当于node.js启动的app.js或者index.js,所以需要我们使用node把项目启动。

    11.ngnix配置

    不会的请自行查找资料,比较简单,跟配置后端的应用差不多,无非就是做个代理,访问我们刚启动的服务。

    最后:package.json,有这么一个执行命令:generate,执行完npm run generate,这里打包出来的是纯静态文件,没用任何交互,附属项目目录一张
    在这里插入图片描述

  • 相关阅读:
    Java 环境其他下载2
    Linux基础-LVM逻辑卷管理
    windows下dapr的代码调试--非docker部署
    一文了解DataStore(Proto)
    c++基础知识-运算符与表达式1(详解)
    基于MOOC的FPGA硬件类课程远程实验教学平台设计
    运维审计是什么意思?有什么作用?用什么软件好?
    数据结构试题(三)
    第3部分 原理篇2去中心化数字身份标识符(DID)(2)
    如何在 Ubuntu 和其他 Linux 发行版中查看 MAC 地址
  • 原文地址:https://blog.csdn.net/weixin_43169949/article/details/134524977