Nuxt + Vue-Element - 通用应用框架

Nuxt / Vue-Element - 通用应用框架

文章目录
安装 - NuxtJS | Nuxt.js 中文网
介绍 | vue-element-admin (panjiachen.github.io)

一、入门

1.1 模板代码拉取

直接撸起袖子，先搞下来一个模板代码

npx create-nuxt-app 02demo

输入后，里面有非常多的选项，就是问你要用哪些框架，一些安全选择等等

然后输入命令 npm run dev 跑起来

1.2 目录结构介绍

nuxt.config.js，就按需配置

export default {
  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: '02demo',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    // 该配置项用于定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // 该配置项允许您将 Nuxt 模块添加到项目中
  ],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    // Nuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块，以减少应用 bundle 的体积。如果你的应用依赖第三方模块，这个配置项是十分实用的
  }
}

更完整的目录情况

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

1.3 客户端渲染/服务端渲染

客户端渲染和服务端渲染的区别 - 吴小明- - 博客园 (cnblogs.com)

二、基本使用

在学习Nuxt的时候，可以套用vue-element-admin的框架模板，即使在工作中，哪一块不会的代码，直接copy过去就完了

官方文档上已经有很多的使用方法了，我这里只说我会经常用的，毕竟我是后端工程师

2.1 场景一：新写一个模块及页面

两步骤

1. 在views文件夹将页面目录及页面准备好
2. 写路由

页面准备

写路由

效果图

2.2 场景二：后端数据交互（Axios）

首先有几个知识点需要明确，从官网的资料上看，基本前后端的一个交互流程

1. UI 组件交互操作；
2. 调用统一管理的 api service 请求函数；
3. 使用封装的 request.js 发送请求；
4. 获取服务端返回；
5. 更新 data；

request.js

@/utils/request.js，是基于axios的封装，用来统一处理 POST，GET 等请求参数，请求头，以及错误提示信息等。它封装了全局 request拦截器、response拦截器、统一的错误处理、统一做了超时处理、baseURL设置等

关于返回码的问题

根据request.js文件中的描述，正常我们要求的返回码是200就算正常获取后台信息，但是默认vue-element里面是20000，如下所示，所以如果不是这个返回码，就会报错

正式的代码

先把后台写好

// 省略Person实体类以及OnResult同意返回码类........

@RestController
@CrossOrigin
public class DemoController {
        @GetMapping("/demo01/getListOf")
        public OnResult getListOf(){
            List<Person> personList = new ArrayList<>();
            personList.add(new Person(1,"test01"));
            personList.add(new Person(2,"test02"));
            HashMap<String, List> listHashMap = new HashMap<>();
            listHashMap.put("personList",personList);
            return new OnResult(20000,"ok",personList);
        }
}

然后是前端

api目录

import request from "@/utils/request";

export default {
  getListOf() {
    return request({
      url: "/demo01/getListOf",
      method: "get"
    });
  },
}

index.vue文件

<template>
  <div>
    <h1>测试Demo01页面h1>
    <table>
      <tr>
        <th>编号th>
        <th>姓名th>
      tr>
      <tr v-for="person in personList" :key="person.id">
        <td>{{ person.id }}td>
        <td>{{ person.name }}td>
      tr>
    table>
  div>
template>

<script>
import dddd from "@/api/demo/demoapi";

export default {
  data() {
    return {
      personList: [],
    };
  },
  created() {
    //   内存准备完毕,页面尚未渲染
    // alert("hello created");
    this.getDemoList();
  },
  mounted() {
    //   内存准备完毕,页面渲染成功
  },
  methods: {
    getDemoList() {
      dddd.getListOf().then((response) => {
        console.log(response);
        this.personList = response.data;
      });
    },
  },
};
script>

注意，这里有几个文件要提前修改

1. .env.development —— 修改请求的地址
2. mock-server.js —— 忘记是干嘛的了，反正也是跟上面配套用

2.3 场景三：XXXX

不写了，看上面的文章链接

结束