使用Nuxt3搭建自己的网站

置顶獨孤殤

已于 2023-07-26 16:58:13 修改

阅读量1.8k

点赞数 3

分类专栏： nuxtjs vue3 文章标签： vue3 Nuxt3 typescript pinia

于 2023-06-28 18:04:09 首次发布

本文链接：https://blog.csdn.net/qq_40015826/article/details/131442456

版权

nuxtjs 同时被 2 个专栏收录

1 篇文章 2 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

Nuxt3介绍

Nuxt3是Nuxtjs基于Vue3构建的服务端ssr渲染框架

我的网站地址：wisdoms.xin

一.创建Nuxt3项目

创建Nuxt3项目

打开一个终端，使用以下命令创建一个新的启动器项目(node版本使用16.10以上):

# npx
npx nuxi@latest init <project-name>

# pnpm
pnpm dlx nuxi@latest init <project-name>

创建出错时，使用以下方法

如果以上命令执行成功，请忽略此块内容由于国内众所周知的网络原因，这一步会执行失败:

ERROR  Failed to download template from registry: request to https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json failed, reason: getaddrinfo ENOENT raw.githubusercontent.com

本以为开了科学上网就会没问题的。但还是什么出现这个问题。这时候就要在打开上面错误中的网址https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json 浏览器中返回会数据:

{
  "name": "v3",
  "defaultDir": "nuxt-app",
  "url": "https://nuxt.com",
  "tar": "https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3"
}

然后访问数据中的tar中的内容进行下载并且解压，并将解压后文件夹中的starter-3目录中的文件拷贝到你自己的项目目录。

上面的手动操作步骤就是模拟npx nuxi init 的操作。然后这项目的nux3工程的初始化就算完成了。

使用vscode进入项目目录

code <project-name>

安装相关依赖

# yarn
yarn install

# npm
npm install

# pnpm
# Make sure you have `shamefully-hoist=true` in `.npmrc` before running pnpm install
pnpm install

运行项目

# yarn
yarn dev -o

# npm
npm run dev -- -o

# pnpm
pnpm dev -o

二.完善项目的结构

1.创建页面(pages)

根目录创建page文件夹，然后创建第一个页面，index.vue文件,里面内容如下：

<template>
  <div>
    <div>我是刚刚创建的首页</div>
    <div>{{ text }}</div>
  </div>
</template>

<script lang="ts" setup>
const text = ref('我是动态内容')
</script>

更改app.vue文件,将NuxtWelcome改成NuxtPage,这样就会使用pages作为动态路由页面了

<template>
  <div>
    <NuxtPage />
  </div>
</template>

更改这些操作后运行项目，就能够看到我们刚刚创建的首页了

我们只需要在pages文件夹下创建相应页面的vue文件，nuxt中的路由会自动生成
例如我们要再次加一个页面，可以如下操作：

页面路由中不带参数：

1.直接在pages文件夹下面创建about.vue文件,那么我们路由就会多了一个/about的页面
2.在pages文件夹下创建about文件夹，然后在about文件夹下面创建index.vue文件,和1的效果是一样的，都是生成/about路由

页面路由中带入参数：

1.在pages中创建一个文件夹page,创建一个[code].vue文件([code]这个是固定写法，code就是参数名，这个可以根据需求更改)，这样创建后，生成的的路由则是/page/?，(?就是任意的参数内容)
在[code].vue这个页面里面可以根据以下方式获取到code参数

<script setup lang="ts">
const route = useRoute()
const code = route.params.code as string
</script>

2.创建公共布局（layouts）

创建默认布局

创建一个默认布局》~/layouts/default.vue:

<template>
  <div>
    在所有页面上共享的一些默认布局
    <slot />
  </div>
</template>

在布局文件中，布局的内容将被加载到’ '中，而不是使用一个特殊的组件。
在需要的默认布局的页面中加入，例如在index.vue中:

<template>
  <NuxtLayout>
    <div>我是刚刚创建的首页</div>
    <div>{{ text }}</div>
  </NuxtLayout>
</template>

<script lang="ts" setup>
const text = ref('我是动态内容')
</script>

创建自定义布局

创建一个默认布局》~/layouts/custom.vue:

<template>
  <div>
    我是自定义布局，custom
    <slot />
  </div>
</template>

在需要的自定义布局的页面中加入，并且需要加入一个属性name，内容如下:

<template>
  <NuxtLayout :name="layout">
    <div>我是刚刚创建的首页</div>
    <div>{{ text }}</div>
  </NuxtLayout>
</template>

<script lang="ts" setup>
const layout = 'custom'
const text = ref('我是动态内容')
</script>

3.创建公共组件（components）

在根目录创建components，该目录是你放置所有Vue组件的地方，这些组件可以导入到你的页面或其他组件中(了解更多)。
nuxt会自动导入“components/”目录下的任何组件(以及你可能正在使用的任何模块注册的组件)。

| components/
--| TheHeader.vue
--| TheFooter.vue

<template>
  <div>
    <TheHeader />
    <slot />
    <TheFooter />
  </div>
</template>

以上就介绍了最简单的用法，可以访问官网了解更多用法

4.引入第三方库，挂在到vue上（plugins）

第一步

引入md预览组件@kangc/v-md-editor

# 安装@kangc/v-md-editor
# npm
npm i @kangc/v-md-editor

# pnpm
pnpm i @kangc/v-md-editor

第二步

创建一个VMdPreview.ts文件》~/plugins/VMdPreview.ts:
这个库有两个主题，我使用的是github主题

// @ts-ignore
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// @ts-ignore
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';

// highlightjs > 代码高亮
import hljs from 'highlight.js';
VMdPreview.xss.extend({
  // 扩展白名单,不设置的话iframe不会进行转译
  whiteList: {
    iframe: ['src'],
  },
});
VMdPreview.use(githubTheme, {
  Hljs: hljs,
});

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VMdPreview)
})

第三步

配置nuxt.config.ts文件：

export default defineNuxtConfig({,
  plugins: [
    { src: '~/plugins/VMdPreview', ssr: false }
  ]
})

第四步

<template>
  <NuxtLayout name="custom">
    <v-md-preview text="# 我是一号标题" ref="previewRef"></v-md-preview>
  </NuxtLayout>
</template>

更多功能，请访问@kangc/v-md-editor

5.seo优化

全局优化配置

export default defineNuxtConfig({
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width,initial-scale=1',
      title: 'Wisdoms - 前端技术 - Marvin',
      meta: [
        { name: 'keywords', content: 'Wisdoms,前端,前端开发工程师,小程序,Uniapp,Vue2,Vue3,Nuxt,Nest,Node,React,Marvin' },
        { name: 'description', content: 'Wisdoms，高级前端开发工程师,致力于专研最新技术，并且实际运用与自己的项目中。' },
        { name: 'og:description', content: 'Wisdoms，高级前端开发工程师,致力于专研最新技术，并且实际运用与自己的项目中。' },
        { name: 'og:locale', content: 'zh-CN' },
        { name: 'og:title', content: 'Marvin - 前端技术' },
        { name: 'og:site_name', content: 'Marvin - 前端技术' },
        { name: 'author', content: 'Marvin' },
        { name: 'apple-mobile-web-app-capable', content: 'yes' },
        { name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
        { name: 'baidu-site-verification', content: 'codeva-pOQPfzOkeX' }
      ]
    }
  }
})

单独页面的配置

只需要在页面中加入/更改以下配置：

<script setup lang="ts">
// htmlTitle可通过后台获取实现页面的动态标题
const htmlTitle = '自定义内容'
useHead({
  title: `Wisdoms-${htmlTitle}`,
  meta: [
    { name: 'description', content: `Wisdoms-${htmlTitle}.` }
  ]
})
</script>

6.请求API数据（useFetch）

7.引入百度统计，谷歌分析

只需要在nuxt.config.ts中引入申请的代码即可

export default defineNuxtConfig({
  app: {
      script: [
        { children: `var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?百度密钥ID";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();` },
        { src: 'https://www.googletagmanager.com/gtag/js?id=衡量ID', async: true },
        { children: `window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '衡量ID');`
        }
      ],
      noscript: [{}]
    }
  }
})

8.打包部署

打包命令

在服务器中导入项目后，运行打包命令，运行后则在服务器上面启动了项目：

# npm
npm run pm2
# pnpm
pnpm pm2

重启的服务运行：

# npm
npm run pm2-restart
# pnpm
pnpm pm2-restart

package.json文件

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "pm2": "npm run build && pm2 start --name nuxt-wisdoms .output/server/index.mjs",
    "pm2-restart": "git pull && npm run build && pm2 restart nuxt-wisdoms"
  },
  "devDependencies": {
    "@nuxtjs/tailwindcss": "^6.7.0",
    "@types/node": "^18",
    "nuxt": "^3.6.1",
    "sass": "^1.62.1"
  },
  "dependencies": {
    "@kangc/v-md-editor": "^2.3.15",
    "@pinia/nuxt": "^0.4.11",
    "@vant/nuxt": "^1.0.2",
    "pinia": "^2.1.3",
    "vant": "^4.5.0"
  }
}