前言介绍
想着给自己的网站更新迭代下，学习点新东西。
技术
nuxt3 开始【差点开始即结束】
创建项目 npx nuxi@latest init my-app 、 npx nuxi init <project-name>、 pnpm dlx nuxi init <project-name> ，报错~ 报错~ 报错~ 都不成功。
官网提示【 Node.js - v16.10.0 or newer】，用 nvm 包管理工具，下载 nvm install 18.12.1，老样子报错。再想是不是版本太高的问题，但是继续 nvm install 16.19.1，下了个16+最高的版本，还是不行。
然后开始怀疑包管理工具下载下来是不是没有生效，使用终极技能 关机重启。
npx nuxi init my-app 报错：
npm ERR! Unexpected token '.'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxx\AppData\Local\npm-cache\_logs\2023-04-05T14_22_35_939Z-debug-0.log
pnpm dlx nuxi init my-app 报错：
ERROR Error: Failed to download template from registry: fetch failed 23:00:50
ERROR Command failed with exit code 1: nuxi init my-app
pnpm: Command failed with exit code 1: nuxi init my-app
at makeError (C:\Users\yezengqian\AppData\Roaming\npm\node_modules\pnpm\dist\pnpm.cjs:23113:17)
at handlePromise (C:\Users\yezengqian\AppData\Roaming\npm\node_modules\pnpm\dist\pnpm.cjs:23684:33)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Object.handler [as dlx] (C:\Users\yezengqian\AppData\Roaming\npm\node_modules\pnpm\dist\pnpm.cjs:218968:7)
at async C:\Users\yezengqian\AppData\Roaming\npm\node_modules\pnpm\dist\pnpm.cjs:226695:21
at async main (C:\Users\yezengqian\AppData\Roaming\npm\node_modules\pnpm\dist\pnpm.cjs:226662:34)
at async runPnpm (C:\Users\yezengqian\AppData\Roaming\npm\node_modules\pnpm\dist\pnpm.cjs:226894:5)
at async C:\Users\yezengqian\AppData\Roaming\npm\node_modules\pnpm\dist\pnpm.cjs:226886:7
one year later ~~
不知道是不是网络问题，尝试切换网络，用手机热点。pnpm dlx nuxi init my-app
结果成功了~~~
D:\xx\nuxtjs>pnpm dlx nuxi init my-app
../../.pnpm-store/v3/tmp/dlx-7720 | +1 +
../../.pnpm-store/v3/tmp/dlx-7720 | Progress: resolved 2, reused 1, downloaded 0, added 1, done
Nuxi 3.3.3 22:56:48
ERROR (node:18548) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
✨ Nuxt project is created with v3 template. Next steps: 22:56:52
› cd my-app 22:56:52
› Install dependencies with npm install or yarn install or pnpm install 22:56:52
› Start development server with npm run dev or yarn dev or pnpm run dev 22:56:52
继续测试出两个结果：
- 切换网络手机热点，
pnpm dlx nuxi init my-app命令可以创建项目成功。 - 除了
pnpm dlx nuxi init my-app这个方法在热点网络可以创建成功外，npx nuxi init my-appnpx的命令都一样不能创建。
如果有知道问题的大佬可以帮忙解惑下，感谢！
项目目录及配置整理
目录
|src
|--assets 静态文件
|--components 组件
|--composables 公用方法
|--constants 常量数据
|--layouts 布局组件
|--middleware 中间件
|--pages 页面文件
|--public 静态文件
|--store 状态管理
|--types 类型
|--utils 公用方法
|app.vue 入口文件
注意：nuxt 会把 /pages目录下的文件自动生成路由。
nuxt.config.ts 配置
import { appDescription } from './src/constants/index'
export default defineNuxtConfig({
srcDir: 'src', // 项目文件的根目录配置
devServer: {
host: '0.0.0.0', // 项目运行的ip
port: 3256 // 项目运行的端口号
},
modules: [
'@unocss/nuxt',
'@vueuse/nuxt',
'@nuxtjs/color-mode'
],
colorMode: {
classSuffix: '', // 显示模式，白天黑夜切换的class后缀清除dark，如果不设置，class为dark-mode
},
app: {
head: {
viewport: 'width=device-width,initial-scale=1',
link: [
{ rel: 'icon', href: '/favicon.ico', sizes: 'any' },
{ rel: 'icon', type: 'image/svg+xml', href: '/nuxt.svg' },
{ rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
],
meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ name: 'description', content: appDescription },
{ name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
],
},
}
})
unocss 的配置文件 unocss.config.ts，使用就是在标签上直接使用 <div flex justify-center items-center text-sm>
import {
defineConfig,
presetAttributify,
presetIcons,
presetTypography,
presetUno,
presetWebFonts,
transformerDirectives,
transformerVariantGroup,
} from 'unocss'
export default defineConfig({
shortcuts: [
['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
],
presets: [
presetUno(),
presetAttributify(),
presetIcons({
scale: 1.2,
}),
presetTypography(),
presetWebFonts({
fonts: {
sans: 'DM Sans',
serif: 'DM Serif Display',
mono: 'DM Mono',
},
}),
],
transformers: [
transformerDirectives(),
transformerVariantGroup(),
],
})
项目文件修改配置
项目初始化的 app.vue 文件需要修改，添加 <NuxtPage/> 组件，以便路由使用。
/layouts 目录下的布局组件使用。默认使用 default.vue文件。 还可以通过 页面的配置，改变当前页面的 布局组件使用。
definePageMeta({
layout: "custom",
});
or
<template>
<NuxtLayout :name="layout">
<NuxtPage />
</NuxtLayout>
</template>
<script setup>
// You might choose this based on an API call or logged-in status
const layout = "custom";
</script>
打包|命令
"build": "nuxt build", // 打包 ssr
"dev": "nuxt dev", // 本地开发运行
"generate": "nuxt generate", // 打包静态页面
yarn build 打包
yarn generate 静态页面打包
pm2 部署
安装 pm2 （在服务器上安装）
npm install pm2 -g
项目根目录新建文件 ecosystem.config.js
module.exports = {
apps: [
{
name: 'app-name', // 应用名称
port: '3060', // 端口号
exec_mode: 'fork', // cluster 集群模式，如不指定，默认为fork
instances: '1', // 集群实例数，fork 模式
script: './.output/server/index.mjs' // 执行的脚本路径
}
]
}
运行 重启 停止 删除
pm2 [start|restart|stop|delete] ecosystem.config.js
查看运行列表 pm2 l
ending~
到此整个项目的迭代框架的第一步前端部分完成。细节的完善，更深入的学习，后面的路慢慢走。
