Nuxt.js 作弊器
本文将探讨 Nuxt 的一些基本要素以及如何在应用程序中使用它们。建议您在学习 Nuxt.js 之前先了解 Vue.js 的基础知识。在开始讲解 Nuxt.js 速查表之前，让我们先来了解一下 Nuxt。
Nuxt.js是一个基于 Vue.js、Node.js、Webpack 和 Babel.js 的免费开源 Web 应用框架。该框架被宣传为“通用应用的元框架”。
让我们来看看Nuxt的一些基本要素：
安装 Nuxt.js
您可以使用 Nuxt 工具包来设置一个新的 Nuxt 项目，也可以从头开始设置。
- 使用 Nuxt 工具包进行设置：
npx create-nuxt-app <name of project>
cd <name of project>
npm install #installs the project default dependencies
npm run dev # serves the application on a local port
- 从零开始搭建：
Create a `package.json` file and add this code:
{
"name": "stater app",
"scripts": {
"dev": "nuxt"
}
}
完成上述操作后，运行npm install --save nuxt以存储 Nuxt 依赖项，然后运行npm run dev以启动应用程序。
Nuxt 目录结构
Assets此文件夹包含未编译的资源和文件，例如 sass 和 less 文件。Static此目录包含未更改的文件，例如图片和文本文件Components这里是我们存储所有可重用组件的地方。layoutNuxt 还具备为应用程序创建多个布局的功能。Middlewares这里是我们编写在页面加载之前运行的函数的地方。PagesNuxt 使用此目录进行路由。Plugins这里是我们配置所有JS插件的地方，例如sweetalert、Carousel等。Store所有 Vuex 文件都保存在这里，用于状态管理。
Nuxt组件
- 路由：就像
router-link在 Vue.js 中使用路由一样，我们也可以nuxt-link在 Nuxt.js 应用中使用路由。我们还可以路由到动态路由：
<nuxt-link :to="'/cats' + cat.id">Get Cat By Id</nuxt-link>
- Nuxt-child：用于在嵌套路由中显示子组件路由：
<template>
<div>
<h1>I am the parent view</h1>
<nuxt-child />
</div>
</template>;
- 错误页面：Nuxt 允许您创建自定义错误页面，以便以更佳的格式显示错误。您可以根据错误代码和错误消息来显示错误。要创建此页面，请
error.vue在 pages 目录中创建一个页面并存储以下代码：
<template>
<h1 v-if="error.statusCode === 500">
Something Went wrong
</h1>
<h1 v-else>An error occurred</h1>
<nuxt-link to="/">Home page</nuxt-link>
</template>
<script>
export default {
props: ['error'],
layout: 'error'
}
</script>
- 布局：您可以为不同的页面定义自定义布局。这就像创建一个简单的 Vue.js 组件一样简单：
<template>
<div class="container">
<nuxt />
</div>
</template>
- Vuex Store：我们还可以在组件中使用 Vuex Store 进行状态管理。Nuxt 会自动将 Vuex 添加到项目组件中，这意味着我们无需手动导入它们。我们可以这样使用它们：
<template>
<button @click="$store.commit('increment')">
{{ $store.state.counter }}
</button>
</template>
Nuxt配置文件
Nuxt 自带一个配置文件。当使用 Nuxt 工具包创建新的 Nuxt 项目时，该文件会根据配置预先填充。以下是一个配置nuxt.config.js文件的示例格式：
export default {
css: [
'bulma/css/bulma.css',
'~/css/main.css'
],
generate: {
routes: function () {
return [
'/users/1',
'/users/2',
'/users/3'
];
}
},
loading: '~/components/loading.vue',
head: {
meta: [{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1'
}
],
link: [{
rel: 'stylesheet',
href: 'https://font.com',
}]
},
plugins: ['~/plugins/vue-notifications']
}
此配置帮助我们配置应用程序文件，例如插件、html head 元素、样式表、javascript CDN 等。
赞助内容：
Nuxt部署方法
Nuxt.js允许我们从三种模式中选择一种来部署我们的应用程序：
- 普遍的，
- 静态生成
- SPA（单页应用程序）。
温泉
此模式使用约定优于配置的文件夹结构和配置文件来组织我们的项目。要使用此模式，请将 nuxt.config 文件中的模式更改为spa。
静止的
这种模式允许页面预渲染成 HTML，从而获得较高的 SEO 和页面加载速度。内容在构建时生成。
普遍的
这种模式会在客户端和服务端同时执行 JavaScript，也称为 SSR（服务端渲染）。所有路由都具有较高的 SEO 和页面加载速度。路由会在发送到客户端之前在服务器端动态渲染。
结论
希望您喜欢这篇文章，并且它对您有所帮助。请访问AdminMart和WrapPixel ，查看 Vue.js 管理后台和网站模板，它们能帮您节省时间、金钱和精力。感谢阅读！
文章来源：https://dev.to/suniljoshi19/nuxt-js-cheat-sheat-2610