前言

最近搞了個(gè)服務(wù)器，想著自己做個(gè)網(wǎng)站的腳手架，因?yàn)樽约菏羌兦岸诵率?#xff0c;而且半路出家，中途踩了好多坑，準(zhǔn)備寫5篇給各位大佬們分享一下，如何從0搭建個(gè)人網(wǎng)站

服務(wù)器購(gòu)買與環(huán)境搭建

前端工程umi腳手架搭建

服務(wù)器node前端啟動(dòng)文件

服務(wù)器node后端編寫

數(shù)據(jù)庫(kù)搭建

框架選取

選擇了umi框架（react），因?yàn)閡mi框架非常成熟，而且可以直接打包成可以直接線上服務(wù)器的版本

具體可以參考官方文檔https://umijs.org/zh-CN/docs/getting-started

框架搭建

新建一個(gè)文件夾，打開(kāi)cmd，輸入

yarn create @umijs/umi-app

?

等待漫長(zhǎng)的加載，之后打開(kāi)項(xiàng)目的根目錄，需要注意的是下面兩個(gè)文件

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

package.json文件，主要是打包配置，可以配置本地開(kāi)發(fā)環(huán)境的環(huán)境、線上的打包環(huán)境和一些常用的命令

.umirc.ts的說(shuō)明

以下是我的.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可以在外部文件進(jìn)行配置

（比如我這個(gè)，在./config目錄下新建一個(gè).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是跳轉(zhuǎn)到組件/pages/login，然后定義其他路由，這里其他頁(yè)面還使用了layout布局，具體可以參考umi文檔

package.json的說(shuō)明

{"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包都已經(jīng)掛載好了，可以直接復(fù)制粘貼

這個(gè)時(shí)候項(xiàng)目就算配置好了，我們?cè)诮K端執(zhí)行yarn install進(jìn)行npm包的下載

下載好后，執(zhí)行yarn start，就可以在本機(jī)localhost的8000端口起你的前端服務(wù)了，雖然現(xiàn)在是一片空白

如何打包

寫好后，執(zhí)行，yarn?build，進(jìn)行打包，打包好了后項(xiàng)目根目錄會(huì)多一個(gè)dist文件夾

這里就是umi把需要的文件和代碼通通打包成這三個(gè)文件，我們需要把這個(gè)文件夾給上傳到我們的服務(wù)器（上傳文件到服務(wù)器可以參考我的上一篇文章個(gè)人網(wǎng)站搭建保姆級(jí)教程（1）-服務(wù)器購(gòu)買與環(huán)境搭建_皮寧瀾的博客-CSDN博客）

Xftp可以直接拖拽上傳

之后，在服務(wù)器上將前端工程的服務(wù)構(gòu)建起來(lái)即可（可以參考我的下一篇教程，服務(wù)器node前端啟動(dòng)文件）

?

?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。