Vue.js 框架源码与进阶 - NuxtJS案例 - Realworld项目 - 项目初始化

最新推荐文章于 2024-08-22 08:20:07 发布

时光海丶

最新推荐文章于 2024-08-22 08:20:07 发布

阅读量557

点赞数

分类专栏：大前端文章标签： vue NuxtJS realworld

本文链接：https://blog.csdn.net/qq_45149256/article/details/112181901

版权

NuxtJS案例 - Realworld项目 - 项目初始化

11.1 案例介绍
- 案例相关资源
11.2 项目初始化

11.1 案例介绍

案例相关资源

在这里插入图片描述

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

11.2 项目初始化

创建项目

# 创建项目目录
mkdir realworld-nuxtjs

# 进入项目目录
cd realworld-nuxtjs

# 生成 package.json 文件
npm init -y

# 安装 nuxt 依赖
npm install nuxt

在 package.json 中添加启动脚本：

"scripts": {
   
"dev": "nuxt"
}

创建 pages/index.vue

<template>
  <div class="home">首页</div>
</template>

<script>
export default {
   
  name: 'HomePage',
}
</script>

<style>

</style>

启动服务：

npm run dev

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

导入样式资源

页面模板：https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INS
TRUCTIONS.md

在这里插入图片描述

<!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on -->
<link href="//code.ionicframework.com/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">

需要三个样式资源，但这三个资源都在国外，建议将其本土化提高其加载速度：

<!-- Import Ionicon icons & Google Fonts our Bootstrap theme relies on -->
<!-- 字体图标 样式文件 使用jsdelivr加速 -->
<!-- <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css"> -->
<link href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<!-- googleapis 谷歌字体文件 国内自动支持 -->
<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 -->
<!-- 自定义 CSS 样式文件 直接下载下来保存到 static/index.css -->
<!-- <link rel="stylesheet" href="//demo.productionready.io/main.css"> -->
<link rel="stylesheet" href="/index.css">

Nuxt.js 默认的应用模板：

<!DOCTYPE html>
<html {
   {
    HTML_ATTRS }}>
  <head {
   {
    HEAD_ATTRS }}>
    {
   {
    HEAD }}
  </head>
  <body {
   {
    BODY_ATTRS }}>
    {
   {
    APP }}
  </body>
</html>

视图 - 模板：app.html

<!DOCTYPE html>
<html {
   {
    HTML_ATTRS }}>
  <head {
   {
    HEAD_ATTRS }}>
    {
   {
    HEAD }}
    <!-- 样式资源 -->
    插入本土化后的样式资源...
    <!-- /样式资源 -->
  </head>
  <body {
   {
    BODY_ATTRS }}>
    {
   {
    APP }}
  </body>
</html>

配置布局组件

页面模板：https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INS
TRUCTIONS.md

在这里插入图片描述

Header：

<nav class="navbar navbar-light">
 <div class="container">
   <a class="navbar-brand" href="index.html">conduit</a>
   <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>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="">
         <i class="ion-compose"></i>&nbsp;New Post
       </a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="">
         <i class="ion-gear-a"></i>&nbsp;Settings
       </a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="">Sign up</a>
     </li>
   </ul>
 </div>
</nav>

Footer：

<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>

Nuxt.js 默认布局的源码如下：

<template>
 <nuxt />
</template>

视图 - 布局：pages/layout/index.vue

<template>
  <div>
    <!-- 顶部导航栏 -->
    插入Header...
    <!-- /顶部导航栏 -->

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

    <!-- 底部 -->
    插入Footer...
    <!-- /底部 -->
  </div>
</template>

<script>
export default {
   
  name: 'LayoutIndex'
}
</script>

<style>

</style>

自定义路由规则：nuxt.config.js

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

module.exports = {
   
  router: {
   
    // 自定义路由表规则
    // routes: 一个数组，路由配置表
    // resolve: 解析路由组件路径
    extendRoutes(routes, resolve) {
   
      // 清除 Nuxt.js 基于 pages 目录默认生成的路由表规则
      routes.splice(0)
      // 添加自己的路由规则
      routes.push(...[
        {
   
          path: '/',
          component: resolve(__dirname, 'pages/layout/')  
        }
      ])
    }    
  }
}

在这里插入图片描述

删除 pages/index.vue ，添加首页：pages/home/index.vue

<template>
  <div>Home</div>
</template>

<script>
export default {
   
  name: 'HomeIndex'
}
</script>

<style>

</style>

配置路由表：nuxt.config.js

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

在这里插入图片描述

Home：

<div class="home-page">

  <div class="banner">
    <div class="container">
      <h1 class="logo-font">conduit</h1>
      <p>A place to share your knowledge.</p>
    </div>
  </div>

  <div class="container page">
    <div class="row">

      <div class="col-md-9">
        <div class="feed-toggle">
          <ul class="nav nav-pills outline-active">
            <li class="nav-item">
              <a class="nav-link disabled" href="">Your Feed</a>
            </li>
            <li class="nav-item">
              <a class