Udemy - Nuxt JS with Laravel API - Building SSR Vue JS Apps 笔记9 Project - Laravel API with Nuxt JS frontend client

Intro

Laravel SetUp

新建一个Laravel Application，命名为backend

用laragon新建laravel的教程： https://www.cnblogs.com/dzkjz/p/12361718.html

env配置数据库设置。

删除Controllers/Auth文件夹如果有的话，因为需要从头定义auth的逻辑。

删除welcome.blade.php ，清空api.php 及web.php 所有routes都清空。

执行

php artisan migrate

Nuxt Setup

参照 https://nuxtjs.org/guide/installation

terminal切换到nuxt根目录【没有就自己新建一个目录就行了】

执行：

npx create-nuxt-app frontend

选项参考：

安装完成：

接下来：

最后执行：

npm run dev

打开 http://localhost:3000/ 效果：

Using Bootstrap jQuery via CDN

打开刚刚新建的Nuxt 项目

nuxt.config.js修改为：

export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      {charset: 'utf-8'},
      {name: 'viewport', content: 'width=device-width, initial-scale=1'},
      {hid: 'description', name: 'description', content: process.env.npm_package_description || ''}
    ],
    link: [
      {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'},
      {rel: 'stylesheet', href: 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css'},
    ],
    script: [
      {src: 'https://code.jquery.com/jquery-3.5.1.slim.min.js', type: 'text/javascript'},
      {src: 'https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js', type: 'text/javascript'},
      {src: 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js', type: 'text/javascript'},
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: {color: '#fff'},
  /*
  ** Global CSS
  */
  css: [],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {},
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    }
  }
}

增加部分：

Navigation

拷贝Bootstrap官方文档的一个Navbar示例代码：

新建components/Navbar.vue文件，上面拷贝的代码做了一些修改。

然后layouts/default.vue文件：

OK，

不过另外再对pages/index.vue做一些修改，删除内容，移动style内容到assets/styles/main.css文件【没有就新建一个】

main.css还没有设置到app中，需要在nuxt.config.js中做如下修改：

打开 http://localhost:3000/ 效果如下：

Login and Registration Page

在bootstrap官方文档中复制一个form ：

创建pages/index.vue:

<template>
  <div class="container col-md-6 mt-5">
    <h2>Login</h2>
    <br>
    <form>
      <div class="form-group">
        <label>Email address</label>
        <input type="email" class="form-control">
        <small class="form-text text-danger">Show errors here</small>
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control">
        <small class="form-text text-danger">Show errors here</small>
      </div>
      <button type="submit" class="btn btn-primary">Login</button>
    </form>
    <br>
    <p>Don't have an account?
      <nuxt-link to="/register">Register</nuxt-link>
    </p>
  </div>
</template>

<script>
  export default {
    name: "login"
  }
</script>

<style scoped>

</style>

创建pages/register.vue:

<template>
  <div class="container col-md-6 mt-5">
    <h2>Register</h2>
    <br>
    <form>
      <div class="form-group">
        <label>First Name</label>
        <input type="text" class="form-control" placeholder="Enter your first name">
        <small class="form-text text-danger">Show errors here</small>
      </div>
      <div class="form-group">
        <label>Last Name</label>
        <input type="text" class="form-control" placeholder="Enter your last name">
        <small class="form-text text-danger">Show errors here</small>
      </div>
      <div class="form-group">
        <label>Email address</label>
        <input type="email" class="form-control" placeholder="Enter your email address">
        <small class="form-text text-danger">Show errors here</small>
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" placeholder="Enter your password">
        <small class="form-text text-danger">Show errors here</small>
      </div>
      <div class="form-group">
        <label>Confirm Password</label>
        <input type="password" class="form-control" placeholder="Confirm your password">
        <small class="form-text text-danger">Show errors here</small>
      </div>
      <button type="submit" class="btn btn-primary">Register</button>
    </form>
    <br>
    <p>Already have an account?
      <nuxt-link to="/login">Login</nuxt-link>
    </p>
  </div>
</template>

<script>
  export default {
    name: "register"
  }
</script>

<style scoped>

</style>