vue3-ts-admin脚手架搭建

字数统计: 1.8k字   |   阅读时长≈ 7分

开篇先说句废话。毕竟子曾经曰过 ——人与人的相处，都是从废话开始的。(孔子: 我没说过!)

因为有人反馈我的文章错别字特别多。我很欣慰，能收到建议说明我的东西还有人看。希望大家能保持,有什么建议尽管放心大胆的提，在我这，千万不要有什么心理压力，在乎面子不面子的，反正我也没打算真要改

话说这么多年，我的文理科也一直没闲着，一直在忙着相互切磋和较量。————比谁学的最差？后来发现，经过它们多年承让，两者早已经没有了最差，只有更差！所以写错几个字纯属无心，我先尽量克制自己少写吧，毕竟它也跟随了我多年，已经有感情了。所以希望大家先忍一忍，让我慢慢跟它告别。在不影响阅读、不产生歧义的前题下就当做防伪标识来看就好。比如你想分辨一篇文章是不是我原创就显得很容易，看有没有错别字就能知道。是不是比毛爷爷上面的安全线容易辨别多了？这么一想，是不是感觉就好多了？！好了不贫了，开！始！正！题！吧！

–============= 我是转入正题的分割线 ================–

  • 主要前端技术栈：vue3、typesciprt、elementPlus

  • 后端技术栈：Nodejs,Express

前端项目的安装与启动

1
2
pnpm i
pnpm dev

如何新建静态路由页面 test.vue

  1. router/modules/test.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export default {
  path: "/test",
  redirect: "/test/index",
  meta: {
    icon: "informationLine",//离线图标地址 https://icones.js.org/collection/twemoji
    title: "测试页面",
    // showLink: false,
    rank: 11 //页面层级排序权重值，越大越靠后
  },
  children: [
    {
      path: "/test/index",
      name: "Test",
      component: () => import("@/views/test.vue"),
      meta: {
        title: "测试页面",
        showParent: true //当只有一个菜单时，需要在目录中展示在二级菜单里设为true，当只有一个菜单时默认false，有多个二级菜单时默认true
      }
    }
  ]
} as RouteConfigsTable;
  1. views/test.vue
1
2
3
4
5
6
7
8
9
10
11
12
<script setup lang="ts">
defineOptions({
  name: "Test"
});
</script>

<template>
  <div>test</div>
</template>

<style lang="scss" scoped></style>

如何建动态路由页面

  1. mock/asyncRoutes.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const testAsyncRouter = {
  path: "/async",
  redirect: "/async/index",
  meta: {
    icon: "twemoji:billed-cap",
    title: "动态路由测试页面",
    // showLink: false,
    rank: 11 //页面层级排序权重值，越大越靠后
  },
  children: [
    {
      // path随便写，但前面必须有个 `/`
      path: "/async/index",
      name: "Async",
      // component对应的值前不需要加 / 值对应的是实际业务 `.vue` 或 `.tsx` 代码路径
      component: "async",
      meta: {
        title: "动态路由测试页面",
        showParent: true //当只有一个菜单时，需要在目录中展示在二级菜单里设为true，当只有一个菜单时默认false，有多个二级菜单时默认true
      }
    }
  ]
};

export default [
  {
    url: "/getAsyncRoutes",
    method: "get",
    response: () => {
      return {
        success: true,
        data: [permissionRouter, testAsyncRouter]
      };
    }
  }
] as MockMethod[];
  1. 建view页面views/async.vue

pure-admin-backend 启动后端

  1. mac设备配置mySql 我用的8.0.20macOS 10.15 (x86, 64-bit), DMG Archive

  2. 下载老版sequelpro

安装和启动

  • 来到项目的 src/config/index.ts 文件，查看第 53 行，将 mysql 的账号密码跟您的 mysql 保持一致
1
2
3
4
5
6
7
mysql: {
    host: "localhost",//访问的Swagger地址要与host相同,避免出现CORS跨域问题
    charset: "utf8_general_ci",
    user: "root",
    password: "zlj@123123",
    database:'mysql'//指定要操作哪个数据库 // 如果没提前创建数据库，会报错 ER_BAD_DB_ERROR: Unknown database 'weixin'
}
1
2
pnpm i
pnpm start

自动启动Swagger文件 http://localhost:3000/

  • 打开Swagger地址后先注册一个用户

  • 用新注册的用户登陆后从 response 中找到 token

  • 在页面项部的 Authorize 进行授权，详见 pure-admin-backend文档（如更新和删除功能正常调用并返回，后端服务设置启动成功）

下图为我的mySql配置信息

点击查看大图

如何与后端联调

  1. 本地开发的话，我们来到 vite.config.ts (opens new window)，参考下面代码配置本地跨域代理即可
1
2
3
4
5
6
7
8
proxy: {
  "/api": {
    // 这里填写后端地址
    target: "http://127.0.0.1:3000",
    changeOrigin: true,
    rewrite: path => path.replace(/^\/api/, "")
  }
}
  1. 配置好上面的跨域代理后，来到 src/api (opens new window)目录，这里我们先新建一个 utils.ts 文件用来配置环境，参考下面代码
  • 这里又分两种写法

第一种（也是最常用的一种，满足大多数场景，首选这种写法哦）：比如后端使用 spring cloud 微服务架构，不同服务可能会部署在不同机器上，这时候前端必定产生跨域，推荐部署前端项目首选 nginx (opens new window)，可以利用 nginx 的代理转发功能来解决跨域问题

1
export const baseUrlApi = (url: string) => `/api/${url}`;

第二种：前端打包直接丢给后端，放到后端项目里一起部署，协议、主机、端口都相同了，就没有跨域问题

1
2
3
4
5
// utils.ts
export const baseUrlApi = (url: string) =>
  process.env.NODE_ENV === "development"
    ? `/api/${url}`
    : `http://127.0.0.1:3000/${url}`;
  1. 写完上面的 utils.ts 后，继续在 src/api (opens new window)目录，我们再建一个 user.ts 文件，导出这个接口，供页面调用，参考下面代码
1
2
3
4
5
6
7
8
import { http } from "@/utils/http";
import { baseUrlApi } from "./utils";

/** 登录 */
export const getLogin = (data?: object) => {
  return http.request<any>("post", baseUrlApi("login"), { data });
};

最后将前端 (frontend) 项目原mock/login.ts 的文件删除 重新启动项目 这里登陆接口用到的就是 admin-backend 后端重新启动前端 这时即可登陆

  1. 第二个代理我们用一个查询手机号归属地免费接口

https://v.api.aa1.cn/api/phone/guishu-api.php

打包部署

  • 配置.env.production
1
2
3
4
5
6
7
8
9
10
11
# 线上环境平台打包路径
VITE_PUBLIC_PATH = ./

# 线上环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
VITE_ROUTER_HISTORY = "hash"

# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
VITE_CDN = true

# 是否启用gzip 开始填 “gzip” 不开启 “none”
VITE_COMPRESSION = "gzip"
  • 开始打包
1
pnpm build

nginx

1
2
3
4
5
brew info nginx ## 查看你的系统是否安装了nginx，并把dist文件放到 nginx 指定目录
# 如果没有安装nginx 使用下面命令安装 已装的自行忽略
brew install nginx 
# 配置好尝试启动 http://localhost:8080/dist/
nginx

不熟悉nginx的点这里查看mac安装Nginx及使用

websocket的使用

websoket的使用可以参考我代码仓库welcome页面的demo

useWebSocket

以上内容收录于->我的代码仓库

分前端(frontend)和后端(backend)目录,欢迎来提 Issues!

赏

谢谢你请我吃糖果

微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

一位来自祖国最东端乌苏里江边境的
挨踢攻城狮。
希望在这里结识更多爱好前端的同学！
初次见面，请多多打赏！