个人网站搭建保姆级教程（2）- 前端工程umi脚手架搭建

前言

最近搞了个服务器，想着自己做个网站的脚手架，因为自己是纯前端新手，而且半路出家，中途踩了好多坑，准备写5篇给各位大佬们分享一下，如何从0搭建个人网站

1. 服务器购买与环境搭建
2. 前端工程umi脚手架搭建
3. 服务器node前端启动文件
4. 服务器node后端编写
5. 数据库搭建

框架选取

选择了umi框架（react），因为umi框架非常成熟，而且可以直接打包成可以直接线上服务器的版本

具体可以参考官方文档https://umijs.org/zh-CN/docs/getting-started

框架搭建

新建一个文件夹，打开cmd，输入

yarn create @umijs/umi-app

 

等待漫长的加载，之后打开项目的根目录，需要注意的是下面两个文件

.umirc.ts umi的配置文件，比如代理、路由等等都是在这里配置的

package.json文件，主要是打包配置，可以配置本地开发环境的环境、线上的打包环境和一些常用的命令

.umirc.ts的说明

以下是我的.umirc.ts

import { defineConfig, IConfig } from 'umi';
import routes from './config/.umire.routes';
import proxy from './config/.umirc.proxy';

const config: IConfig = {
  publicPath: './',
  nodeModulesTransform: {
    type: 'none',
  },
  // proxy,
  routes,
  fastRefresh: {},
}

export default config;

 可以像我这样配置，这样routes可以在外部文件进行配置

（比如我这个，在./config目录下新建一个.umire.routes文件，如下）

export default [
  { path: '/login', component: '@/pages/login' },
  {
    path: '/',
    component: '@/layouts/index',
    routes: [
      { exact: true, path: '/', component: '@/pages/home' },
      { path: '/roomList', exact: true, component: '@/pages/roomList' },
      { path: '/user', exact: true, component: '@/pages/user' },
      { path: '/room', exact: true, component: '@/pages/room' },
      { redirect: '/login' },
    ],
  },
];

首先定义了路由/login是跳转到组件/pages/login，然后定义其他路由，这里其他页面还使用了layout布局，具体可以参考umi文档

package.json的说明

{
  "name": "test",
  "version": "1.0.0",
  "description": "pininglan",
  "author": "pininglan",
  "main": "/src/pages/index.ts",
  "private": false,
  "scripts": {
    "start": "umi dev",
    "build": "umi build",
    "postinstall": "umi generate tmp",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,less,md,json}": [
      "prettier --write"
    ],
    "*.ts?(x)": [
      "prettier --parser=typescript --write"
    ]
  },
  "dependencies": {
    "@ant-design/pro-form": "1.7.5",
    "@ant-design/pro-layout": "4.10.2",
    "@ant-design/pro-table": "1.0.22",
    "ahooks": "^3.0.1",
    "antd": "4.6.4",
    "classnames": "^2.3.1",
    "css-vars-ponyfill": "^2.3.2",
    "current-user": "^0.1.36",
    "dva": "^2.4.0",
    "dva-cli": "^0.10.1",
    "echarts": "^5.1.2",
    "echarts-for-react": "^3.0.1",
    "eventemitter3": "^4.0.7",
    "express": "^4.17.3",
    "moment": "^2.22.2",
    "qs": "^6.10.2",
    "react": "^16.8.6",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "^16.8.6",
    "react-keep-alive": "^2.5.2",
    "react-pm-idaas-auth": "^0.1.3",
    "react-pm-utils": "^0.0.54",
    "react-use": "^11.3.2",
    "reconnecting-websocket": "^4.4.0",
    "redux": "^4.0.1",
    "resize-observer-polyfill": "^1.5.1",
    "umi": "^3.5.21"
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@umijs/preset-react": "1.x",
    "@umijs/test": "^3.5.21",
    "lint-staged": "^10.0.7",
    "prettier": "^2.2.0",
    "typescript": "^4.1.2",
    "yorkie": "^2.0.0"
  }
}

这里大部分都不用改，只需要在dependencies和devDependencies下面把一些常用的npm包给挂载好就行了（推荐挂载比如moment、ant design这种常用的包）我这边把常用的npm包都已经挂载好了，可以直接复制粘贴

这个时候项目就算配置好了，我们在终端执行yarn install进行npm包的下载

下载好后，执行yarn start，就可以在本机localhost的8000端口起你的前端服务了，虽然现在是一片空白

如何打包

写好后，执行，yarn build，进行打包，打包好了后项目根目录会多一个dist文件夹

这里就是umi把需要的文件和代码通通打包成这三个文件，我们需要把这个文件夹给上传到我们的服务器（上传文件到服务器可以参考我的上一篇文章个人网站搭建保姆级教程（1）-服务器购买与环境搭建_皮宁澜的博客-CSDN博客）

Xftp可以直接拖拽上传

之后，在服务器上将前端工程的服务构建起来即可（可以参考我的下一篇教程，服务器node前端启动文件）