前言
Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架,它可以自动生成对应的路由配置和异步数据加载等。使用 Nuxt 可以快速搭建一个具备良好 SEO、SSR、PWA 等特性的 Web 应用。
安装
首先,需要在本地安装 Node.js
和 npm
。然后,在命令行中运行以下命令:
--- ------- -------- ---
这样就可以使用 npx
来快速生成一个新的 Nuxt.js 项目了:
--- --------------- ----------
这个命令会询问你选择一些选项,如 UI 框架、代码风格等,也可以直接默认设置。完成后,进入项目目录并启动开发服务器:
-- ---------- --- --- ---
这时候可以访问 http://localhost:3000
就可以看到 Nuxt.js 自动生成的欢迎页面了。
目录结构
在新创建的项目中,可以看到以下目录结构:
- --- ------ --- ---------- --- ------- --- ---------- --- ----- --- ------- --- ------ --- ----- --- -------------- --- ------------
assets
:放置应用程序的非 JavaScript 和 CSS 资源文件,如图片、字体等。components
:组件目录,用于存放应用的 Vue 组件。layouts
:布局目录,用于存放应用的模板文件。middleware
:中间件目录,用于存放应用的中间件函数。pages
:页面目录,用于存放应用的路由对应的 Vue 组件。plugins
:插件目录,用于存放应用的插件。static
:静态文件目录,用于存放应用的静态资源文件,如图片、字体等。store
:状态管理目录,用于存放 Vuex 的 store 文件。nuxt.config.js
:Nuxt.js 的配置文件,其中可以配置应用程序的各种选项。package.json
:应用程序的依赖和脚本信息。
页面路由
在 Nuxt.js 中,每个 .vue
文件都被视为一个页面,并且自动生成对应的路由配置。例如,如果在 pages
目录中创建了一个名为 about.vue
的文件,那么访问 /about
就可以看到这个页面了。
同时,Nuxt.js 还支持动态路由,例如:
------ --- ------ ------ --------- --- ------ ------ -------
上面的例子中,_slug
和 _id
都是动态路由参数,在实际使用时可以使用 $route.params.slug
和 $route.params.id
来获取对应的值。
数据获取
在 Nuxt.js 中,可以使用 asyncData
函数来异步获取数据并传递给页面组件。例如:
---------- ----- ------ ----- ------- ---- --- ----------- -- ------ ----------------- ---------- ------- ----- ------ ----------- -------- ------ ------- - ----- ----------- ------ -- - ----- --- - ----- -------------------------------------------------------- ------ - ------ -------- ------ -------- - -- - ---------
上面的例子中,使用了 $axios
来发起 HTTP 请求获取数据,并将数据通过返回值传递给页面组件。
插件
Nuxt.js 支持使用插件来扩展应用程序的功能。例如,可以使用 vue-lazyload
插件来实现图片懒加载:
--- ------- ------------ ----------------------------------------------------------- ---------- ---------------------------------------------------------------------------------------