跟着杨村长学nuxt3,每天收获一点点(2)

知识点

1. 踩坑经历
2. 安装@pinia/nuxt 插件并运行使用

踩坑经历

昨天已经在stackblitz.com运行了Nuxt3的demo,并且也体验了一把路由跳转, 也惊喜发现stackblitz运行速度可以那么的快, 但昨晚线上安装@pinia/nuxt死活都不成功, 我又安装VueUse, 也是不成功, 今天早上起来, 我在本地安装一下就成功了, 原因是我node是16.13.0 但是stackblitz是14.16.0, 就这个区别,导致 插件总是报错

措施

1. 我到网上搜了一波stackblitz切换node版本, 也没找到个所以然,
2. 在线升级node, npm install -g n, 报错, 提示没有 -g操作
3. 网上有说,升级npm? npm-windows-upgrade,报错

至此由于时间问题,我就没有再继续尝试了, 只能先放弃stackblitz,转而本地开发了, 如果小伙伴们找到了方法, 请留意给我, 谢谢!

安装@pinia/nuxt

1. 在packge.json 里面安装依赖, 这里顺便安装了一下eslint, 然后配置了一下eslint, 做代码规范

 "dependencies": {
    "pinia": "^2.0.4"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^0.11.1",
    "@pinia/nuxt": "^0.1.5",
    "@vueuse/core": "^7.1.2",
    "eslint": "^8.3.0",
    "nuxt3": "latest",
    "typescript": "^4.5.2"
  }
复制代码

2. nuxt.config.ts中配置一下

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  meta: {
    title: 'Nuxt 3',
  },
  buildModules: [
    '@vueuse/core/nuxt',
    '@pinia/nuxt',
  ],

  vite: {
    logLevel: 'info',
  },
})
复制代码

3. 照着网上案例配了一个InputEntry,stores

InputEntry.vue

<script setup lang="ts">
const name = ref('')

const router = useRouter()
const go = () => {
  if (name.value)
    router.push(`/hi/${encodeURIComponent(name.value)}`)
}
</script>

<template>
  <div>
    <input
      id="input"
      v-model="name"
      placeholder="What's your name?"
      type="text"
      autocomplete="false"
      p="x-4 y-2"
      m="t-5"
      w="250px"
      text="center"
      bg="transparent"
      border="~ rounded gray-200 dark:gray-700"
      outline="none active:none"
      @keydown.enter="go"
    >
    <div>
      <button
        class="m-3 text-sm btn"
        :disabled="!name"
        @click="go"
      >
        GO
      </button>
    </div>
  </div>
</template>

复制代码

4. 效果截图

至此插件算是成功的装上了,后面可以尝试更多的花样了

最后

经过这两天入门, 后面可以帮杨村长一起翻译Nuxt3了, 这边打个小小广告, 有兴趣同杨村长一起翻译和学习Nuxt3的,可以参与到这个项目 Nuxt3文档

本次我的详细代码放我的git仓库里面,后续会持续更新, 点击链接可以看到Nuxt3demo

如果文章对你有帮助, 还请点个赞,支持一下!