Nuxt.js 综合案例

最新推荐文章于 2022-06-22 11:47:27 发布

进阶__前端

最新推荐文章于 2022-06-22 11:47:27 发布

阅读量607

点赞数

分类专栏：服务端渲染 vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_38074118/article/details/112613315

版权

本文详细介绍了如何使用Nuxt.js构建RealWorld项目，涵盖创建项目、导入样式、封装请求模块、使用vuex、数据持久化、处理权限、SEO优化和插件配置等关键步骤。通过实例，读者将深入理解Nuxt.js的实践应用。

摘要由CSDN通过智能技术生成

案例介绍

案例名称：RealWorld
一个开源的学习项目，目的是帮助开发者开始学习到新技能
nuxt.js 官网： https://zh.nuxtjs.org/

GitHub仓库：https://github.com/gothinkster/realworld
在线示例：https://demo.realworld.io/#/
接口文档：https://github.com/gothinkster/realworld/tree/master/api
页面模板：https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INS
TRUCTIONS.md

创建项目

创建项目目录 mkdir realworld-nuxtjs
进入项目目录 cd realworld-nuxtjs
生成 package.json 文件 npm init -y
安装 nuxt 依赖 npm install nuxt

在 package.json 中添加启动脚本：
创建 pages/index.vue ：
启动服务：

创建项目目录 mkdir realworld-nuxtjs
进入项目目录 cd realworld-nuxtjs
生成 package.json 文件 npm init -y
安装 nuxt 依赖 npm install nuxt
“scripts”: { “dev”: “nuxt” }

<template> <div> <h1>Home Page</h1> </div> </template>
 <script> export default {
    name: 'HomePage' }</script>

在浏览器中访问 http://localhost:3000/ 测试。

导入样式资源

增加app.html，并倒入样式资源

<!DOCTYPE html>
<html {
   {
    HTML_ATTRS }}>
  <head {
   {
    HEAD_ATTRS }}>
    {
   {
    HEAD }}
    <!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on -->
    <link href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
    <!-- Import the custom Bootstrap 4 theme from our hosted CDN -->
    <!-- <link rel="stylesheet" href="//demo.productionready.io/main.css"> -->
    <link rel="stylesheet" href="/index.css">
  </head>
  <body {
   {
    BODY_ATTRS }}>
    {
   {
    APP }}
  </body>
</html>

配置布局组件
增加pages/layout/index.vue

<template>
  <div>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-light">
      <div class="container">
        <!-- <a class="navbar-brand" href="index.html">conduit</a> -->
        <nuxt-link
          class="navbar-brand"
          to="/"
        >Home</nuxt-link>
        <ul class="nav navbar-nav pull-xs-right">
          <li class="nav-item">
            <!-- Add "active" class when you're on that page" -->
            <!-- <a class="nav-link active" href="">Home</a> -->
            <nuxt-link
              class="nav-link"
              to="/"
              exact
            >Home</nuxt-link>
          </li>
          <template v-if="user">
            <li class="nav-item">
              <nuxt-link
                class="nav-link"
                to="/editor"
              >
                <i class="ion-compose"></i>&nbsp;New Post
              </nuxt-link>
            </li>
            <li class="nav-item">
              <nuxt-link
                class="nav-link"
                to="/settings"
              >
                <i class="ion-gear-a"></i>&nbsp;Settings
              </nuxt-link>
            </li>
            <li class="nav-item">
              <nuxt-link class="nav-link" to="/profile/123">
                <img
                  class="user-pic"
                  :src="user.image"
                >
                {
   {
    user.username }}
              </nuxt-link>
            </li>
          </template>

          <template v-else>
            <li class="nav-item">
              <nuxt-link
                class="nav-link"
                to="/login"
              >
                Sign in
              </nuxt-link>
            </li>
            <li class="nav-item">
              <nuxt-link
                class="nav-link"
                to="/register"
              >
                Sign up
              </nuxt-link>
            </li>
          </template>
        </ul>
      </div>
    </nav>
    <!-- /顶部导航栏 -->

    <!-- 子路由 -->
    <nuxt-child/>
    <!-- /子路由 -->

    <!-- 底部 -->
    <footer>
      <div class="container">
        <a href="/" class="logo-font">conduit</a>
        <span class="attribution">
          An interactive learning project from <a href="https://thinkster.io">Thinkster</a>. Code &amp; design licensed under MIT.
        </span>
      </div>
    </footer>
    <!-- /底部 -->
  </div>
</template>

<script>
import {
    mapState } from 'vuex'

export default {
   
  name: 'LayoutIndex',
  computed: {
   
    ...mapState(['user'])
  }
}
</script>

<style>

</style>

新增nuxt.config.js 配置

/**
 * Nuxt.js 配置文件
 */


/**
 * Nuxt.js 配置文件
 */

module.exports = {
   
  router: {
   
    linkActiveClass: 'active',
    // 自定义路由表规则
    extendRoutes (routes, resolve) {
   
      // 清除 Nuxt.js 基于 pages 目录默认生成的路由表规则
      routes.splice(0)

      routes.push(...[
        {
   
          path: '/',
          component: resolve(__dirname, 'pages/layout/'),
          children: [
            {
   
              path: '', // 默认子路由
              name: 'home',
              component: resolve(__dirname, 'pages/home/')
            },
            {
   
              path: '/login',
              name: 'login',
              component: resolve(__dirname, 'pages/login/')
            },
            {
   
              path: '/register',
              name: 'register',
              component: resolve(__dirname, 'pages/login/')
            },
            {
   
              path:

最低0.47元/天解锁文章

进阶__前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Nuxt.js 综合案例

案例介绍案例名称：RealWorld一个开源的学习项目，目的是帮助开发者开始学习到新技能GitHub仓库：https://github.com/gothinkster/realworld在线示例：https://demo.realworld.io/#/接口文档：https://github.com/gothinkster/realworld/tree/master/api页面模板：https://github.com/gothinkster/realworld-starter-kit/blob
复制链接

扫一扫

专栏目录