前言

最近搞了個服務器，想著自己做個網站的腳手架，因為自己是純前端新手，而且半路出家，中途踩了好多坑，準備寫5篇給各位大佬們分享一下，如何從0搭建個人網站

服務器購買與環境搭建

前端工程umi腳手架搭建

服務器node前端啟動文件

服務器node后端編寫

數據庫搭建

框架選取

選擇了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前端啟動文件）

?

?

總結

以上是生活随笔為你收集整理的个人网站搭建保姆级教程（2）- 前端工程umi脚手架搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。