已发布·持续改进
Framework · 2014 年发布
Vue.js 是用声明式组件构建界面的渐进式 JavaScript 框架；Nuxt 在其之上提供路由、服务端渲染和服务端 API。
Vue.js 是由尤雨溪(Evan You)创建、于 2014 年首次发布的开源 JavaScript 框架，用于构建用户界面。它将基于 HTML 的模板与响应式状态结合，数据变化时页面会自动更新；其基本单位是单文件组件(.vue)，把模板、脚本和样式放在同一个文件中。Nuxt 是构建在 Vue 之上的全栈框架，内置基于文件的路由、自动导入、服务端渲染，以及由 Nitro 引擎驱动的服务端 API。
Vue 可以渐进式地引入：小到用一个 script 标签为现有页面的一部分添加交互，大到用 Vite 构建完整的单页应用。它特别适合管理后台、数据看板和内部工具等交互较多的界面。如果搜索引擎可见性和首屏速度很重要，或者希望在一个项目中同时管理页面和 API，Nuxt 提供服务端渲染、静态生成和服务端路由，并可部署到 Node.js 服务器、静态托管等多种环境。
初学者可以先安装 Node.js，再按照官网的交互式教程和指南学习响应式、组件和模板语法。之后用 npm create vue@latest 创建基于 Vite 的项目，动手做出真实的界面；当需要路由约定和服务端渲染时，再转向 Nuxt。状态管理用 Pinia、单元测试用 Vitest 是官方推荐的组合。
用 ref、reactive 和 computed 声明的状态会追踪依赖，值变化时只重新渲染使用它的那部分页面。
模板、脚本和样式写在同一个 .vue 文件中，开箱即用地支持作用域样式和 TypeScript。
相关逻辑按函数组织，并以组合式函数(composable)复用，即使是大型组件也能按功能保持清晰。
基于文件的路由、自动导入、服务端渲染、静态生成以及 server 目录中的 API 路由，无需额外配置即可使用。
Vue 和 Nuxt 的工具运行在 Node.js 上。从 nodejs.org 安装 LTS 版本，并确认 node 和 npm 能显示版本号。
node --version && npm --version官方脚手架 create-vue 会依次询问是否添加 TypeScript、Vue Router、Pinia、Vitest 等。在生成的目录中运行 npm install 和 npm run dev，即可启动 Vite 开发服务器。
npm create vue@latest使用 Nuxt 时，用 nuxi 创建新项目。进入生成的目录并运行 npm run dev，开发服务器默认在 http://localhost:3000 启动。
npx nuxi@latest init my-nuxt-appsrc/App.vue 是 create-vue 项目的根组件。script setup 块用 ref(0) 创建响应式的 count；模板用双大括号显示它，并通过 @click 在每次点击时加 1。count 变化时，Vue 只重新渲染依赖它的部分。运行 npm run dev 后保存文件，修改会立即反映到浏览器中。
src/App.vue
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>
<template>
<h1>Hello, Vue!</h1>
<button @click="count++">Clicked {{ count }} times</button>
</template>
npm create vue@latest hello-vue && cd hello-vue && npm install && npm run dev共六章，带你从安装一步步了解 Vue.js · Nuxt 的核心概念。
在这里提问、分享经验，交流关于 Vue.js · Nuxt 的看法。
还没有讨论。来发起第一个吧。
0 条评论
登录 · 登录后即可发表评论。
来发表第一条评论吧。