Nuxt 3 - The Hybrid Vue Framework (nuxtjs.org)
Build your next application with Vue 3 and experience hybrid rendering, powerful data fetching and new features. Nuxt 3 is an open source framework making web development simple and powerful.
- SPA应用：也就是单页应用，这些多是在客户端的应用，不能进行SEO优化（搜索引擎优化）。
- SSR应用：在服务端进行渲染，渲染完成后返回给客户端，每个页面有独立的URL，对SEO友好。
- 更轻量：以现代浏览器为基础的情况下，服务器部署和客户端产物最多减小75倍。
- 更快：用动态服务端代码来优化冷启动。
- Hybird：增量动态生成和其他高级模式现在都成为可能。
- Suspense: 导航前后可在任何组件中获取数据。
- Composition API : 使用Composition API 和 Nuxt3的composables 实现真正的可复用性。
- Nuxt CLI ： 权限的零依赖体验，助你轻松搭建项目和集成模块。
- Nuxt Devtools ：专属调试工具，更多的信息和快速修复，在浏览器中高效工作。
- Nuxt Kit ：全新的基于 TypeScript 和跨版本兼容的模块开发。
- Webpack5 ： 更快的构建速度和更小的构建包，并且零配置。
- Vite：用Vite作为你的打包器，体验轻量级的快速HMR。
- Vue3 ： 完全支持Vue3语法，这一点特别关键。
- TypeScript：由原生TypeScript和ESM构成，没有额外配置步骤。
# 初始化
npx nuxi init nuxt-starter
cd nuxt-starter
# 安装依赖
pnpm install --shamefully-hoist
# 运行项目
pnpm run dev -- -o
打开浏览器 http://localhost:3000
默认目录结构
- .nuxt // 自动生成的目录，用于展示结果
- node_modules // 项目依赖包存放目录
- .gitignore // Git的配置目录，比如一些文件不用Git管理就可以在这个文件中配置
- app.vue // 项目入口文件，你可以在这里配置路由的出口
- nuxt.config.ts // nuxt项目的配置文件 ，这个里边可以配置Nuxt项目的方法面面
- package-lock.json // 锁定安装时包的版本，以保证其他人在 npm install时和你保持一致
- package.json // 包的配置文件和项目的启动调式命令配置
- README.md // 项目的说明文件
- tsconfig.json // TypeScript的配置文件
新增常用目录
- pages // 开发的页面目录
- components // 组件目录
- assets // 静态资源目录
- layouts // 项目布局目录- .nuxt 执行
dev时生成的目录 - .output 执行
build时生成的目录 - assets 用户添加 webpack或者vite打包时得资源保健
- 样式文件（css、scss等等）
- 字体文件
- components nuxt会自动导入此文件夹下的组件，在页面中可直接引用
- composables nuxt会自动导入vue中的组合式API
- layouts nuxt提供了一种可定制的布局框架
- middleware nuxt提供了一种可定制的路由中间件框架，可定制路由策略
- pages 文件路由，默认路由为index.vue，页面支持
.vue,.js,.jsxor.tsx - plugins 插件目录，nuxt将自动注册插件
- public 网站根目录
- server 服务端路由
删除app.vue 中的NuxtWelcome 组件，新增 <NuxtPage />
<template>
<div>
<NuxtPage />
</div>
</template>新增pages/index.vue
<template>
<div>
<h1>Index Page</h1>
</div>
</template>
<script setup>
import {} from "vue";
</script>
<style scoped></style>浏览器打开 http://localhost:3000
Next generation utility-first CSS framework.
pnpm add -D nuxt-windicss @windicss/plugin-animations修改nuxt.config.ts如下
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
buildModules: [
'nuxt-windicss',
],
})新增windi.config.ts文件
import { defineConfig } from "windicss/helpers";
export default defineConfig({
preflight: false,
extract: {
include: ["**/*.{vue,html,jsx,tsx}"],
exclude: ["node_modules", ".git"],
},
});修改pages/index.vue如下
<template>
<div>
<h1 class="text-red-600">Index Page</h1>
</div>
</template>
<script setup>
import {} from "vue";
</script>
<style scoped></style>
浏览器打开http://localhost:3000/，效果如下
Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (100+ icon sets, 100,000+ icons). SVG framework, React, Vue and Svelte components!
pnpm add @iconify/vue -D修改pages/index.vue如下
<template>
<div>
<h1 class="text-red-600">Index Page</h1>
<Icon icon="mdi-light:home" />
</div>
</template>
<script setup>
import { Icon } from "@iconify/vue";
</script>
<style scoped></style>
浏览器打开 http://localhost:3000/
pnpm add -D sass element-plus @element-plus/icons-vue unplugin-vue-components unplugin-auto-import新增assets/scss/index.scss文件，添加如下内容
@use "element-plus/dist/index.css";修改nuxt.config.ts如下
import { defineNuxtConfig } from "nuxt";
const lifecycle = process.env.npm_lifecycle_event;
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
//css
css: ["~/assets/scss/index.scss"],
// build
build: {
transpile: lifecycle === "build" ? ["element-plus"] : [],
},
// build modules
buildModules: ["nuxt-windicss"],
});修改pages/index.vue文件如下
<template>
<div>
<h1 class="text-red-600">Index Page</h1>
<Icon icon="mdi-light:home" />
<el-button class="m-4" @click="hello">Hello</el-button>
</div>
</template>
<script setup>
import { Icon } from "@iconify/vue";
import { ElButton } from "element-plus";
</script>
<style scoped></style>
浏览器打开 http://localhost:3000/
The Vue Store that you will enjoy using
pnpm add -D pinia @pinia/nuxt @nuxtjs/composition-api修改nuxt.config.ts中的buildModules内容如下
import { defineNuxtConfig } from "nuxt";
const lifecycle = process.env.npm_lifecycle_event;
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
//css
css: ["~/assets/scss/index.scss"],
// build
build: {
transpile: lifecycle === "build" ? ["element-plus"] : [],
},
// build modules
buildModules: ["nuxt-windicss", "@pinia/nuxt"],
});pnpm add -D cross-env修改package.json,修改generate命令
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview"
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"eslint": "^8.15.0",
"eslint-config-standard": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.0.0",
"nuxt": "3.0.0-rc.3",
"postcss": "^8.4.13",
"sass": "^1.51.0",
"tailwindcss": "^3.0.24"
},
"dependencies": {
"cross-env": "^7.0.3",
"element-plus": "^2.2.0"
}
}
新增Dockerfile文件如下
FROM node:14-alpine
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json pnpm-lock.yaml /usr/src/app/
RUN RUN npm i -g pnpm --registry=https://registry.npm.taobao.org
RUN pnpm install --shamefully-hoist
RUN pnpm run build
COPY ./.output /usr/src/app/.output
EXPOSE 9000
ENTRYPOINT ["pnpm", "run", "start"]
新增docker-compose.yml文件如下
version: "3"
services:
service_nuxt:
image: nuxtapp:0.0.0
container_name: nuxtapp
build:
context: ./
ports:
- "3000:3000"
environment:
- TZ: Asia/Shanghai启动容器
docker-compose up -d --build停止容器
docker-compose stop