前端搭建一個web app 的方法有很多,但是最重要的問題是要使用什么樣的技術(shù)棧鬼譬。在這里就是用最簡單的方式搭建一個網(wǎng)站陨瘩。
準備工作
1腕够、安裝node和npm ,去nodejs中文網(wǎng)下載合適的版本,并安裝舌劳。
安裝node 時帚湘,npm會自動安裝,安裝成功后甚淡,在命令行窗口(cmd或其他)使用下列命令檢查node和npm 的版本
node -v ?
npm -v
如果出現(xiàn) ‘不是內(nèi)部或外部命令’ 的提示大诸,請把node或npm 的安裝目錄設(shè)置為系統(tǒng)環(huán)境變量
2、安裝express應(yīng)用生成器
express 是nodejs 的一個web app 應(yīng)用框架材诽,相當于 python 的django 或 flask 底挫。
安裝npm 后,就可以通過npm 來安裝express脸侥,在命令行窗口中輸入以下命令
npm install express-generator ?-g
express-generator 是express的應(yīng)用生成器建邓,用來構(gòu)建express 應(yīng)用十分方便。
搭建步驟
準備工作結(jié)束睁枕,就可以使用express 搭建web app了官边。在這里,我們來搭建一個名為 tfApp 的web 應(yīng)用外遇。
1注簿、創(chuàng)建應(yīng)用
在命令行窗口,進入一個文件夾跳仿,輸入下面的命令诡渴,就可以創(chuàng)建tfApp 應(yīng)用了
express tfApp -e
由于express 默認使用的是jade模板,考慮到學習成本菲语,我們加上 -e 參數(shù)妄辩,使用ejs 模板引擎。
2山上、安裝依賴
進入tfApp文件夾內(nèi)眼耀,并安裝依賴文件
cd tfApp/ && npm install
3、運行tfApp
等待依賴文件安裝成功后佩憾,運行以下命令就可以讓我們的應(yīng)用跑起來了哮伟。
npm start
在瀏覽器的地址欄輸入 http://localhost:3000/ ?就可以看到我們的tfApp 內(nèi)容了干花。
4、修改文件楞黄,測試app
在 tfApp文件夾內(nèi)池凄,找到 /views/index.ejs , 并使用編輯器 打開 ,在 body 標簽里面加入下面的Hello World , 保存后刷新瀏覽器谅辣,就會看到如下圖一樣
總結(jié)
一個webapp 就這么簡單的搭建完成了修赞,但是這只是最基本的婶恼。想要不斷完善這個應(yīng)用桑阶,還需要去學習了解更多關(guān)于express的知識。出門左轉(zhuǎn)請看express 中文網(wǎng)站